前端开发者这个库提供了 < canvas > ， < svg > ，CSS3D以及 WebGL渲染器。 创建第一个场景本节的目标是简要介绍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> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <!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>第一步完成。下面步骤中所有的代码都将写在上述的空<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 3 4 5 6 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）。透视镜头的第一个属性是视角（field of view）。第二个属性是纵横比（aspect ratio）。在几乎所有的情况下纵横比都是用元素的宽除以高，不然呈现出来的图像就会像用宽屏电视播放老电影一样比例失调。接下来的两个属性是近平面（near）和远平面（far）。即距镜头距离远于远平面或近于近平面的物体将不会被渲染。现阶段不用太担心这个问题，但你可能会在自己的应用中使用不同的值以获取更好的效果。接下来讲讲渲染器。是渲染器使得3D场景能够被呈现出来。除了我们在本例中使用的WebGL渲染器外（WebGLRenderer），Three.js还提供了其他的渲染器。针对使用较低版本浏览器或没有WebGL支持的用户，这些渲染器常常被用作替代方案。除了需要创建一个渲染器的实例外，我们也需要设置渲染的尺寸。使用我们想要呈现的自身应用的区域的宽和高是一个不错的主意——在这种情况下，即浏览器窗口的宽和高。针对一些对性能要求较高的应用来说，你也可以将setSize的值调低，比如window.innerWidth/2和window.innerHeight/2，这样的设置将使用浏览器窗口一半的大小来渲染应用。如果你想要保持你的应用的尺寸但以更小的分辨率去渲染它，你可以将setSize的第三个属性updateStyle设置为false。比如setSize(window.innerWidth/2, window.innerHeight/2, false) 就会以一半的分辨率来渲染你的应用，前提是你的<canvas>标签的宽和高（width and height）已经设置为100%。最后同样重要的是，我们将renderer元素嵌入了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; 1 2 3 4 5 6 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。BoxGeometry是一个包括了一个立方体所有的点（vertices）和填充内容（faces）的对象。除了几何体之外，我们还需要材质去给它着色。Three.js提供了多种材质，本示例中只使用MeshBasicMaterial。所有的材质都使用一个包含各种属性的对象来进行设置。为了保持示例简单，我们只将颜色属性设置为0x00ff00，即绿色。这种颜色设置的方式和css以及Photoshop中的方式一样（hex colors）。接下来我们需要一个网格（Mesh）。网格是一个将几何体框架贴上材质后的对象，我们可以将其放入创建的场景中并随意移动它。如果我们执行scene.add()函数，新加入的对象会被默认放置在坐标(0,0,0)处。这将导致镜头和立方体在彼此的内部。为了避免这种情况，我们将镜头移出来了一些。场景渲染如果你将以上代码复制并粘贴进我们之前创建的html文档并执行，你将看不到任何东西。因为到目前为止我们并没有渲染任何东西。所以我们需要一个渲染循环（render loop）。function render() { requestAnimationFrame( render ); renderer.render( scene, camera ); } render(); 1 2 3 4 5 function render ( ) { requestAnimationFrame ( render ) ; renderer . render ( scene , camera ) ; } render ( ) ;这段代码会创建一个循环，这个循环会导致渲染器每秒钟重绘场景60次。如果你是一个页游开发的新人，你可能会说，“为什么不创建一个setInterval？”问题是——我们的确可以这么做，但使用requestAnimationFrame有许多的优势。最重要的一个可能是当用户切换浏览页的时候它可以暂停渲染循环，从而不浪费宝贵的处理能力以及耗损电池寿命。让立方体动起来如果你将以上所有的代码插入我们最初创建的文档中，你将会看到一个绿色的方盒。让我们把它变得更有趣——让它转起来。将以下代码加到你的render函数中的renderer.render命令之前：cube.rotation.x += 0.1; cube.rotation.y += 0.1; 1 2 cube . rotation . x += 0 . 1 ; cube . rotation . y += 0 . 1 ;这一段代码在每一帧都会被执行（每秒60帧）并使得立方体旋转起来。基本上来说，在应用中任何你想要移动或改变的东西都应该放在渲染循环中。在渲染循环中你当然可以执行其他各种函数，这样就可以避免渲染（render）函数中出现过多的代码。成果恭喜你！你现在完成了你的第一个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> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 < 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(); </s cript > < / body > < / html >
开发资源官方网站：http://threejs.org/
开源地址：https://github.com/mrdoob/three.js。
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册