一、軌道控制器查看物體；

1、基本概念

? ? ?軌道控制器（OrbitControls）可以使得相機圍繞目標進行軌道運動；

?2、代碼樣例

// 七、創建軌道控制器（相機圍繞著物體捕捉視角）
const controls = new OrbitControls(camera,renderer.domElement,)function render() {renderer.render(scene , camera);// 請求動畫幀：渲染下一幀的時候，會重新執行這個函數requestAnimationFrame(render);
}// 起始動畫
render();

二、添加坐標輔助器；

1、基本概念

? ? ? 用于簡單模擬3個坐標軸的對象；紅色代表X軸、綠色代表Y軸、藍色代表Z軸；

2、代碼樣例

// 八、添加坐標軸輔助器，數字代表軸的線段長度，默認為1
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

三、設置物體移動；

1、基本概念

? ? ? 物體對象的position熟悉，表示對象局部位置的Vector3，默認值為 (0,0,0)? ；

2、代碼片段

// 修改物體的位置方法1 (X,Y,Z)
// cube.position.set(5,0,0);// 修改屬性改變X軸的位置方法2
cube.position.x = 3;

function render() {// 1.實時移動cube物體位置cube.position.x += 0.01;if(cube.position.x > 5){cube.position.x = 0;} // 2.渲染畫面renderer.render(scene , camera);// 請求動畫幀：渲染下一幀的時候，會重新執行這個函數requestAnimationFrame(render);
}

四、物體的縮放與旋轉；

1、基本概念

???????設置物體的縮放屬性：scale；

???????設置物體的局部旋轉屬性：rotation，以弧度來表示；屬性order值應用于旋轉順序，默認值為'XYZ'：意味著先繞X軸旋轉，然后是Y軸，最后是Z軸；?

2、代碼片段

// 01、設置物體的縮放
cube.scale.set(3,2,1);
cube.scale.x = 5;// 02、設置物體的局部旋轉，以弧度來表示；
// 屬性order值應用于旋轉順序，默認值為'XYZ'：意味著先繞X軸旋轉，然后是Y軸，最后是Z軸；
cube.rotation.set(Math.PI / 4, 0 , 0, 'XYZ');

function render() {// 1.實時移動cube物體位置cube.position.x += 0.01;if(cube.position.x > 5){cube.position.x = 0;} // 2.循環旋轉cube.rotation.x += 0.01;// 3.渲染畫面renderer.render(scene , camera);// 請求動畫幀：渲染下一幀的時候，會重新執行這個函數requestAnimationFrame(render);
}

五、應用 requestAnimationFrame 正確處理動畫運動；

1、基本概念

? ? ? 動畫運動時快時慢，如何保證其性能？

2、代碼片段

function render(time) {// 1.實時移動cube物體位置// cube.position.x += 0.01;// if(cube.position.x > 5){//     cube.position.x = 0;// }// 循環旋轉角度// cube.rotation.x += 0.01;// 2.正常的電腦1秒是60幀，每一幀的間隔時間是 1000ms / 60幀 = 16毫秒；// 傳入time，表示當前幀的時間，每一幀時間間隔不均勻，導致前進的距離大小不等; // 移動距離 = 速度（速度為1） * 時間；就可以保證物體移動距離均勻，不是時快時慢；let t = (time / 1000) % 5;cube.position.x = t * 1;console.log("time", time);console.log("position", t);// 3.渲染畫面renderer.render(scene , camera);// 請求動畫幀：渲染下一幀的時候，會重新執行這個函數    requestAnimationFrame(render);
}

六、通過Clock跟蹤時間處理動畫；

1、基本概念

?????該對象用于跟蹤時間

2、代碼片段

七、Gsap動畫庫基本使用與原理；

1、基本概念

2、代碼片段

八、Gsap控制動畫屬性與方法；

1、基本概念

2、代碼片段

九、根據尺寸變化實現自適應畫面；

1、基本概念

2、代碼片段

十、調用js接口控制畫布全屏 和 退出全屏；

1、基本概念

2、代碼片段

十一、應用圖形用戶界面更改變量；

1、基本概念

2、代碼片段