Three.js的學習曆程(一)

WebGL之Three.js的學習之路，WebGL本身學習起來不太容易，偶爾發現Three.js庫封裝的很好，簡單記錄下學習文法。

首先Three分三大塊來組裝:

(1)場景(scene)

(2)相機(camera)

(3)渲染器(renderer)

如何建立這三大塊呢？直接代碼來展示

場景:

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(400, 300); // 設定渲染器的寬度和高度
document.body.appendChild(renderer.domElement); // 添加到頁面當中

OK，基本架構完成。

第二步:将物體添加到場景中去

var geometry = new THREE.CubeGeometry(1, 1, 1); // 生成立方體，參數是X軸 Y軸 Z軸的長度
var material = new THREE.MeshBasicMaterial({color: 0xff0000}); // 立方體紋理
var cube = new THREE.Mesh(geometry, material); // 将紋理覆寫到立方體上

scene.add(cube); // 将立方體添加到場景中

第三步:渲染

下面使用渲染器将立方體渲染到頁面中去，實作這功能的函數是:

renderer.render(scene, camera); // 看參數名字就知道 scene是場景，camera是相機

OK，接下來看全部代碼：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>canvas { width: 100%; height: 100% }</style>
    <script src="../js/three.js"></script>
</head>
<body>
    <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);
        document.body.appendChild(renderer.domElement);
        var geometry = new THREE.CubeGeometry(1,1,1);
        var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
        var cube = new THREE.Mesh(geometry, material); scene.add(cube);
        camera.position.z = 5;
        function render() {
            requestAnimationFrame(render);
            cube.rotation.x += 0.1;
            cube.rotation.y += 0.1;
            renderer.render(scene, camera);
        }
        render();
    </script>
</body>
</html>