初探threeJs，進入web3D的世界。

最近開始看了webGL的一些知識，瞭解了相關的計算機圖形基礎知識，突然發現這些知識和之前大學學過得3Dmax有很多共性的地方，比如場景，模型、材質、燈光、攝像機等等。突然發現之前自己學的東西並不是全部沒用，理解起來也有一定幫幫助。

運行結果：

代碼如下：

let i = 0;
function init() {
    // create a scene, that will hold all our elements such as objects, cameras and lights.
    var scene = new THREE.Scene();

    // create a camera, which defines where we're looking at.
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

    // create a render and set the size
    // 設置渲染面板屬性
    var renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(new THREE.Color(0xcccccc));  // 設置渲染面板顏色
    renderer.setSize(window.innerWidth, window.innerHeight);    // 設置渲染面板長寬

    // // show axes in the screen
    // 顯示三維座標軸
    var axes = new THREE.AxesHelper(20);
    scene.add(axes);

    // create the ground plane
    // var planeGeometry = new THREE.PlaneGeometry(60, 20);
    // var planeMaterial = new THREE.MeshBasicMaterial({
    //     color: 0xAAAAAA
    // });
    // var plane = new THREE.Mesh(planeGeometry, planeMaterial);

    // // rotate and position the plane
    // plane.rotation.x = -0.5 * Math.PI;
    // plane.position.set(15, 0, 0);

    // // add the plane to the scene
    // scene.add(plane);

    // create a cube
    

    // position the cube
    // cube.position.set(-4, 3, 0);
    // add the cube to the scene
    

    // create a sphere
    // var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
    // var sphereMaterial = new THREE.MeshBasicMaterial({
    //     color: 0x7777FF,
    //     wireframe: true
    // });
    // var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

    // // position the sphere
    // sphere.position.set(20, 4, 2);

    // // add the sphere to the scene
    // scene.add(sphere);

    // position and point the camera to the center of the scene
    camera.position.set(-30, 40, 30);
    camera.lookAt(scene.position);

    // add the output of the renderer to the html element
    document.getElementById("webgl-output").appendChild(renderer.domElement);

    // render the scene
    let addT = null;
    let redt = null;
    let timeAdd = null;
    let timeDel = null;
    let step = 1;
    let frequ = 100;
    // 數值增加到制定數字
    function add (dis) {
        clearInterval(timeDel);
        timeAdd = setInterval(() => {
            if (i < dis) {
                i++;
                intCub();
            } else {
                clearInterval(timeAdd);
                // del(0);
            }
            console.log(i);
        }, frequ);
    };
    // 數值減少到制定數字
    function del (dis) {
        clearInterval(timeAdd);
        timeDel = setInterval(() => {
            if (i > dis) {
                i--;
                intCub();
            } else {
                val = dis;
                clearInterval(timeDel);
                add(50)
            }
            console.log(i);
        }, frequ);
    };
    function intCub () {
        let random = parseInt(1 + (4 - 1) * (Math.random()));   // 隨機數用於正方體的長寬高
        let randomC = parseInt(1 + (2 - 1) * (Math.random()));  // 隨機數用於球形的半徑
        let colorRandomNum = parseInt(1 + (7 - 1) * (Math.random()));  // 隨機數用於賦值後續的物體的材質顏色
        let randomColor = [0xF7CE18, 0x2550EC, 0x57E10C, 0xEB6F0A, 0xEB0AE9, 0x820745, 0x8D11D8];

        // 配置燈光
        let light = new THREE.AmbientLight(0xFF0000);
        light.position.set(100, 100, 200);
                
        // 生成正方體
        var cubeGeometry = new THREE.BoxGeometry(random, random, random);   // 長寬高
        // 給正方體網格添加材質
        var cubeMaterial = new THREE.MeshBasicMaterial({
            color: randomColor[colorRandomNum],
            wireframe: false  // 是否顯示網格狀態
        });
        var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);  // 將材質貼到模型上

        // 生成原型
        var sphereGeometry = new THREE.SphereGeometry(randomC, 200, 200);  // 半徑和網格數，網格數表示球體的粗糙程度
        var sphereMaterial = new THREE.MeshBasicMaterial({
            color: randomColor[colorRandomNum],
            wireframe: false   // 是否顯示網格狀態
        });
        var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);  // 將材質貼到模型上

        // position the sphere
        // 設置球體的位置
        sphere.position.set(parseInt(-10 + (25 - 1) * (Math.random())), parseInt(-10 + (25 - 1) * (Math.random())), parseInt(-10 + (25 - 1) * (Math.random())));
        
        // 設置正方體的位置
        cube.position.set(parseInt(-10 + (25 - 1) * (Math.random())), parseInt(-10 + (25 - 1) * (Math.random())), parseInt(-10 + (25 - 1) * (Math.random())));
        // add the sphere to the scene
        // 將貼好材質的模型和燈光添加到場景
        scene.add(sphere);  
        scene.add(cube);
        scene.add(light);
        renderer.render(scene, camera); // 渲染場景中的模型
    };
    // 運行渲染
    add (50);
}

<!DOCTYPE html>

<html>

<head>
    <title>Example 01.02 - First Scene</title>
    <meta charset="UTF-8" />
    <script type="text/javascript" charset="UTF-8" src="../../libs/three/three.js"></script>
    <script type="text/javascript" charset="UTF-8" src="../../libs/three/controls/TrackballControls.js"></script>
    <script type="text/javascript" src="./js/01-02.js"></script>
    <link rel="stylesheet" href="../../css/default.css">
</head>

<body>

    <!-- Div which will hold the Output -->
    <div id="webgl-output"></div>

    <!-- Javascript code that runs our Three.js examples -->
    <script type="text/javascript">
        (function () {
            // your page initialization code here
            // the DOM will be available here
            init()
        })();
    </script>
</body>

</html>