three.js创建场景实例详解
本文主要给大家介绍了three.js中文文档学习之创建场景的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用three.js具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
什么是Three.js？
如果你正在读这篇文章，你可能对Three.js有一定的了解，那我们来简单地介绍下Three.js是什么.
Three.js是一个库，使得WebGL的3D效果在浏览器中运用很容易。而在原始的WebGL中一个简单的立方体会变成数百Javascript和着色器代码的行，而一个Three.js只需要一点点代码.
本节目标是为 three.js 做简介。我们从使用旋转立方体来搭建场景开始。如果遇到困难需要帮助，页面底部有可参考的源码。
一个场景至少需要的三种类型组件
相机/决定哪些东西将在屏幕上渲染
光源/他们会对材质如何显示，以及生成阴影时材质如何使用产生影响
物体/他们是在相机透视图里主要的渲染队形：方块、球体等
开始前
在计算机中保存如下 HTML 代码，并在 js 目录下包含 three.js，然后在浏览器中打开
<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 );
让我们花点时间来解释发生了什么。我们现在创建了场景，摄像机和渲染器。
在 three.js 中有几种摄像机。我们暂时用的是 PerspectiveCamera （透视摄像机）
它的第一个属性是视图角（FOV)，它 是能看见的视图范围，其值表示角度大小。
第二个属性是宽高比。大多数情况你想要使用被高除过之后的宽度，不然会发生像在宽屏电视上放旧电影的情况 —— 图像看起来被压扁了。
后面两个属性是近景面和远景面。只会渲染这两个面之间的区域。目前你不必关心这些，使用这些参数能提高性能。
接下来谈谈渲染器。这便是神奇之处。除了我们这里用的 WebGLRenderer 外， three.js 还提供一些渲染器用在不支持 WebGL 的老旧浏览器上。
除了创建渲染器实例，我们也需要设置应用渲染的尺寸。推荐使用填充整个应用的宽高 —— 本例中是浏览器窗口的宽高。对于性能优先的应用，你能使用 setSize 来设置更小的值，比如 window.innerHeight/2， window.innerWidth/2，会渲染一半的尺寸。
如果你想低分辨率地渲染整个尺寸，你可以设置 setSize 的第三个参数 — uodateStyle 为 false ，如果 canvas 元素宽高都为 100%，则会以 1/2 分辨率渲染应用。
再尔，我们需要在 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。所有材质接受并应用一个包含所有属性的对象。为简单起见，我们仅仅提供一个颜色属性： 绿色 —— 0x00ff00 。和 CSS 和 PS 里的一样采用十六进制的颜色。
我们需要的第三个要素是 Mesh。 mesh 是一个将材质应用到几何体上的对象，然后我们能将其放入场景中，并自由移动。
当我们调用 scene.add() ，我们添加的会默认显示在坐标（0，0,0,）处。这会导致摄像机和立方体内部重叠。为了避免这点，我们简单地把摄像机往外移一点。
渲染场景
如果你在 HTML 文件中复制了如上代码，屏幕不会显示东西。因为我们还没渲染场景。所以我们需要调用渲染器或者动画循环。
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();这会创建一个让渲染器每秒绘制一帧的循环。如果你对网页游戏编程不了解，你可能会说“为什么不 写setInterval 函数呢？”事实上，我们可以，但是 requestAnimationFrame 好处更多。最重要的好处是当浏览器切换到另一个标签页时，requestAnimationFrame 会暂停渲染，因此不会浪费宝贵的处理能力和电池寿命。
让立方体动起来
如果你插入了我们刚刚创建的代码，你应该会看见一个绿色的立方体。让它旋转起来不至于单调。
在animate 函数中的 renderer.render 上添加如下代码：
cube.rotation.x += 0.01; cube.rotation.y += 0.01;
它会按帧运行（每秒60帧），并赋予立方体优雅的动画。基本上，应用运行时，你想移动或改变任何元素，必须通过动画循环。你当然在此处能调用其他函数，以免animate函数上百行代码结尾。
结果
恭喜！你现在创建好了第一个 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 animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
};
animate();
</script>
</body>
</html>相关推荐：
以上是three.js创建场景实例详解的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
Win11管理员权限获取详解
Mar 08, 2024 pm 03:06 PM
Windows操作系统是全球最流行的操作系统之一，其新版本Win11备受瞩目。在Win11系统中，管理员权限的获取是一个重要的操作，管理员权限可以让用户对系统进行更多的操作和设置。本文将详细介绍在Win11系统中如何获取管理员权限，以及如何有效地管理权限。在Win11系统中，管理员权限分为本地管理员和域管理员两种。本地管理员是指具有对本地计算机的完全管理权限
Oracle SQL中的除法运算详解
Mar 10, 2024 am 09:51 AM
OracleSQL中的除法运算详解在OracleSQL中，除法运算是一种常见且重要的数学运算操作，用于计算两个数相除的结果。除法在数据库查询中经常用到，因此了解OracleSQL中的除法运算及其用法是数据库开发人员必备的技能之一。本文将详细讨论OracleSQL中除法运算的相关知识，并提供具体的代码示例供读者参考。一、OracleSQL中的除法运算
PHP模运算符的作用及用法详解
Mar 19, 2024 pm 04:33 PM
PHP中的模运算符（%）是用来获取两个数值相除的余数的。在本文中，我们将详细讨论模运算符的作用及用法，并提供具体的代码示例来帮助读者更好地理解。1.模运算符的作用在数学中，当我们将一个整数除以另一个整数时，会得到一个商和一个余数。例如，当我们将10除以3时，商为3，余数为1。模运算符就是用来获取这个余数的。2.模运算符的用法在PHP中，使用%符号来表示模
linux系统调用system()函数详解
Feb 22, 2024 pm 08:21 PM
Linux系统调用system()函数详解系统调用是Linux操作系统中非常重要的一部分，它提供了一种与系统内核进行交互的方式。其中，system()函数是一个常用的系统调用函数之一。本文将详细介绍system()函数的使用方法，并提供相应的代码示例。系统调用的基本概念系统调用是用户程序与操作系统内核交互的一种方式。用户程序通过调用系统调用函数来请求操作系统
Linux的curl命令详解
Feb 21, 2024 pm 10:33 PM
Linux的curl命令详解摘要：curl是一种强大的命令行工具，用于与服务器进行数据通信。本文将介绍curl命令的基本用法，并提供实际的代码示例，帮助读者更好地理解和应用该命令。一、curl是什么？curl是一个命令行工具，用于发送和接收各种网络请求。它支持多种协议，如HTTP、FTP、TELNET等，并提供了丰富的功能，如文件上传、文件下载、数据传输、代
简易JavaScript教程：获取HTTP状态码的方法
Jan 05, 2024 pm 06:08 PM
JavaScript教程：如何获取HTTP状态码，需要具体代码示例前言：在Web开发中，经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时，我们经常需要获取返回的HTTP状态码来判断操作是否成功，根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码，并提供一些实用的代码示例。使用XMLHttpRequest
详细解析C语言学习路线
Feb 18, 2024 am 10:38 AM
C语言作为一门广泛应用在软件开发领域的编程语言，是很多程序员初学者的首选。学习C语言不仅可以帮助我们建立编程的基础知识，还可以提升我们解决问题和思考的能力。本文将详细介绍一条C语言学习的路线图，帮助初学者更好地规划自己的学习进程。1.学习基本语法在开始学习C语言之前，我们首先需要了解C语言的基本语法规则。这包括变量和数据类型、运算符、控制语句（如if语句、
深入了解Promise.resolve()
Feb 18, 2024 pm 07:13 PM
Promise.resolve()详解，需要具体代码示例Promise是JavaScript中一种用于处理异步操作的机制。在实际开发中，经常需要处理一些需要按顺序执行的异步任务，而Promise.resolve()方法就是用来返回一个已经Fulfilled状态的Promise对象。Promise.resolve()是Promise类的一个静态方法，它接受一个
