three.js 基礎教程

three.js 可能有人沒有聽過，但是微信小遊戲跳一跳大家都玩過，對由three.js 基礎上開發出來的

01下載three.js

02 three.js 目錄

three
 ├── build   # 打包文件，含有 Three.js 構建出來的 JavaScript 文件，可以直接引入使用，並有壓縮版
 ├── docs    # Three.js 的官方文檔的資源構建；
 ├── editor  # Three.js 的一個網頁版的模型編輯器；
 ├── examples   # Three.js 的官方案例，
 ├── files  
 ├── icon.png 
 ├── LICENSE
 ├── package-lock.json
 ├── package.json
 ├── README.md
 ├── src  # Three.js 的源文件；
 ├── test  # 測試代碼
 └── utils  #其他插件 

03官網小案例

首先我們需要知道的是：場景、相機和渲染器，這樣我們就能透過攝像機渲染出場景。

如果你做過3D建模，c4d等建模工程，對上面的名詞一定很熟悉，你可以理解爲，我們現在寫的代碼是將你想象的東西變成現實，要有塊地，要有一個視角，然後你一想，最後出現一個基本土地模型

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 );  //註冊到body

//創建模型 
var geometry = new THREE.BoxGeometry( 1, 1, 1 );  // 創建一個幾何模型 BoxGeometry 
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); // 創建材質 顏色是綠色   
var cube = new THREE.Mesh( geometry, material ); //創建網格 
// 網格包含一個幾何體以及作用在此幾何體上的材質，我們可以直接將網格對象放入到我們的場景中，並讓它在場景中自由移動。
scene.add( cube ); //將網格添加到場景上 
camera.position.z = 5; // 規避像機和立方體重合
// 渲染場景
    var animate = function () {
        requestAnimationFrame(animate);
        // 動畫
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        renderer.render(scene, camera);
    };
    animate();

基礎功能之 Scene 場景