threejs
随着HTML5的普及，网页的表现能力越来越强大，浏览器提供了WebGL接口，可以通过调用对应API进行3D图形的绘制，Three.js在这些基础接口之上又做了一层封装。
原文链接
特点
Three.js特点：
- 掩盖了3D渲染细节
- 面向对象
- 功能丰富
- 速度快
- 支持交互
- 内置文件支持
- 拓展性强
- 同时支持HTML5、2D、Canvas
动画示例
简介
本文通过three.js中基础的场景实现简单了解一下
引入
首先需要引入three.js库文件，可以下载到本地或直接引用线上地址。
<script src='http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js'></script>
创建场景
为了three.js显示，需要三件事情：场景、相机和渲染器
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
1、先建立一块场景。
2、在three.js中有不同的相机，上面使用的是PerspectiveCamera
第一个参数是视野。是在任何给定时刻在显示器上看到的场景的范围，以度为单位。
第二个是宽高比。最好使用元素的宽度除以高度，不然图像看起来很凹陷。
接下来的两个属性是近端和远端剪切平面。如果对象远离相机比的数值，远或近于附近将不会被渲染。
3、接下来是渲染器。除了使用的WebGLRenderer之外，three.js还带有一些其他的功能，通常用于旧版浏览器或者因为某些原因没有WebGL支持的用户。
4、除了创建渲染器实例外，还需要设置渲染应用程序的大小。可以设置成浏览器窗口的宽度和高度。但对于性能密集型场景，可以用setSize设置较小的值，如window.innerWidth/2和window.innerHeight/2，使应用程序呈现一半的大小。
如果想保持应用程序的大小，以较低的分辨率渲染它，可以通过以false第三个参数来调用setSize。例如，setSize(window.innerWidth/2,window.innerHeight/2,false)，将以一半分辨率呈现应用程序。
添加立方体
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
1、使用BoxGeometry创建一个多维数据集，包含数据集中的点(顶点)和面的对象。
2、接着是进行上色，three.js中有几种材料，可以使用MeshBasicMaterial方法。
3、创建一个网格对象Mesh，带入之前创建的几何体和材质，然后添加到场景中。默认情况下，调用scene.add()，添加的东西会被显示到坐标（0,0,0）。会导致相机和立方体在彼此内部。为了避免这种情况，只需将摄像头移出一点。
渲染场景
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
利用requestAnimationFrame在刷新屏幕时不断渲染场景。
动起来
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
在场景刷新时修改一些立方体属性，使其运动。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>first three.js</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src='http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js'></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
var animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
};
animate();
</script>
</body>
</html>
总结
根据Threejs官方示例简单了解一下threejs概念和基础布局场景，通过提供的api可以绘制出有趣的场景，实现复杂的动画。
网友评论