noob_Noob的Three.js指南

最新推荐文章于 2020-11-29 01:55:54 发布

翻译最新推荐文章于 2020-11-29 01:55:54 发布 · 319 阅读

文章标签：

#python #java #javascript #编程语言 #android #ViewUI

本文是一份Three.js的初学者指南，介绍了如何使用Three.js库创建3D图形，包括设置场景、相机、渲染器，加载3D模型以及实现渲染循环等关键步骤。通过实例演示，读者可以了解到如何在网页上呈现并互动3D模型。

noob

Web的复杂性每天都在变化，其可能性也在Swift增长。特别是3D渲染。 WebGL（Web图形库）是用于渲染交互式3D和2D图形JavaScript API。 Ricardo Cabello的Three.js是一个基于WebGL构建的库，可确保创作的代码在各种浏览器之间兼容。

Three.js对WebGL来说就像jQuery对JavaScript一样，提供了许多人喜欢的声明性语法，并消除了浏览器中3D的烦恼。让我们对其进行回顾，大致了解语法，并了解如果您是3D游戏的新手，那么该如何入门。

我们正在努力

看看下面在CodePen上的演示；使用鼠标光标在周围拖动模型，使用鼠标滚轮放大和缩小。

1.设置场景

为了方便起见，我们将使用CodePen。首先从“ JS”标签链接到Three.js（ CDN 126Kb）。

我们从创建场景开始，就像您在Photoshop中从画布开始一样。在编写任何其他代码之前，先使用变量定义场景。因此，在您的JS窗格中添加：

var scene = new THREE.Scene();

相机！

随着帷幕的到来，为我们的表演做好准备，我们将需要一种方法来查看我们的出色之处-推出相机的时间。 Three.js捆绑了一系列相机，例如PerspectiveCamera ， StereoCamera ， OrthographicCamera和CubeCamera 。为了我们的目的，我们将使用PerspectiveCamera因为它旨在模仿人眼的观看方式。就像我们用变量定义场景一样，我们也可以定义摄像机：

var camera = new THREE.PerspectiveCamera();

我们PerspectiveCamera接受四个参数： fov ， aspect ， near及far 。

fov （视野）是您可以在相机中心周围看到的东西。考虑一下相机上的广角镜头与标准镜头。
aspect是fov的比率，换句话说就是屏幕的宽度与高度（例如4：5、16：9）。
最后两个， near和far是实体的平面。它们共同控制对象是否根据其与相机的距离进行渲染。 near是对象或对象的一部分在仍被渲染的情况下与相机最接近的far ；“ dest”则是离相机可能仍在渲染的对象最远。这些共同定义了相机的视锥。

这是PerspectiveCamera参数的示例：

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

除了了解可以传递的值之外，了解每个值并不重要。继续，我们需要设置相机的位置。

camera.position.set(x, y, z);

这条线是对象的本地位置。这将设置向量的x ， y和z坐标。没有它，相机将什么也看不见。

2. WebGLRenderer

我们食谱中的下一个重要组成部分是创建WebGLRenderer 。这是负责展示您的创作的魔力的作品。

var renderer = new THREE.WebGLRenderer();

WebGLRenderer也可以接受作为对象传入的属性和值。

var renderer = new THREE.WebGLRenderer({
  alpha: true // remove canvas' bg color
});

有很多property : value可以使用property : value对-如果您决定稍后再深入研究，这些property : value将在文档中列出（我强烈建议这样做）。

定义了渲染器后，我们可以设置方法以进一步自定义创建内容，例如setSize ；在几乎所有Three.js项目中都会使用的方法。

// Make scene renderer the size of the screen
renderer.setSize(window.innerWidth, window.innerHeight);

您可以使用更多方法，但出于我们的目的，我们将坚持使用setSize() 。

3. DOM

现在，我们已经定义了所需的大小，我们需要一种将其附加到DOM的方法。

document.body.appendChild( renderer.domElement );

此domElement属性是渲染器绘制其输出的位置，将采用canvas元素的形式。尽管我正在使用document.body您可以在任意位置添加或添加canvas元素。实际取决于您的具体项目需求，由您决定。

创建一个对象

下一步，我们需要创建一个对象，因为到目前为止，我们所做的只是声明一个场景，一个照相机和一个渲染器。出于演示目的，让我们从3D模型库中获取一部手机，以便我们为在线购买iPhone的人们构建产品预览器。

通常，您可以使用SketchUp甚至Blender之类的应用程序来绘制3D对象，但是3D绘图应用程序的学习曲线很高-一条曲线当然不在本文的讨论范围之内。

如果您喜欢PiñaCollada

要将3D对象插入场景，我们必须使用ColladaLoader 。应该提到的是，您决定使用的任何图形通常都应以1-2Mb以下为目标，并且必须是Collada文件才能与Three.js一起使用：这些文件以.dae扩展名结尾。如果打开Collada文件，您会看到它实际上是用XML编写的。

我们首先使用变量定义ColladaLoader然后调用该方法以及定义另一个变量以表示3D图形，以供以后参考。

var dae, // graphic
    loader = new THREE.ColladaLoader(); // loader

这是一个很好的开始，但是我们还需要做更多工作才能显示手机。让我们做一个可以做到这一点的函数：

function loadCollada( collada ) {
  dae = collada.scene;
  scene.add(dae);
}

下一步，我们将使用load方法，传递Collada文件的URL，然后按名称作为第二个参数调用函数：

loader.load( 'https://myurl.com/file/iphone6.dae', loadCollada);

如果您想进一步了解ColladaLoader ，可以在GitHub上挖掘源代码。

4.渲染循环

终于有了我们的装载机和图像，这是最后一步。我们需要创建一个所谓的“渲染循环”。这是因为我们实际上还没有渲染任何东西。

此“渲染循环”将导致渲染器每秒绘制场景60次。以下功能将使我们的创作变得生动起来（整个过程中最好的部分）。

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

renderPhone();

requestAnimationFrame具有许多优点。最重要的是，当用户导航到另一个浏览器选项卡时，它会暂停，最终不会浪费他们的处理能力和电池寿命。

最终产品

所有这些工作的结果是对3D iPhone的完美渲染，您可以旋转，旋转和放大和缩小：

最终的创建还有更多内容，因此，我鼓励您更深入地研究该示例JavaScript面板。

例如; 照明（ AmbientLight ， HemisphereLight ， PointLight ）， TrackballControls ， AxisHelper和一个窗口调整大小事件。其中一些提到的项目不包含TrackballControls文档，但是您可以在GitHub的核心JS文件中找到所有可用的属性。您还可以使用其他非常酷的控件，这些控件也在GitHub上列出。

灵感

有时，您需要一些启发来使'ol大脑Swift激发想法。以下是我最喜欢的使用Three.js进行演示的示例，这些示例将梦想变为现实。

进一步阅读

Rachel Smith 在CodePen上写了一篇有关WebGL的出色文章，我强烈建议您在有空的时候阅读它。本教程使用了简单的语言，它是对Three.js讨论场景，几何，照明，材质和动画的详尽解释，而我当然不会在这篇简短的文章中介绍。

您可能还会喜欢：

学分

没有Work Slack社区动画的慷慨帮助，这篇文章将是不可能的，因此，我要（无特殊顺序）感谢Stephen Shaw ， Jeff Ayer ， Louis Hoebregts ， Neil Pullman ， Eli Fitch和Chris Johnson 。

翻译自: https://webdesign.tutsplus.com/tutorials/a-noobs-guide-to-threejs--cms-28639

noob