效果：
中文網three.js docs
1.搭建環境 安裝three
首先我們需要新建一個項目 vue/react都可 這里以vue為演示
npm i three找到一個新的頁面 在頁面script的地方導入three?
import * as THREE from "three"或者自己逐個導入
import {PerspectiveCamera,Scene,WebGLRenderer,
} from "three";
import * as THREE from "three"2.搭建場景
<script>
import {PerspectiveCamera,Scene,WebGLRenderer,
} from "three";
import * as THREE from "three"
export default {mounted() {const scene = new Scene()const camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );const renderer = new WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );}
</script>簡單介紹：
scence：場景-畫布
camera：相機-PerspectiveCamera(投影攝像機:模擬人眼）-類似于模擬人的眼睛
render：渲染器-（畫布+人=畫） 這里就是一整幅畫
將這一整幅畫插入到body中
3.新建一個立方體
import {PerspectiveCamera,Scene,WebGLRenderer,
} from "three";
import * as THREE from "three"
export default {mounted() {const scene = new Scene()const camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );const renderer = new WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );const geometry = new THREE.BoxGeometry( 1, 1,1 );const material = new THREE.MeshBasicMaterial( {wireframe:true,color: 0x42b983} );const cube = new THREE.Mesh( geometry, material );scene.add( cube );camera.position.z = 5;},}?簡單介紹：
BoxGeometry：three提供的正方體 xyz
MeshBasicMaterial：基礎材料?wireframe:true：將材料以線條的方式顯示
Mesh：將形狀+材料合并
創造一個立方體 設置好材料 形成一個完整的正方體 將這個完整的正方體添加到場景中
并且將相機拿遠一點 就是camera.postion.z=5
如果不拿遠 我們的視角就在相機內部 如下圖
4.將正方體運動起來
function animate() {requestAnimationFrame( animate );cube.rotation.x += 0.01;cube.rotation.y += 0.01;renderer.render( scene, camera );}animate();?requestAinmationFrame：動畫針 重復調用animate函數
cube.rotation.y += 0.01：將正方體沿著x軸y軸旋轉0.1
renderer.render( scene, camera )：重新渲染
按照瀏覽器的刷新頻率去讓正方體沿xy旋轉 并且重新渲染
這樣肉眼看起來就像立方體動了起來
5.完整代碼
import {PerspectiveCamera,Scene,WebGLRenderer,
} from "three";
import * as THREE from "three"
export default {mounted() {const scene = new Scene()const camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );const renderer = new WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );const geometry = new THREE.BoxGeometry( 1, 1,1 );const material = new THREE.MeshBasicMaterial( {wireframe:true,color: 0x42b983,} );const cube = new THREE.Mesh( geometry, material );scene.add( cube );camera.position.z = 5;function animate() {requestAnimationFrame( animate );cube.rotation.x += 1;cube.rotation.y += 0.01;renderer.render( scene, camera );}animate();},}
)
