一、Tree.js是什么?
如果你对3D编程比较熟悉,那么你肯定听说过Three.js。Three.js是一个基于WebGL实现的3D库,可以让开发者轻松地在网页上展示3D场景。Tree.js不仅提供了丰富的3D模型、材质等资源,还能够实现AI或者粒子特效等丰富的3D交互功能。那么我们就要学会如何使用Three.js来构建一个生动的3D场景。
二、准备工作
在开始之前,你需要引入Three.js。可以直接在浏览器端引入最新版的Three.js,也可以下载最新版放置在本地,然后直接引入Three.js文件即可。接下来我们就模拟创建一个太阳系来带着大家熟悉Three.js的使用。
三、构建基础的3D场景
在Three.js中,构建3D场景是需要渲染器的。先通过创建canvas元素,并创建渲染器,设置渲染器的大小和清除颜色。然后创建3D场景、透视投影相机,并添加到场景当中。
<script> //创建场景 var scene = new THREE.Scene(); //创建透视相机 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); //创建渲染器 var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0x000000, 1); document.body.appendChild(renderer.domElement); //添加相机到场景中 scene.add(camera); //创建太阳 var sunGeometry = new THREE.SphereGeometry(5, 32, 32); var sunMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff }); var sunMesh = new THREE.Mesh(sunGeometry, sunMaterial); scene.add(sunMesh); //设置相机的位置 camera.position.z = 20; </script>
四、添加行星
接下来添加行星,行星与椭圆轨道之间的距离是一个难点。通过计算它的绕行速度和角度变化计算其在x, y坐标上的变化。在这里,我们需要设置每个行星的距离、半径、颜色、贴图、绕太阳的速度和方向等属性。
<script> //创建地球 var earthGeometry = new THREE.SphereGeometry(1, 32, 32); var earthMaterial = new THREE.MeshLambertMaterial({ map: THREE.ImageUtils.loadTexture('/images/earth.jpg'), color: 0xffffff }); var earthMesh = new THREE.Mesh(earthGeometry, earthMaterial); //让地球在x轴上绕太阳旋转 earthMesh.position.set(8, 0, 0); //设置地球绕行太阳的速度 earthMesh.speed = 0.05; scene.add(earthMesh); //创建火星 var marsGeometry = new THREE.SphereGeometry(1, 32, 32); var marsMaterial = new THREE.MeshLambertMaterial({ map: THREE.ImageUtils.loadTexture('images/mars.jpg'), color: 0xffffff }); var marsMesh = new THREE.Mesh(marsGeometry, marsMaterial); //让火星在y轴上绕太阳旋转 marsMesh.position.set(0, 10, 0); //设置火星绕行太阳的速度 marsMesh.speed = 0.03; scene.add(marsMesh); </script>
五、环绕自转演示
确定好行星的位置后,接下来就是环绕自转的演示,通过旋转太阳和自转等方法来增加真实感。并且添加不同光源来模拟不同环境下的太阳系。下面是完整代码示例:
<script> //创建场景 var scene = new THREE.Scene(); //创建透视相机 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); //创建渲染器 var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0x000000, 1); document.body.appendChild(renderer.domElement); //添加相机到场景中 scene.add(camera); //创建太阳 var sunGeometry = new THREE.SphereGeometry(5, 32, 32); var sunMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff }); var sunMesh = new THREE.Mesh(sunGeometry, sunMaterial); scene.add(sunMesh); //添加光源 var pointLight = new THREE.PointLight(0xffffff, 1, 700); pointLight.position.set(0, 0, 0); scene.add(pointLight); var ambientLight = new THREE.AmbientLight(0x404040); scene.add(ambientLight); //设置相机的位置 camera.position.z = 20; //创建地球 var earthGeometry = new THREE.SphereGeometry(1, 32, 32); var earthMaterial = new THREE.MeshLambertMaterial({ map: THREE.ImageUtils.loadTexture('/images/earth.jpg'), color: 0xffffff }); var earthMesh = new THREE.Mesh(earthGeometry, earthMaterial); //让地球在x轴上绕太阳旋转 earthMesh.position.set(8, 0, 0); //设置地球绕行太阳的速度 earthMesh.speed = 0.05; scene.add(earthMesh); //创建火星 var marsGeometry = new THREE.SphereGeometry(1, 32, 32); var marsMaterial = new THREE.MeshLambertMaterial({ map: THREE.ImageUtils.loadTexture('images/mars.jpg'), color: 0xffffff }); var marsMesh = new THREE.Mesh(marsGeometry, marsMaterial); //让火星在y轴上绕太阳旋转 marsMesh.position.set(0, 10, 0); //设置火星绕行太阳的速度 marsMesh.speed = 0.03; scene.add(marsMesh); //渲染循环 renderer.render(scene, camera); function render() { earthMesh.rotation.y += earthMesh.speed; marsMesh.rotation.y += marsMesh.speed; sunMesh.rotation.y += 0.01; requestAnimationFrame(render); renderer.render(scene, camera); } render(); </script>