three.js简介 —— 3D框架

字数 751阅读 931

threejs

随着HTML5的普及,网页的表现能力越来越强大,浏览器提供了WebGL接口,可以通过调用对应API进行3D图形的绘制,Three.js在这些基础接口之上又做了一层封装。

原文链接

特点

Three.js特点:

  • 掩盖了3D渲染细节
  • 面向对象
  • 功能丰富
  • 速度快
  • 支持交互
  • 内置文件支持
  • 拓展性强
  • 同时支持HTML5、2D、Canvas

动画示例

threejs动画

简介

本文通过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可以绘制出有趣的场景,实现复杂的动画。

推荐阅读更多精彩内容