您的位置：首页 > Web前端 > JavaScript

Three.js 中文手册-创建场景

2016-09-10 15:19 627 查看

Three.js 中文手册

介绍

创建一个场景

这个章节的目的是大概介绍下Three.js,我们从一个含有旋转的立方体场景开始，在页面的底部有示例代码可供参考。

安装准备

你需要在某一处运行Three.js，复制以下代码到一个HTML文件中然后用浏览器打开.

<!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>

创建场景

如果想通过Three.js显示3D动画，我们必须三样东西：一个场景、一个相机，和一个我们渲染相机和场景的渲染器。

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里面包含不同的相机，目前我们暂且先用一个透视相机（PerspectiveCamera）。相机的第一个属性是视野范围（度数），第二个参数是视野纵横比（aspect ratio）。我们经常使用页面元素的宽度和高度的比值作为纵横比，否则画面会感觉被压扁，后面的两个参数代表可以看到最近和最远的距离。

接下来就是神奇的渲染器。除了创建渲染器实例，我们还要设置渲染器的大小,如果你渲染的图像分辨率小于渲染器的大小，那么你可以使用 setSize(the third arugment). For example, setSize(window.innerWidth/2, window.innerHeight/2, false),这个方法的第三个参数代表是否（updateStyle）

那么说好的立方体呢，下面就添加它.

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 。所有材质都有相对于的属性，简单起见，我们仅仅应用了一个颜色为绿（0x00ff00）的属性。

第三件事是我们需要一个网格（Mesh），网格是一个可以容纳带有材质的几何体的对象，可以被插入到场景当中去，并且可以自由走动。

默认情况下，当我们使用scene.add()这个方法时，网格会被添加到坐标（0,0,0）上，这将导致相机和立方体是彼此内部。为了避免这一点，我们只是简单地将相机移动一点。

渲染场景

如果你复制上面的html代码到浏览器运行，你看不到任何东西，那是因为你还没有真正开始渲染，为此，我们需要运行一个渲染循环如下。

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

让立方体动起来

让我们做一点小小的改动可以让立方体动起来，代码如下：

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

这两行代码一秒钟会运行60次，那么就会出现立方体旋转的效果。

结论

恭喜，你已经完成了第一个Three.js应用程序。完整代码如下：

<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： WebGL html Three.js

相关文章推荐

新的分享

章节导航