three.js简介 —— 3D框架

随着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可以绘制出有趣的场景，实现复杂的动画。

three.js简介 —— 3D框架

特点

动画示例

简介

引入

创建场景

添加立方体

渲染场景

动起来

代码

总结

bestvist

引用和评论

前端知识汇总

如何实现一个充满科技感的官网（一）