基础入门：使用Three.js进行WebGL开发-js教程-PHP中文网

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="./style.css">
	<script src="./three.js"></script>
</head>
<body>
	<script src="./main.js"></script>
</body>
</html>

登录后复制

这就是您在此文件中所需要的全部内容。只是脚本和样式表的声明。所有的魔力都将发生在 main.js 中，但在我们实现这一点之前，我们还需要一个技巧来让应用程序看起来更好。打开 style.css 并插入以下代码：

canvas {
	position: fixed;
	top: 0;
	left: 0;
}

登录后复制

这会将画布定位在左上角，因为默认情况下 body 将具有 8px 的边距。现在我们可以继续处理 JavaScript 代码。

第 2 步：场景和渲染器

Three.js 使用显示列表的概念。这意味着所有对象都存储在列表中，然后绘制到屏幕上。

Three.js 使用显示列表的概念。这意味着所有对象都存储在列表中，然后绘制到屏幕上。在这里，这是一个 THREE.Scene 对象。您需要将想要在屏幕上绘制的任何对象添加到场景中。您可以拥有任意多个场景，但一个渲染器一次只能绘制一个场景（当然您可以切换显示的场景）。

渲染器只是将场景中的所有内容绘制到 WebGL 画布上。 Three.js 还支持在 SVG 或 2D Canvas 上绘图，但我们将重点关注 WebGL。

首先，让我们将窗口的宽度和高度存储在变量中，稍后我们将使用它：

var width = window.innerWidth;
var height = window.innerHeight;

登录后复制

现在定义渲染器和场景：

var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);

var scene = new THREE.Scene;

登录后复制

第一行定义 WebGL 渲染器。您可以将第一个参数中的渲染器选项作为地图传递。这里，我们将 antialias 设置为 true，因为我们希望对象的边缘平滑，而不是锯齿状。

第二行将渲染器大小设置为窗口的大小，在第三行中，我们将渲染器的 canvas 元素添加到文档中（您也可以使用库来执行此操作，例如 jQuery： $( 'body').append(renderer.domElement))。

最后一个定义场景，不需要参数。

第 3 步：立方体

现在让我们添加要绘制的内容。让它成为一个立方体，因为它是最简单的 3D 对象。在 Three.js 中，屏幕上绘制的对象称为网格。每个网格都必须有自己的几何形状和材料。几何是一组需要连接才能创建对象的点。材质只是覆盖对象的油漆（或绘画，但这不是本教程的主题）。那么，让我们创建我们的立方体。幸运的是，Three.js 中有一些用于创建基元（简单形状）的辅助函数：

var cubeGeometry = new THREE.CubeGeometry(100, 100, 100);
var cubeMaterial = new THREE.MeshLambertMaterial({ color: 0x1ec876 });
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

cube.rotation.y = Math.PI * 45 / 180;

scene.add(cube);

登录后复制

如您所见，首先我们创建几何图形。参数定义立方体的大小：宽度、高度和深度。

接下来，我们定义立方体的材质。 Three.js中有一些材质类型，但是这次我们将使用THREE.MeshLambertMaterial，因为我们稍后想要一些光照（该材质使用兰伯特算法进行光照计算）。您可以将第一个参数中的选项作为映射传递，与渲染器相同 - 这几乎是 Three.js 中更复杂对象的规则。在这里，我们只使用颜色，它以十六进制数字形式传递。

在第三行，我们使用之前创建的几何体和材质创建一个网格。接下来，我们将立方体在 Y 轴上旋转 45 度，使其看起来更好。我们必须将度数更改为弧度，这是通过您可能记得的高中物理课上的方程式来处理的：Math.PI * 45 / 180。最后，立方体被添加到场景中。

现在您可以在浏览器中打开 index.html 来查看结果，但您将看不到任何内容，因为场景尚未渲染。

第 4 步：相机！

要渲染某些内容，首先我们需要将相机添加到场景中，以便渲染器知道应该从哪个角度渲染内容。 Three.js 中有几种类型的相机，但您可能只会使用 THREE.PerspectiveCamera。这种类型的相机呈现出我们所看到的世界的场景。让我们创建一个：

var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10000);

登录后复制

“要渲染某些内容，首先我们需要将相机添加到场景中，以便渲染器知道应该从哪个角度渲染内容。”

创建相机比我们迄今为止所做的其他事情要复杂一些。第一个参数定义 FOV（视野），即从相机所在位置可以看到的角度。 45 度的 FOV 看起来很自然。接下来，我们定义相机的比率。这始终是渲染器的宽度除以高度，除非您想实现一些特殊效果。最后两个数字定义了对象与要绘制的相机的距离。

现在我们必须稍微向后和向上移动相机，因为在 Three.js 中创建的所有对象都将其位置设置在场景中间（x: 0, y: 0, z: 0）默认：

camera.position.y = 160;
camera.position.z = 400;

登录后复制

z 坐标在观看者的方向上为正，因此具有较高 z 位置的对象会显得离您更近（在这种情况下，由于我们移动了相机，所有对象都会显得更远）来自您）。

现在，让我们将相机添加到场景并渲染它：

scene.add(camera);

renderer.render(scene, camera);

登录后复制

添加相机就像添加立方体一样。下一行使用该相机渲染场景。现在您可以打开浏览器，您应该看到以下内容：

基础入门：使用Three.js进行WebGL开发

您应该只能看到立方体的顶部。这是因为我们将相机向上移动，但它仍然看起来在它的正前方。这个问题可以通过让相机知道它应该看什么位置来解决。在设置相机位置的行之后添加此行：

camera.lookAt(cube.position);

登录后复制

传入的唯一参数是相机将看到的位置。现在，场景看起来更好了，但立方体仍然是黑色，无论您在创建立方体时设置了什么颜色：

基础入门：使用Three.js进行WebGL开发

第 5 步：灯！

立方体是黑色的，因为场景中没有灯光，所以它就像一个完全黑的房间。您会看到白色背景，因为除了立方体之外没有任何东西可以绘制。为了避免这种情况，我们将使用一种称为天空盒的技术。基本上，我们将添加一个大立方体来显示场景的背景（如果是开放空间，通常是一些远处的地形）。那么，让我们创建这个盒子。此代码应位于 renderer.render 调用之前：

var skyboxGeometry = new THREE.CubeGeometry(10000, 10000, 10000);
var skyboxMaterial = new THREE.MeshBasicMaterial({ color: 0x000000, side: THREE.BackSide });
var skybox = new THREE.Mesh(skyboxGeometry, skyboxMaterial);

scene.add(skybox);

登录后复制

此代码与创建多维数据集的代码类似。但这一次的几何形状要大得多。我们还使用了 THREE.MeshBasicMaterial 因为我们不需要照亮天空盒。另外，请注意传递给材料的附加参数：side: THREE.BackSide。由于立方体将从内部显示，因此我们必须更改绘制的侧面（通常，Three.js 只绘制外墙）。

现在渲染的场景是全黑的。为了解决这个问题，我们必须向场景添加灯光。我们将使用 THREE.PointLight，它像灯泡一样发出光。在天空盒后添加这些行：

var pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(0, 300, 200);

scene.add(pointLight);

登录后复制

如您所见，我们创建了白色的点光源，然后将其位置设置为向上和向后一点，以照亮立方体的正面和顶部。最后，灯光像任何其他对象一样添加到场景中。打开浏览器，您应该会看到一个彩色阴影立方体：

基础入门：使用Three.js进行WebGL开发

但是立方体仍然很无聊。让我们为其添加一些动作。

第 6 步：行动！

现在我们将为场景添加一些运动。让我们让立方体绕 Y 轴旋转。但首先，我们必须改变渲染场景的方式。一次 renderer.render 调用，渲染场景的当前状态一次。因此，即使我们以某种方式为立方体设置动画，我们也不会看到它移动。要改变这一点，我们必须将渲染循环添加到我们的应用程序中。这可以使用专门为此目的创建的 renderAnimationFrame 函数来实现。大多数主要浏览器都支持它，对于那些不支持它的浏览器，Three.js 附带了自己的 polyfill。那么，让我们改变一下：

renderer.render(scene, camera);

登录后复制

对此：

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

render();

登录后复制

实际上，那里没有循环，因为它会冻结浏览器。 requestAnimationFrame 函数的行为有点像 setTimeout，但它会在浏览器准备就绪时调用该函数。因此，显示的场景没有任何变化，立方体仍然没有移动。让我们解决这个问题。 Three.js自带了THREE.Clock，可以用来实现对象的平滑动画。首先在render函数定义之前进行初始化：

var clock = new THREE.Clock;

登录后复制

现在，每次调用 clock.getDelta 时，它都会返回自上次调用以来的时间（以毫秒为单位）。这可以用来旋转立方体，如下所示：

cube.rotation.y -= clock.getDelta();

登录后复制

在 render 函数中的 renderer.render 和 requestAnimationFrame 调用之间添加此行。它只是减去立方体在 Y 轴上旋转所花费的时间（记住它以弧度为单位）来顺时针旋转立方体。现在打开浏览器，您应该看到立方体顺时针平稳旋转。

结论

在本系列的这一部分中，您学习了如何准备场景、添加对象和灯光以及如何为事物设置动画。您可以尝试该应用程序，添加更多或不同的对象、灯光。由你决定。下次我将向您展示如何使用纹理以及如何使用粒子创建一些漂亮的效果。如果遇到任何问题，请不要忘记查看文档。

以上是基础入门：使用Three.js进行WebGL开发的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

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

显示更多

热门话题

gmail邮箱登陆入口在哪里

7569

CakePHP 教程

1386

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

107

显示更多

Related knowledge

四款值得推荐的AI辅助编程工具 Apr 22, 2024 pm 05:34 PM

这个AI辅助编程工具在这个AI迅速发展的阶段，挖掘出了一大批好用的AI辅助编程工具。AI辅助编程工具能够提高开发效率、改善代码质量、降低bug率，是现代软件开发过程中的重要助手。今天大姚给大家分享4款AI辅助编程工具（并且都支持C#语言），希望对大家有所帮助。https://github.com/YSGStudyHards/DotNetGuide1.GitHubCopilotGitHubCopilot是一款AI编码助手，可帮助你更快、更省力地编写代码，从而将更多精力集中在问题解决和协作上。Git

AI程序员哪家强？探索Devin、通义灵码和SWE-agent的潜力 Apr 07, 2024 am 09:10 AM

2022年3月3日，距世界首个AI程序员Devin诞生不足一个月，普林斯顿大学的NLP团队开发了一个开源AI程序员SWE-agent。它利用GPT-4模型在GitHub存储库中自动解决问题。SWE-agent在SWE-bench测试集上的表现与Devin相似，平均耗时93秒，解决了12.29%的问题。SWE-agent通过与专用终端交互，可以打开、搜索文件内容，使用自动语法检查、编辑特定行，以及编写和执行测试。（注：以上内容为原内容微调，但保留了原文中的关键信息，未超过指定字数限制。）SWE-A

五大热门Go语言库汇总：开发必备利器 Feb 22, 2024 pm 02:33 PM

五大热门Go语言库汇总：开发必备利器，需要具体代码示例Go语言自从诞生以来，受到了广泛的关注和应用。作为一门新兴的高效、简洁的编程语言，Go的快速发展离不开丰富的开源库的支持。本文将介绍五大热门的Go语言库，这些库在Go开发中扮演了至关重要的角色，为开发者提供了强大的功能和便捷的开发体验。同时，为了更好地理解这些库的用途和功能，我们会结合具体的代码示例进行讲

学习如何利用Go语言开发移动应用程序 Mar 28, 2024 pm 10:00 PM

Go语言开发移动应用程序教程随着移动应用市场的不断蓬勃发展，越来越多的开发者开始探索如何利用Go语言开发移动应用程序。作为一种简洁高效的编程语言，Go语言在移动应用开发中也展现出了强大的潜力。本文将详细介绍如何利用Go语言开发移动应用程序，并附上具体的代码示例，帮助读者快速入门并开始开发自己的移动应用。一、准备工作在开始之前，我们需要准备好开发环境和工具。首

Android开发最适合的Linux发行版是哪个？ Mar 14, 2024 pm 12:30 PM

Android开发是一项繁忙而又令人兴奋的工作，而选择一个适合的Linux发行版来进行开发则显得尤为重要。在众多的Linux发行版中，究竟哪一个最适合Android开发呢？本文将从几个方面来探讨这一问题，并给出具体的代码示例。首先，我们来看一下目前流行的几个Linux发行版：Ubuntu、Fedora、Debian、CentOS等，它们都有各自的优点和特点。

Go语言前端技术探秘：前端开发新视野 Mar 28, 2024 pm 01:06 PM

Go语言作为一种快速、高效的编程语言，在后端开发领域广受欢迎。然而，很少有人将Go语言与前端开发联系起来。事实上，使用Go语言进行前端开发不仅可以提高效率，还能为开发者带来全新的视野。本文将探讨使用Go语言进行前端开发的可能性，并提供具体的代码示例，帮助读者更好地了解这一领域。在传统的前端开发中，通常会使用JavaScript、HTML和CSS来构建用户界面

了解VSCode：这款工具到底是用来干什么的？ Mar 25, 2024 pm 03:06 PM

《了解VSCode：这款工具到底是用来干什么的？》作为一个程序员，无论是初学者还是资深开发者，都离不开代码编辑工具的使用。在众多编辑工具中，VisualStudioCode（简称VSCode）作为一款开源、轻量级、强大的代码编辑器备受开发者欢迎。那么，VSCode到底是用来干什么的？本文将深入探讨VSCode的功能和用途，并提供具体的代码示例，以帮助读者

PHP在Web开发中是属于前端还是后端？ Mar 24, 2024 pm 02:18 PM

PHP在Web开发中是属于后端。PHP是一种服务器端脚本语言，主要用于处理服务器端的逻辑，生成动态网页内容。与前端技术相比，PHP更多地用于与数据库交互、处理用户请求以及生成页面内容等后端操作。接下来通过具体的代码示例来说明PHP在后端开发中的应用。首先，我们来看一个简单的PHP代码示例，用于连接数据库并查询数据：

See all articles

基础入门：使用Three.js进行WebGL开发

第 1 步： 准备工作

第 2 步：场景和渲染器

第 3 步： 立方体

第 4 步： 相机！

第 5 步： 灯！

第 6 步： 行动！

结论

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题

第 1 步：准备工作

第 3 步：立方体

第 4 步：相机！

第 5 步：灯！

第 6 步：行动！