WebGL(Web Graphics Library)是一种3D绘图协议,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染。
你可以将Three.js看作是WebGL的封装——简单、易用、强大、效果惊艳。
Three.js其实是一款运行在浏览器中的 3D 引擎。不过,这款引擎目前还处在比较不成熟的开发阶段,其匮乏的文档与不活跃的社区增加了初学者的学习难度(201x年社区评论);从现在看来(202x),Three.js可谓胎死腹中——其实质是WebGL甚至OpenGL的衰落。
当然,这只是工具的迭代。OpenGL/WebGL/Three.js背后的计算机图形学、计算机视觉、计算机算法知识仍旧经典。这些看似被时代抛弃的事物,却仍旧是入门某些领域的绝佳工具。
你可以用它创建各种三维场景,包括网格模型、材质、光影、摄影机等各种对象,并在浏览器中看到精彩直观的演示。
<script src="three.js-master/build/three.js">script>
// hello.js
// 在hello.html文件中引入three.js和hello.js就可以啦
//【场景Scene】
var scene = new THREE.Scene();
// 网格模型
var geometry = new THREE.BoxGeometry(100, 100, 100); // 几何体
var material = new THREE.MeshLambertMaterial({ color: 0xFFC0CB }); // 材质
var mesh = new THREE.Mesh(geometry, material); // 网格模型
scene.add(mesh);
// 光照
var point = new THREE.PointLight(0xffffff); // 点光源
var ambient = new THREE.AmbientLight(0x444444); // 环境光
point.position.set(400, 200, 300);
scene.add(point);
scene.add(ambient);
//【相机Camera】
var width = window.innerWidth;
var height = window.innerHeight;
var k = width / height;
var s = 100;
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000); // 投影方式
camera.position.set(400, 200, 200); // 位置
camera.lookAt(scene.position); // 视线方向
//【渲染器Renderer】
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
renderer.setClearColor(0xFAEBD7, 1);
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera); // 渲染
▍绘制球体
上面的代码创建了一个长宽高均为100的立方体(var geometry = new THREE.BoxGeometry(100, 100, 100);
)
同样也可以创建一个球体(var geometry = new THREE.SphereGeometry(60, 40, 40);
)
Three.js还提供了很多封装好的3D图形;别忘了把网格模型add到场景scene中!
▍设置透明度
刚刚我们在设置材质时,只设置了颜色这个参数。其实还可以设置其他常用的属性,如透明度:
var material = new THREE.MeshLambertMaterial({ color: 0x0000ff, opacity: 0.7, transparent: true });
// opacity表示模型的透明度,取值为0~1
// transparent表示是否开启透明效果,默认false,这里置为true使透明度的设置生效
▍添加高光
初中物理教会我们自然界中存在两种反射:镜面反射和漫反射
上面的MeshLambertMaterial
即漫反射,下面的MeshPhongMaterial
为镜面反射:
var material = new THREE.MeshPhongMaterial({ ... });
▍自动旋转
HTML5标准中,W3C提供了一个用于动画展示的方法requestAnimationFrame()
,默认60FPS,效果很不错
function render() {
renderer.render(scene, camera); // 渲染
geometry.rotateY(0.01); // 每次绕y轴旋转0.01弧度
requestAnimationFrame(render); // 再次请求渲染
}
render();
更严格的写法:
let T0 = new Date();
function render() {
let T1 = new Date();
let t = T1 - T0;
renderer.render(scene, camera);
geometry.rotateY(0.001 * t);
requestAnimationFrame(render);
T0 = T1;
}
render();
▍鼠标操作3D模型
这体现出了Three.js的其中一个强大之处——丰富的控件,只需要简单的引入就可以使用它们的功能
这里引入的是轨道控件:
<script src="./three.js-master/examples/js/controls/OrbitControls.js">script>
// 缩放————滚轮
// 平移————右键
// 旋转————左键
function render() {
renderer.render(scene, camera); // 渲染
}
var controls = new THREE.OrbitControls(camera); // 创建控件对象
controls.addEventListener('change', render); // 监听事件
render();
E N D END END