THREE.PerspectiveCamera 太阳系

2024-08-09

three.js模拟实现太阳系行星体系

概况如下: 1.SphereGeometry实现自转的太阳: 2.RingGeometry实现太阳系星系的公转轨道: 3.ImageUtils加载球体和各行星贴图: 4.canvas中createRadialGradient实现太阳发光效果: 5.THREE.Sprite精灵实现太阳系行星. 效果图如下: 初始化场景.相机.渲染器,设置相机位置. // 初始化场景 var scene = new THREE.Scene(); // 初始化相机,第一个参数为摄像机视锥体垂直视野角度,第二个参数为摄

WebGL three.js学习笔记纹理贴图模拟太阳系运转

纹理贴图的应用以及实现一个太阳系的自转公转点击查看demo演示 demo地址:https://nsytsqdtn.github.io/demo/solar/solar three.js中的纹理纹理贴图是通过将图像应用到对象的一个或多个面,来为3D对象添加细节的一种方法. 可以使用TextureLoader类的load方法来加载纹理 function loadImgTexture(){ var loader = new THREE.TextureLoader(); loader.load("m

html+ccs3太阳系行星运转动画之土星有个环，地球有颗小卫星

在上一篇<html+ccs3太阳系行星运转动画>中实现了太阳系八大行星的基本运转动画. 太阳系又何止这些内容,为丰富一下动画,接下来增加“土星环”和“月球”来充盈太阳系动画. 下面是充盈后的动画效果静态图. 一.土星环修改原来土星的div,在外面放一个包裹层div,class设成saturn-container. 内部放4个div,一个用来显示土星这个圆球,3个用来显示土星环. <div class='saturn-container'> <div class="

html+ccs3太阳系行星运转动画

做一个太阳系八大行星的运转动画,不包括行星的卫星,所有行星围绕太阳公转,行星采用纯色,暂时没有自转. 效果静态图: 动画中包括:太阳及各行星,运行轨道,行星公转动画. 先画好草图,设计好大小和位置,根据公转周期计算好动画执行的时间. html的结构: 一个class为solarsys的div,作为太阳系容器元素,该div的position为relative. 行星轨道和行星都用div,position为absolute. 容器用relative和内部元素采用absolute的定位方式,比较简单的

使用css3的动画模拟太阳系行星公转

本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一些比较特别的动画. 太阳系最终的效果图如下: css3的animation是通过关键帧的形式做出来的,首先设定一个动画的运行时间,然后在这个时间轴上的若干位置处插入关键帧,浏览器根据关键帧设定的内容做过渡动画.animation常结合transform属性进行制作.以一个简单的例子说明,以一个div

JS+HTML5的Canvas画图模拟太阳系运转

查看效果:http://hovertree.com/texiao/html5/9.htm 地球自传 http://hovertree.com/texiao/html5/8.htm 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>HTM

太阳系Demo(openGL)

这个是8年前写的demo,提交的一份作业,按照提出的需求点,以最快和最简单的方式完成功能,因此代码比较简单. 1)截图 2) 功能点描述: 1.公转,自传 2.基础的摄像机运动 3.正视和顶视 4.天空盒 5.太阳黑子爆炸 6.彗星带尾巴 7.录制重播 3) 实现代码: 1.简单的摄像机代码(目前仅支持移动,不支持旋转) struct glCamera { vec3 pos;//摄像机的世界空间坐标 ]; vec3 forward; vec3 right; vec3 up; public : g

HTML5_画布_太阳系

HTML5_画布_太阳系一.canvas属性和方法的简单介绍①对于不支持canvas标签的浏览器需要显示"不支持canvas"使用IE11浏览器的开发人员工具,仿真:文档模式=8,显示:IE8不支持canvas 默认的画布背景是白色的,可以给它加一个背景样式 \App3_HTML5\Module2_Canvas\canvas-1.html <!DOCTYPE html> <html> <head lang="en"> <m

CSS3 旋转太阳系

参考https://www.tadywalsh.com/web/cascading-solar-system/ 首先旋转有两种方式一种是使用 transform-origin 另一种是transform: rotate(..) translateY(); 用这个来理解transfrom-origin http://www.css88.com/tool/css3Preview/Transform.html 用origin原来做的时钟 http://jsbin.com/hetoli/1

【转】PV3D的小练习~太阳系八大行星

转自:http://hi.baidu.com/boycy/item/70d1ba53bc8c3a958c12eddf http://www.cnblogs.com/flash3d/archive/2012/01/30/2331902.html PV3D的小练习~太阳系八大行星动画地址:http://hong-ming.cn/flash/8star.swf 有2M多,下载可能有点慢~多等等吧O(∩_∩)O~~ 不知道为什么,在这里拖动舞台好像有点问题,直接点击下面的链接可以查看完整的功能点击右

canvas绘制太阳系

原文地址:http://jeffzhong.space/2017/10/26/solar/ 学习canvas有一段时间了,顺便写个小项目练手,该项目用到的知识点包括: ES6面向对象基本的三角函数 canvas部分有:坐标变换,渐变,混合模式,线条和图形的绘制. 实际效果: solar system(推荐在chrome或safari下运行) 场景首先建立场景类,主要用来组织管理对象,统一更新和绘制对象.这里用到了ES6的类语法,构造函数建立对象列表属性planets,绘制背景方法drawBG

OpenGL 太阳系行星拾取例子（GL_SELECT） VS2008 + glut实现

太阳系:Solar System 以太阳(Sun)为中心,由内到外分别是: 水星(Mercury) 金星(Venus) 地球(Earth) 火星(Mars) 木星(Jupiter) 土星(Saturn) 天王星(Uranus) 海王星(Neptune) 冥王星(Pluto) 原来是太阳系九大行星,但是最后一个冥王星被除名,就变成八大行星了~ main.cpp 1234567891011121314151617181920212223242526272829303132333435363738

【three.js练习程序】创建太阳系

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ceshi</title> <script type="text/javascript" src=".\build\three.js"></script> <script src=".\examples\js\cont

opengl学习笔记（五）:组合变换，绘制一个简单的太阳系

创建太阳系模型描述的程序绘制一个简单的太阳系,其中有一颗行星和一颗太阳,用同一个函数绘制.需要使用glRotate*()函数让这颗行星绕太阳旋转,并且绕自身的轴旋转.还需要使用glTranslate*()函数让这颗行星离开原点,移动到它自己的轨道上.可以在glutWireSphere()函数中使用适当的参数,在绘制球体时指定球体的大小. planet.c #include <GL/glut.h> ,day =; void init(void) { glClearColor(0.0,0.0,0

认识我们的太阳系(Solar System)

一.初识太阳系如果太阳是一颗篮球,那么我们的地球是什么?? 如果太阳系里最大的行星:木星是一颗足球,那么我们的地球是什么?? 如果我们的地球是一颗排球,那么其他行星是什么?? 由此,我们可以看到,我们的地球跟太阳相比,是多么渺小,跟木星相比,依然是很渺小,但是地球是所有太阳内行星里的老大(岩石行星). 我们合起来比较一下: 二.什么是太阳系太阳系是以太阳为中心,和所有受到太阳的重力约束天体的集合体:8颗行星(2006年冥王星被去掉,因为其运动轨迹与其它八大行星不同,所以只剩下金星.水星.地球

React+Three.js——PerspectiveCamera透视相机camera参数以及属性值探索

因项目问题,对webgl进行了探索,当进行到3d相机时,对camera的up,position属性有部分难以理解的地方,因此做下了记录. 代码如下: import React, {Component} from 'react'; import * as Three from "three"; const {Vector3} = Three; let scene, camera, renderer, container, width, height, light; class Lesso

基于Opengl的太阳系动画实现

#include <GL\glut.h> float fEarth = 2.0f;//地球绕太阳的旋转角度float fMoon = 24.0f;//月球绕地球的旋转角度 void Init(){ glEnable(GL_DEPTH_TEST);//启用深度测试 glClearColor(0.0f,0.0f,0.0f,0.8f);//背景为黑色} void Reshape(int width, int height){ if (0==height) { height = 1; } glView

svg动画之我的自制太阳系

SVG意为可缩放矢量图形,svg的图片与普通的jpg,png等图片相比,其优势在于不失真.一般普通的图片放大后,会呈现出锯齿的形状,但是svg图片则不会这样,它可以被高质量地打印. 现在就用dreamweaver制作一个简单的svg动画,用来表示太阳系. 分享代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>太阳系</title> &

【Unity3D】实现太阳系

实践要求:写一个程序,实现一个完整的太阳系,其他星球围绕太阳的转速必须不一样,并且不再一个法平面内. 法平面是指过空间曲线的切点,且与切线垂直的平面.要求不在一个法平面内,则在保证所有行星以及太阳在一条轴上时,另外两条轴的比例不相同即可.公转速度在RotateAround参数里面设置.如: 这个程序在课堂程序的基础上完成,使用了预制.动态生成对象,在位置上使用Vector3定好行星初始位置,使用RotateAround设置行星公转,使用Rotate设置行星自转.参数大部分参照了太阳系的参数,如行

Java太阳系小游戏分析和源代码

Java太阳系小游戏分析和源代码 -20150809 近期看了面向对象的一些知识.然后跟着老师的解说做了一个太阳系各行星绕太阳转的小游戏,来练习巩固一下近期学的知识: 用到知识点:类的继承.方法的重载与重写.多态.封装等分析: 1.须要载入图片.绘图 2.建一个面板.主页面 3.行星类 . . . 效果图: 先看一下源代码结构图: 如今逐步分析各个类的功能: 1)工具类-----util包中 --Constant类封装了游戏中用到的常量 --GameUtil类封装了游戏的图片载入功能

THREE.PerspectiveCamera 太阳系

热门专题