three.js实现土星绕太阳体系
概况如下:
1、SphereGeometry
实现自转的太阳,土星;
2、RingGeometry
实现土星公转轨道;
3、ImageUtils
加载球体贴图;
4、canvas
中createRadialGradient
实现太阳发光效果;
5、THREE.RingGeometry
实现土星公转轨道。
效果图如下:
预览地址:three.js实现土星绕太阳体系
初始化场景、相机、渲染器,设置相机位置,初始化光源,光源采用点光源PointLight
,设置光源位置为场景中心位置,并将光源加入场景中。
1 // 初始化场景 2 var scene = new THREE.Scene(); 3 // 初始化相机,第一个参数为摄像机视锥体垂直视野角度,第二个参数为摄像机视锥体长宽比, 4 // 第三个参数为摄像机视锥体近端面,第四个参数为摄像机视锥体远端面 5 var camera = new THREE.PerspectiveCamera(20, dom.clientWidth / dom.clientHeight, 1, 100000); 6 // 设置相机位置,对应参数分别表示x,y,z位置 7 camera.position.set(0, 0, 300); 8 var renderer = new THREE.WebGLRenderer({ 9 alpha: true, 10 antialias: true 11 }); 12 // 设置光照,第一个参数表示光颜色,第二个参数为光照强度,范围为0-1,默认值为1, 13 var lights = new THREE.PointLight('#ffffff', 1); 14 lights.position.set(0, 0, 0); 15 scene.add(lights);
设置场景窗口尺寸,并且初始化控制器,窗口尺寸默认与浏览器窗口尺寸保持一致,最后将渲染器加载到dom中。
1 // 设置窗口尺寸,第一个参数为宽度,第二个参数为高度 2 renderer.setSize(dom.clientWidth, dom.clientHeight); 3 // 初始化控制器 4 var orbitcontrols = new THREE.OrbitControls(camera,renderer.domElement); 5 // 将渲染器加载到dom中 6 dom.appendChild(renderer.domElement);
定义太阳及其材质,太阳通过SphereGeometry
来实现,通过ImageUtils
来导入贴图。
1 // 定义太阳材质,sunImgUrl表示太阳贴图地址 2 var sunTexture = THREE.ImageUtils.loadTexture(sunImgUrl, {}, function () { 3 renderer.render(scene, camera); 4 }); 5 // 使用SphereGeometry实现太阳球体,sunSize表示球体半径 6 var centerBall = new THREE.Mesh(new THREE.SphereGeometry(sunSize, 30, 50), new THREE.MeshBasicMaterial({ 7 map: sunTexture 8 }));
太阳发光效果通过Sprite
引入canvas
渲染的createRadialGradient
来实现。
1 /** 2 * 实现球体发光 3 * @param color 颜色的r,g和b值,比如:“123,123,123”; 4 * @returns {Element} 返回canvas对象 5 */ 6 var generateSprite = function (color) { 7 var canvas = document.createElement('canvas'); 8 canvas.width = 16; 9 canvas.height = 16; 10 var context = canvas.getContext('2d'); 11 var gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, 12 canvas.height / 2, canvas.width / 2); 13 gradient.addColorStop(0, 'rgba(' + color + ',1)'); 14 gradient.addColorStop(0.2, 'rgba(' + color + ',1)'); 15 gradient.addColorStop(0.4, 'rgba(' + color + ',.6)'); 16 gradient.addColorStop(1, 'rgba(0,0,0,0)'); 17 context.fillStyle = gradient; 18 context.fillRect(0, 0, canvas.width, canvas.height); 19 return canvas; 20 }; 21 // 添加太阳发光效果 22 var centerBallLite = new THREE.Sprite(new THREE.SpriteMaterial({ 23 map: new THREE.CanvasTexture(generateSprite(sunSpriteColor)), 24 blending: THREE.AdditiveBlending 25 })); 26 centerBallLite.scale.x = centerBallLite.scale.y = centerBallLite.scale.z = sunScaleSize; 27 scene.add(centerBallLite); 28 scene.add(centerBall);
实现土星绕太阳公转体系,公转轨道通过RingGeometry
来实现,公转轨道偏移通过position
来实现。
1 // 创建土星体系 2 var createSsaturnLite = function () { 3 // 添加土星体系 4 saturnMesh = new THREE.Mesh(new THREE.SphereGeometry(1, 1, 1), new THREE.MeshLambertMaterial()); //材质设定 5 // 土星对应元素 6 // 土星公转轨道 7 var track = new THREE.Mesh(new THREE.RingGeometry(saturnLiteRadius, saturnLiteRadius + 0.1, 50, 1), new THREE.MeshBasicMaterial()); 8 saturnLite = new THREE.Mesh(new THREE.SphereGeometry(saturnLiteSize, 30, 30), new THREE.MeshPhongMaterial({ 9 map: THREE.ImageUtils.loadTexture(imgUrl) 10 })); 11 saturnLite.position.set(saturnLiteRadius, 0, 0); 12 saturnLite.rotation.x = 1.9; 13 // 土星环对应元素 14 // 土星环公转轨道 15 var trackRing = new THREE.Mesh(new THREE.RingGeometry(saturnLiteSize + 3, saturnLiteSize + 8, 50, 1), new THREE.MeshBasicMaterial({ 16 map: THREE.ImageUtils.loadTexture(ringImgUrl), 17 side: THREE.DoubleSide 18 })); 19 // 土星环轨道中心 20 ringPoint = new THREE.Object3D(); 21 ringPoint.add(trackRing); 22 ringPoint.position.set(saturnLiteRadius, 0, 0); 23 ringPoint.rotation.x = 0.3; 24 25 var earthPoint = new THREE.Object3D(); 26 earthPoint.add(saturnLite); 27 earthPoint.add(track); 28 earthPoint.add(ringPoint); 29 saturnMesh.add(earthPoint); 30 saturnMesh.rotation.set(rotation.x, rotation.y, rotation.z); 31 scene.add(saturnMesh); 32 }
将创建好的太阳,土星自转公转体系渲染到场景中,自转和公转通过定时修改position
值来实现,动画使用requestAnimationFrame
来实现。
1 // 执行函数 2 var render = function () { 3 renderer.render(scene, camera); 4 centerBall.rotation.y -= sunSpeed; 5 saturnMesh.rotation.z -= saturnRotationSpeed; 6 orbitcontrols.update(); 7 requestAnimationFrame(render); 8 }
posted on 2019-09-16 22:21 baby_duoduo 阅读(702) 评论(0) 编辑 收藏 举报