天天看点

three.js一览

前不久在微信公众号上看到一篇文章介绍three.js实现webVR的文章,觉得前端真的是无所不能呀,下面是three.js官网的一个事例,自己简单翻译一遍增加印象和理解。

Creating a scene

Before we start

官网有提供一个html模板,复制在自己的编辑器里,并下载three.js库。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title>My first Three.js app</title>
        <style>
            body { margin: ; }
            canvas { width: %; height: % }
        </style>
    </head>
    <body>
        <script src="js/three.js"></script>
        <script>
            // Our Javascript will go here.
        </script>
    </body>
</html>
           

Creating the scene

运行three.js程序,我们需要三样东西:

A scene, a camera, and a renderer

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( , window.innerWidth / window.innerHeight, ,  );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
           

我们现在创建了

the scene, our camera and the renderer

,在three.js中与camera有点不同的是,我们使用

PerspectiveCamera

1.第一个参数是视图领域;

2.第二个参数是样式比例,我们总是想要元素的width被height分割,或者,当你在宽屏放映老电影时,将会得到相同的结果,图像看起来被压扁了。

3.后面的参数是对象的near and far水平。意思就是,如果对象离camera距离过远大于这个值或者太近小于这个值都不会被渲染出来。现在,不必太担心这个值,你可能会使用其他值来得到一个更舒适的performance。

接下来便是渲染了。这里使用了WebGLRenderer,three.js借用了一些别的东西以帮助用户兼容那些不支持webgl的浏览器。

为了创建一个render实例,我们需要set size,我们使用了app的width,height设置size,这样更好的填充我们的app.如果想要更好表现出来,可以使用比例子中设置的width,height更小的值。

如果你要使用一个低分辨率的来渲染创建的对象,那么你需要调用

setSize

的第三个参数updateStyle,并设置为false,例如,

setSize(window.innerWidth/2, window.innerHeight/2, false)

最后,我们把render element添加至HTML document中。一个canvas元素便展现在设备中。

添加下面代码,便实现了一个3d视图。

var geometry = new THREE.BoxGeometry( , ,  );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = ;
           

创建一个3d元素,我们需要

BoxGeometry

,它是一个对象容纳我们创建的点和填充物。点击了解更多

在这个几何体中,我们需要添加一些material来粉饰它。three.js有许多material,但是却坚持使用MeshBasicMaterial。所有的material都含有我们需要调用的属性,为了方便,这里只使用了颜色属性。

第三件我们需要做的就是mesh。一个mesh对象一个几何体geometry,并调用metarial给这个几何体,这样我们就能渲染进scene中,并可以四处移动。

默认的,three.js使用scene.add(),由于,默认的会把对象添加至坐标(0,0,0)的位置,为了避免对象的覆盖,所以我们需要给对象来点偏移,就如例子中camera.position.z = 5;,移动camera一点点。

Rendering the scene

如果你只是copy了上边的代码放在html文件中,你将不会看到任何东西,因为我们还没有render任何东西,因此,我们需要调用一个render loop。

function render() {
    requestAnimationFrame( render );
    renderer.render( scene, camera );
}
render();
           

我们将会调用一个loop会使得每秒render to draw the scene 60次.如果你是第一次写game,你会问为什么我们不使用setInteral?我们可以使用,但是requestAnimationFrame有一系列的好处,可能最重要的原因是当我们离开当前页面,动画会自动暂停,所以很好的节约了宝贵的进程空间。

Animating the cube

下面我们添加一些代码让它转动起来

cube.rotation.x += ;
cube.rotation.y += ;
           

如此这个3d几何体的每个部分都会动起来,当然,元素的移动或者改变都会经过the render loop.

ok,到此就完成了一个小demo,下面是完整的代码:

<html>
    <head>
        <title>My first Three.js app</title>
        <style>
            body { margin: ; }
            canvas { width: %; height: % }
        </style>
    </head>
    <body>
        <script src="js/three.js"></script>
        <script>
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera( , window.innerWidth/window.innerHeight, ,  );

            var renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );

            var geometry = new THREE.BoxGeometry( , ,  );
            var material = new THREE.MeshBasicMaterial( { color:  } );
            var cube = new THREE.Mesh( geometry, material );
            scene.add( cube );

            camera.position.z = ;

            var render = function () {
                requestAnimationFrame( render );

                cube.rotation.x += ;
                cube.rotation.y += ;

                renderer.render(scene, camera);
            };

            render();
        </script>
    </body>
</html>
           

文章来源:http://threejs.org/docs/index.html#Reference/Extras.Geometries/BoxGeometry