用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>