three.js一览

来源：互联网发布：,数据分析师的职业规划编辑：程序博客网时间：2024/06/13 16:03

前不久在微信公众号上看到一篇文章介绍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: 0; }            canvas { width: 100%; height: 100% }        </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( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );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( 1, 1, 1 );var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );var cube = new THREE.Mesh( geometry, material );scene.add( cube );camera.position.z = 5;

创建一个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 += 0.1;cube.rotation.y += 0.1;

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

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

<html>    <head>        <title>My first Three.js app</title>        <style>            body { margin: 0; }            canvas { width: 100%; height: 100% }        </style>    </head>    <body>        <script src="js/three.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 render = function () {                requestAnimationFrame( render );                cube.rotation.x += 0.1;                cube.rotation.y += 0.1;                renderer.render(scene, camera);            };            render();        </script>    </body></html>

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

0 0