three.js入門（一）：從立方體開始

時間 2019-12-06

原文原文鏈接

目前three.js是瀏覽器展示3D效果的一個很強大的js工具，遺憾的是沒有特別系統而全面的文檔（threejs官方文檔感受有些缺漏，能夠和WebGL中文網的threejs教程對照着看）。好了，根據WebGL中文網的threejs教程開始學習，由於教程裏的部分代碼已經不適用（版本過期）了，致使學習的時候有些磕磕絆絆，故記錄下本身編寫的代碼，以便之後查閱。html

一、測試頁面：index.htmlcanvas

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試</title>
    <script src="js/three.min.js"></script>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            /*background-color: blue;*/
        }
    </style>
</head>
<body>
<canvas></canvas>
</body>
<script src="js/chapter1.2.js"></script>
</html>

二、js代碼中應該有什麼元素 three.js寫的代碼一般含有三項元素：scene、camera和renderer三項，這三者的關係能夠用WebGL中文網教程中的一段話表示：瀏覽器

Three.js中的場景是一個物體的容器，開發者能夠將須要的角色放入場景中，例如蘋果，葡萄。同時，角色自身也管理着其在場景中的位置。相機的做用就是面對場景，在場景中取一個合適的景，把它拍下來。渲染器的做用就是將相機拍攝下來的圖片，放到瀏覽器中去顯示。app

如圖：dom

三、js代碼：chapter1.2.js工具

//定義一個場景
var scene = new THREE.Scene();

/*
定義一個透視相機，透視相機是最經常使用的相機，其餘類型的相機之後再去了解
參數說明function PerspectiveCamera(攝像機視錐體垂直視野角度, 攝像機視錐體長寬比<嚴格的說是寬比長>, 攝像機視錐體近端面, 攝像機視錐體遠端面)
*/
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
//定義相機的位置，threejs中座標是右手系
camera.position.z = 10;

var renderer = new THREE.WebGLRenderer({antialias : true});  //antialias 開啓抗鋸齒
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xffffff, 1);  //設置畫布的背景色和透明度
document.body.appendChild(renderer.domElement);  //將畫布元素添加到body

var geometry = new THREE.BoxGeometry(1, 1, 1);  //定義立方几何體
var material = new THREE.MeshBasicMaterial({color : 0xDC143C});  //設置集合體材質
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

function threeStart() {
    cube.rotation.x += 0.1;
    cube.rotation.y += 0.1;
    renderer.render(scene, camera);
    requestAnimationFrame(threeStart);  
}
requestAnimationFrame(threeStart);

效果是一個不斷旋轉的立方體：學習

當前的效果其實不是很明顯，由於沒有光源的配置，因此看起來沒有邊緣、明暗的效果。測試