threejs是对webGL的封装，容易上手
github地址
官网地址
特点
掩盖了3D渲染的细节，面向对象，包含数学库，速度快，扩展性强
文档粗糙，学习资源少，不是游戏引擎（需要相关的功能需要进行二次开发Babylon.js）
threejs在线编辑器
入门案例
<body onload="init()">
//初始化函数，页面加载完成是调用
function init() {
initRenderer(); // 渲染器
initScene(); // 场景
initCamera(); // 相机
initMesh(); // 模型
animate(); // 运行动画
}
性能监测插件
fps：画面每秒传输的帧数。
stats插件
- 引入
<script src="http://www.wjceo.com/lib/js/libs/stats.min.js"></script>
- 实例化，添加到页面
stats = new Stats();
document.body.appendChild(stats.dom);
- 更新渲染时间
//运行动画
function animate() {
requestAnimationFrame(animate); //循环调用函数
mesh.rotation.x += 0.01; //每帧网格模型的沿x轴旋转0.01弧度
mesh.rotation.y += 0.02; //每帧网格模型的沿y轴旋转0.02弧度
stats.update(); //更新渲染时间
renderer.render(scene, camera); //渲染界面
}
scene场景
场景：three.js放内容的容器，（内容：模型、灯光、照相机）。可以多个场景间切换。
Object3D对象
threejs中能够添加到场景的对象，全都继承自基类THREE.Object3D。这些对象又称为3d对象。
全局变量的继承情况
//创建模型
function initMesh() {
geometry = new THREE.BoxGeometry(2, 2, 2);
material = new THREE.MeshNormalMaterial();
mesh = new THREE.Mesh(geometry, material); //创建3d对象
mesh.name = 'myMesh'
scene.add(mesh); //将3d对象添加到场景
mesh.visible = false; // 不渲染模型
// scene.remove(mesh); // 删除模型
}
//初始化函数，页面加载完成是调用
function init() {
initRenderer();
initScene();
initCamera();
initMesh();
// 打印3d对象
console.log(scene.getObjectByName('myMesh'))
animate();
}
网友评论