ThreeJS小行星视角

目的:实现全景图片的小行星视角

  • 小行星视角转全景视角开场动画待实现!
    参考文档:https://www.cnblogs.com/riddick/p/9937729.html

实现步骤:

  • 设置相机位置在北极点或南极点
  • 设置相机fov=120 --可调整
  • 设置相机视角lookAt

相机在北极点实现:

 camera.position.set(0, 500, 0)
 camera.fov = 140
 camera.lookAt(new THREE.Vector3(0, -500, 0))

相机在北极点预览:
相机在南极点

相机在南极点预览:
相机在北极点

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
以下是使用Three.js实现八大行星公转自转的代码示例: ```javascript // 创建场景 var scene = new THREE.Scene(); // 创建相机 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 50; // 创建渲染器 var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 创建太阳 var sunGeometry = new THREE.SphereGeometry(10, 32, 32); var sunMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 }); var sun = new THREE.Mesh(sunGeometry, sunMaterial); scene.add(sun); // 创建八大行星 var mercuryGeometry = new THREE.SphereGeometry(1, 32, 32); var mercuryMaterial = new THREE.MeshBasicMaterial({ color: 0x888888 }); var mercury = new THREE.Mesh(mercuryGeometry, mercuryMaterial); mercury.position.x = 20; scene.add(mercury); var venusGeometry = new THREE.SphereGeometry(2, 32, 32); var venusMaterial = new THREE.MeshBasicMaterial({ color: 0xff8800 }); var venus = new THREE.Mesh(venusGeometry, venusMaterial); venus.position.x = 30; scene.add(venus); var earthGeometry = new THREE.SphereGeometry(3, 32, 32); var earthMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff }); var earth = new THREE.Mesh(earthGeometry, earthMaterial); earth.position.x = 40; scene.add(earth); var marsGeometry = new THREE.SphereGeometry(2, 32, 32); var marsMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 }); var mars = new THREE.Mesh(marsGeometry, marsMaterial); mars.position.x = 50; scene.add(mars); var jupiterGeometry = new THREE.SphereGeometry(6, 32, 32); var jupiterMaterial = new THREE.MeshBasicMaterial({ color: 0xffcc00 }); var jupiter = new THREE.Mesh(jupiterGeometry, jupiterMaterial); jupiter.position.x = 70; scene.add(jupiter); var saturnGeometry = new THREE.SphereGeometry(5, 32, 32); var saturnMaterial = new THREE.MeshBasicMaterial({ color: 0xcc9900 }); var saturn = new THREE.Mesh(saturnGeometry, saturnMaterial); saturn.position.x = 90; scene.add(saturn); var uranusGeometry = new THREE.SphereGeometry(4, 32, 32); var uranusMaterial = new THREE.MeshBasicMaterial({ color: 0x00ffff }); var uranus = new THREE.Mesh(uranusGeometry, uranusMaterial); uranus.position.x = 110; scene.add(uranus); var neptuneGeometry = new THREE.SphereGeometry(3, 32, 32); var neptuneMaterial = new THREE.MeshBasicMaterial({ color: 0x000099 }); var neptune = new THREE.Mesh(neptuneGeometry, neptuneMaterial); neptune.position.x = 130; scene.add(neptune); // 创建光源 var light = new THREE.PointLight(0xffffff, 1, 0); light.position.set(0, 0, 0); scene.add(light); // 动画循环 function animate() { requestAnimationFrame(animate); // 太阳自转 sun.rotation.y += 0.01; // 水星公转自转 mercury.rotation.y += 0.01; mercury.position.x = 20 * Math.cos(Date.now() * 0.0005); mercury.position.z = 20 * Math.sin(Date.now() * 0.0005); // 金星公转自转 venus.rotation.y += 0.01; venus.position.x = 30 * Math.cos(Date.now() * 0.0004); venus.position.z = 30 * Math.sin(Date.now() * 0.0004); // 地球公转自转 earth.rotation.y += 0.01; earth.position.x = 40 * Math.cos(Date.now() * 0.0003); earth.position.z = 40 * Math.sin(Date.now() * 0.0003); // 火星公转自转 mars.rotation.y += 0.01; mars.position.x = 50 * Math.cos(Date.now() * 0.0002); mars.position.z = 50 * Math.sin(Date.now() * 0.0002); // 木星公转自转 jupiter.rotation.y += 0.01; jupiter.position.x = 70 * Math.cos(Date.now() * 0.0001); jupiter.position.z = 70 * Math.sin(Date.now() * 0.0001); // 土星公转自转 saturn.rotation.y += 0.01; saturn.position.x = 90 * Math.cos(Date.now() * 0.00005); saturn.position.z = 90 * Math.sin(Date.now() * 0.00005); // 天王星公转自转 uranus.rotation.y += 0.01; uranus.position.x = 110 * Math.cos(Date.now() * 0.00003); uranus.position.z = 110 * Math.sin(Date.now() * 0.00003); // 海王星公转自转 neptune.rotation.y += 0.01; neptune.position.x = 130 * Math.cos(Date.now() * 0.00002); neptune.position.z = 130 * Math.sin(Date.now() * 0.00002); renderer.render(scene, camera); } animate(); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值