用Tree.js创建生动的3D场景

一、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>