【three.js】创建一个场景

来源：互联网发布：淘宝百度云盘会员出租编辑：程序博客网时间：2024/05/17 21:33

本节的目的是介绍three.js。我们将从创建一个场景以及场景内的一个旋转的立方体开始。在本文最后将会给出相应的例子。

什么是Three.js

如果你阅读本文，将会大概了解什么是Three.js，它将为你做什么。

Three.js是一个简单的WebGL的类库（主要用于在浏览器展现3D图像）。若在一个基础的WebGL之上构造一个立方体，程序员将会写数百行的js代码和着色代码（CSS？），而在Three.js下，则仅仅需要一个函数。

开始之前

在你使用Three.js之前，你需要一个地方去显示它。将下面写出的HTML代码复制到你本机中的文件内，并将three.min.js拷贝到你电脑里的相应位置，并用浏览器打开该文件

<html><head><title>My first three.js app</title><style>body{ margin:0}canvas { width:100%; height:100% }</style></head><body><script src="three.min.js"></script><script>//do someting.</script></body><code class=" prettyprint"><span class="tag"></span></code>

接下来，所有的代码将会写在script标签中。

创建一个场景

若要用Three.js真正能够显示模型，需要三个对象：场景（scene）、相机（camera）、渲染器（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);

我们定义了一个场景，一个相机和一个渲染器。

在Three.js中，会有几种不同的相机，我们在之后的章节对其进行讨论。目前，我们先使用PrespectiveCamera。

第一个属性是视野（field of view）

第二个属性是纵横比（aspect ratio）。通常来说，纵横比是宽度除以高度，也可以通过定义来实现宽屏等其他效果。

第三个和第四个属性分别是近距离（near）和远距离（far）剪切面。这两个参数描述的是当物体距离相机超过规定的远距离或过分接近相机超过规定的近距离时，物体将不会被渲染。目前来说先不用担心这一方面的问题，等之后需要优化的时候再说。

THREE.PerspectiveCamera(field_of_view, aspect_ratio,near,far);

下一个对象是渲染器。我们这里使用WebGLRenderer()。当用户的浏览器过老，不支持WebGL时，它会给出相应的错误原因提示。

在初始化渲染器时，我们需要设置渲染长宽，

最后，我们将渲染器元素添加到我们的HTML文本中，利用canvas标签来显示由渲染器渲染后的场景。

现在，我们添加一个方块：

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;

创建方块，首先需要BoxGeometry。我们将在将来对它进行介绍。

其次，我们将一个颜色材质赋予已经构造好的几何体。Three.js提供了一系列的材质。目前我们使用MeshBasicMaterial

第三，我们需要一个Mesh（找不到合适的翻译，大概意思是连接关系之类），mesh是一种承载几何物体并将材质赋予该物体的对象，我们可以将它放置在场景中，并能够自由移动。

当在默认情况下，我们调用scene.add()方法，物体将会放置到场景的（0,0,0）位置。这样会导致物体与摄像机重叠，为了避免这样的事情，我们将相机移动几个单元。

渲染场景

如果你将上述代码拷贝到HTML中去，并不会显示什么东西，原因就在于你还没有渲染。所以，我们需要调用渲染循环（render loop）

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

这样就会建立一个每秒60次的循环渲染（60fps）。采用requestAnimationFrame的方式较之使用setInterval的方式更具优点。当用户选择其他页面标签时，渲染将会暂停。

让方块动起来

在renderer.render上添加代码：

cube.relation.x += 0.1;cube.relation.y += 0.1;

该程序段将会在每一帧执行一次，作用是让方块能够旋转起来。

最后

<html><head><title>My first Three.js app</title><style>body { margin : 0; }canvas { width : 100%; height : 100% }</style></head><body><script src="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 meterial = new THREE.MeshBasicMeterial( { color : 0x00FF00 } );var cube = new  THREE.Mesh(geometry, meterial);scen.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>

0 0