threejs是對(duì)webGL的封裝本涕，容易上手
github地址
官網(wǎng)地址
特點(diǎn)
掩蓋了3D渲染的細(xì)節(jié)贿条，面向?qū)ο螅瑪?shù)學(xué)庫(kù)，速度快跪妥，擴(kuò)展性強(qiáng)
文檔粗糙，學(xué)習(xí)資源少，不是游戲引擎（需要相關(guān)的功能需要進(jìn)行二次開發(fā)Babylon.js）
threejs在線編輯器
入門案例
<body onload="init()">
//初始化函數(shù)，頁面加載完成是調(diào)用
function init() {
initRenderer(); // 渲染器
initScene(); // 場(chǎng)景
initCamera(); // 相機(jī)
initMesh(); // 模型
animate(); // 運(yùn)行動(dòng)畫
}
性能監(jiān)測(cè)插件
fps：畫面每秒傳輸?shù)膸瑪?shù)山孔。
stats插件
- 引入
<script src="http://www.wjceo.com/lib/js/libs/stats.min.js"></script>
- 實(shí)例化，添加到頁面
stats = new Stats();
document.body.appendChild(stats.dom);
- 更新渲染時(shí)間
//運(yùn)行動(dòng)畫
function animate() {
requestAnimationFrame(animate); //循環(huán)調(diào)用函數(shù)
mesh.rotation.x += 0.01; //每幀網(wǎng)格模型的沿x軸旋轉(zhuǎn)0.01弧度
mesh.rotation.y += 0.02; //每幀網(wǎng)格模型的沿y軸旋轉(zhuǎn)0.02弧度
stats.update(); //更新渲染時(shí)間
renderer.render(scene, camera); //渲染界面
}
scene場(chǎng)景
場(chǎng)景：three.js放內(nèi)容的容器荷憋，（內(nèi)容：模型台颠、燈光、照相機(jī)）勒庄〈埃可以多個(gè)場(chǎng)景間切換。
Object3D對(duì)象
threejs中能夠添加到場(chǎng)景的對(duì)象锅铅，全都繼承自基類THREE.Object3D酪呻。這些對(duì)象又稱為3d對(duì)象。
全局變量的繼承情況
//創(chuàng)建模型
function initMesh() {
geometry = new THREE.BoxGeometry(2, 2, 2);
material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh(geometry, material); //創(chuàng)建3d對(duì)象
mesh.name = 'myMesh'
scene.add(mesh); //將3d對(duì)象添加到場(chǎng)景
mesh.visible = false; // 不渲染模型
// scene.remove(mesh); // 刪除模型
}
//初始化函數(shù)盐须，頁面加載完成是調(diào)用
function init() {
initRenderer();
initScene();
initCamera();
initMesh();
// 打印3d對(duì)象
console.log(scene.getObjectByName('myMesh'))
animate();
}
