three.js模拟实现太阳系行星体系功能基于three.js的炫酷视觉动画景观特效Three.js+TweenMax.js实现带有现代科技感的信号传输隧道动画效果源码HTML5+Three.js实现的骑着单车环游太空动画效果源码

 // 初始化场景 var scene = new THREE.Scene(); // 初始化相机，第一个参数为摄像机视锥体垂直视野角度，第二个参数为摄像机视锥体长宽比， // 第三个参数为摄像机视锥体近端面，第四个参数为摄像机视锥体远端面 var camera = new THREE.PerspectiveCamera(20, dom.clientWidth / dom.clientHeight, 1, 100000); // 设置相机位置，对应参数分别表示x，y，z位置 camera.position.set(0, 0, 500); var renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });

 // 设置窗口尺寸，第一个参数为宽度，第二个参数为高度 renderer.setSize(dom.clientWidth, dom.clientHeight); // 初始化控制器 var orbitcontrols = new THREE.OrbitControls(camera,renderer.domElement); // 将渲染器加载到dom中 dom.appendChild(renderer.domElement);

 // 定义太阳材质 var sunTexture = THREE.ImageUtils.loadTexture('./image/sun_bg.jpg', {}, function () { renderer.render(scene, camera); }); // 太阳以及太阳材质设定 centerBall = new THREE.Mesh(new THREE.SphereGeometry(30, 30, 30), new THREE.MeshBasicMaterial({ map: sunTexture })); scene.add(centerBall);

 /** * 实现球体发光 * @param color 颜色的r,g和b值,比如：“123,123,123”; * @returns {Element} 返回canvas对象 */ var generateSprite = function (color) { var canvas = document.createElement('canvas'); canvas.width = 16; canvas.height = 16; var context = canvas.getContext('2d'); var gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2); gradient.addColorStop(0, 'rgba(' + color + ',1)'); gradient.addColorStop(0.2, 'rgba(' + color + ',1)'); gradient.addColorStop(0.4, 'rgba(' + color + ',.6)'); gradient.addColorStop(1, 'rgba(0,0,0,0)'); context.fillStyle = gradient; context.fillRect(0, 0, canvas.width, canvas.height); return canvas; }; // 添加太阳发光效果 var centerBallLite = new THREE.Sprite(new THREE.SpriteMaterial({ map: new THREE.CanvasTexture(generateSprite(sunSpriteColor)), blending: THREE.AdditiveBlending })); centerBallLite.scale.x = centerBallLite.scale.y = centerBallLite.scale.z = sunScaleSize; scene.add(centerBallLite);

 /** * 返回行星轨道的组合体 * @param starLiteSize 行星的大小 * @param starLiteRadius 行星的旋转半径 * @param rotation 行星组合体的x,y,z三个方向的旋转角度 * @param speed 行星运动速度 * @param imgUrl 行星的贴图 * @param scene 场景 * @returns {{satellite: THREE.Mesh, speed: *}} 卫星组合对象;速度 */ var initSatellite = function (starLiteSize, starLiteRadius, rotation, speed, imgUrl, scene) { var track = new THREE.Mesh(new THREE.RingGeometry(starLiteRadius, starLiteRadius + 0.05, 50, 1), new THREE.MeshBasicMaterial()); var centerMesh = new THREE.Mesh(new THREE.SphereGeometry(1, 1, 1), new THREE.MeshLambertMaterial()); //材质设定 var starLite = new THREE.Sprite(new THREE.SpriteMaterial({ map: THREE.ImageUtils.loadTexture(imgUrl) })); starLite.scale.x = starLite.scale.y = starLite.scale.z = starLiteSize; starLite.position.set(starLiteRadius, 0, 0); var pivotPoint = new THREE.Object3D(); pivotPoint.add(starLite); pivotPoint.add(track); centerMesh.add(pivotPoint); centerMesh.rotation.set(rotation.x, rotation.y, rotation.z); scene.add(centerMesh); return {starLite: centerMesh, speed: speed}; };

 // 执行函数 var render = function () { renderer.render(scene, camera); centerBall.rotation.y -= 0.01; for (var i = 0; i < starLites.length; i++) { starLites[i].starLite.rotation.z -= starLites[i].speed; } orbitcontrols.update(); requestAnimationFrame(render); }