three 实现绕物体旋转,卫星绕星球旋转
程序员文章站
2024-01-14 15:54:46
如果是二维的话,可以根据变化角度结合三角函数就能计算从x和y坐标;无奈,博主不会三维数学啊,计算不出x,y和z坐标啊。还好,博主终于在网上找到了解决的方法,就是把中心点,圆环(圆轨)和卫星三者组合成一体,再改变旋转角度 ......
1.先看看效果
2.如果是二维的话,可以根据变化角度结合三角函数就能计算从x和y坐标;
无奈,如果还是使用坐标改变的方式,博主不会三维数学啊,计算不出x,y和z坐标啊。
还好,过了好长时间,博主终于在网上找到了解决的方法,
就是把中心点,圆环(圆轨)和卫星三者组合成一体,再改变旋转角度
3.代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TestRound</title> <style type="text/css"> html, body { width: 100%; height: 100%; margin: 0; background-color: black; } div#box { width: 100%; height: 100%; } </style> <script type="text/javascript" src="../../js/resource/js/three/three.js"></script> </head> <body onload="initThree()"> <div id="box"></div> </body> <script> var renderer, camera, scene;//渲染器,相加,场景 var Earth, satellites = [];//地球,卫星(数组) function initThree() { var dom = document.getElementById("box"); scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(20, dom.clientWidth / dom.clientHeight, 1, 1000); camera.position.set(0, 0, 400);//设置相机位置 renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); renderer.setSize(dom.clientWidth, dom.clientHeight);//设置窗口尺寸 dom.appendChild(renderer.domElement); var sunTexture = THREE.ImageUtils.loadTexture('../../js/resource/img/map_world.png', {}, function () { renderer.render(scene, camera); }); //地球 Earth = new THREE.Mesh(new THREE.SphereGeometry(20, 30, 30), new THREE.MeshBasicMaterial({ map: sunTexture })); //材质设定 var satellite = new THREE.Sprite(new THREE.SpriteMaterial({ map: new THREE.CanvasTexture(generateSprite('196,233,255')), blending: THREE.AdditiveBlending })); satellite.scale.x = satellite.scale.y = satellite.scale.z = 60; scene.add(satellite);//添加发光,让地球有发光的样式 scene.add(Earth); //添加卫星 satellites.push(initSatellite(5, 28, {x: -Math.PI * 0.35, y: Math.PI * 0.25, z: 0}, 0.021, scene)); satellites.push(initSatellite(5, 25, {x: -Math.PI * 0.35, y: -Math.PI * 0.2, z: 0}, 0.022, scene)); satellites.push(initSatellite(5, 29, {x: -Math.PI * 0.35, y: Math.PI * 0.05, z: 0}, 0.023, scene)); render(); } /** * 返回一个卫星和轨道的组合体 * @param satelliteSize 卫星的大小 * @param satelliteRadius 卫星的旋转半径 * @param rotation 组合体的x,y,z三个方向的旋转角度 * @param speed 卫星运动速度 * @param scene 场景 * @returns {{satellite: THREE.Mesh, speed: *}} 卫星组合对象;速度 */ var initSatellite = function (satelliteSize, satelliteRadius, rotation, speed, scene) { var track = new THREE.Mesh(new THREE.RingGeometry(satelliteRadius, satelliteRadius + 0.05, 50, 1), new THREE.MeshBasicMaterial()); var centerMesh = new THREE.Mesh(new THREE.SphereGeometry(1, 1, 1), new THREE.MeshLambertMaterial()); //材质设定 var satellite = new THREE.Sprite(new THREE.SpriteMaterial({ map: new THREE.CanvasTexture(generateSprite('196,233,255')), blending: THREE.AdditiveBlending })); satellite.scale.x = satellite.scale.y = satellite.scale.z = satelliteSize; satellite.position.set(satelliteRadius, 0, 0); var pivotPoint = new THREE.Object3D(); pivotPoint.add(satellite); pivotPoint.add(track); centerMesh.add(pivotPoint); centerMesh.rotation.set(rotation.x, rotation.y, rotation.z); scene.add(centerMesh); return {satellite: centerMesh, speed: speed}; }; /** * 实现发光星星 * @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; }; function render() { renderer.render(scene, camera); Earth.rotation.y -= 0.01; for (var i = 0; i < satellites.length; i++) { satellites[i].satellite.rotation.z -= satellites[i].speed; } requestAnimationFrame(render); } </script> </html>
上一篇: 【模板】最长公共子序列
下一篇: 快速幂(取余运算)