基礎用法

幾何體Geometry

創建一個立方體

THREE.BoxGeometry(100,100,100)

創建了一個長寬高都是100的立方體

 

材質Material

創建了一個可以用於立方體的材質對象

THREE.MeshLambertMaterial({color:0x0000ff})

 

光照Light

創建一個點光源，意思就是從某個方向拿個手電筒照着

var point=new THREE.PointLight(0xffffff);
point.position.set(100,200,300);//點光源位置   X,Y,Z
scene.add(point);//點光源添加到場景中

創建一個環境光，意思就是房間內整體的亮度

var ambient=new THREE.AmbientLight(0x444444);
 scene.add(ambient);

 

相機Camera

camera = new THREE.PerspectiveCamera( 110, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 0, 300, 1000 ); //設置相機位置

camera.lookAt(scene.position);  //設置相機方向(指向的場景對象)

 

網格模型進行三種維度的旋轉

rotateX，rotateY , rotateZ,參數爲弧度

 

網格模型進行平移

使用網格模型對象的方法translateY()可以把球體網格模型沿着y軸進行平移， 方法translateX()、translateZ()表示其它兩個軸方向上的平移

translateX、translateY、translateZ

 

執行動畫的方法

requestAnimationFrame(myfun)

一般默認保持60FPS的頻率，大約每16.7ms調用一次equestAnimationFrame()方法指定的函數

 

三維座標系

AxesHelper

紅線是X軸，綠線是Y軸，藍線是Z軸

var axes = new THREE.AxisHelper(30);   //參數是線軸的大小
scene.add(axes);

網格輔助線

GridHelper( size : number, divisions : Number, colorCenterLine : Color, colorGrid : Color )
size -- 網格寬度，默認爲 10. 
divisions -- 等分數，默認爲 10. 
colorCenterLine -- 中心線顏色，默認 0x444444 
colorGrid --  網格線顏色，默認爲 0x888888

var gridHelper = new THREE.GridHelper( 100, 30, 0x2C2C2C, 0x888888 );
scene.add(gridHelper);

 

鼠標操作三維場景

import { OrbitControls } from '/three.js/three.js-master/examples/jsm/controls/OrbitControls.js';

        controls = new OrbitControls( camera, renderer.domElement );
        controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
        controls.dampingFactor = 0.1;
        controls.screenSpacePanning = false;
        controls.minDistance = 10;
        controls.maxDistance =600;
        controls.maxPolarAngle = Math.PI;

function render() {
    renderer.render(scene,camera);//執行渲染操作
}
controls.addEventListener('change', render);//監聽鼠標、鍵盤事件

或者第二種寫法

function render() {
    renderer.render(scene,camera);//執行渲染操作
    requestAnimationFrame(render);//請求再次執行渲染函數render
}
render();
var controls = new THREE.OrbitControls(camera);//創建控件對象

模型操作:

• 縮放：滾動—鼠標中鍵
• 平移：拖動—鼠標右鍵
• 旋轉：拖動—鼠標左鍵