前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >使用Three.js构建基础3D场景 | 《Three.js零基础直通03》

使用Three.js构建基础3D场景 | 《Three.js零基础直通03》

作者头像
大帅老猿
发布2022-06-06 11:00:15
5.6K0
发布2022-06-06 11:00:15
举报
文章被收录于专栏:大帅老猿

前言

这是我们开始使用Three.js的第一个小节,我们回顾一下用Web开发最经典的方式来使用它,一个<script>标签。

准备好基础文件

首先我们创建一个最为基本的 index.html 文件:

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03 - 基础场景</title>
</head>
<body>
    <script src="./script.js"></script>
</body>
</html>

然后再创建一个 script.js 文件,里面的代码很简单,就一行

代码语言:javascript
复制
console.log('Hello Three.js')

接着我们双击 index.html 文件,不出意外的话,会使用你电脑中默认的浏览器打开。虽然Three.js可以在大部分浏览器中正常工作,但我仍然强烈建议大家使用Chrome,因为它更利于我们开发和调试。

现在我们按下键盘上的F12,将打开一个开发者调试工具

接着切换到Console(控制台)标签,在开发的过程中,我们应该时刻关注控制台中输出的错误、警告、日志。

如何加载Three.js

现在我们需要在网页里加载 Three.js 库。

打开 Three.js 的官网 https://threejs.org/ ,然后单击Download按钮来下载最新的 Three.js 库,将下载后的zip文件解压缩。文件很多,因为这是整个仓库,里面有离线的文档和全部的示例源码。在本小节中,我们只需要一个文件。

解压缩后的文件夹大概长这样:

/assets/lessons/03/image-1.png

打开 build/ 文件夹并且将其中的 three.min.js 文件复制粘贴到你的项目中

复制粘贴完后,你的项目文件夹应该有三个文件了:

/assets/lessons/03/image-2.png

再加入一个<script>标签来加载Three.js 库:

代码语言:javascript
复制
<script src="./three.min.js"></script>
<script src="./script.js"></script>

你需要确保在你的代码之前已经加载好了 three.min.js ,否则,是无法正常使用的。

如何使用Three.js

在我们的script.js文件中,我们现在可以访问到一个名为THREE的变量。注意,THREE大写。

如果你使用console.log() 去打印这个变量,你将看到很多信息

代码语言:javascript
复制
console.log(THREE)

THREE这个变量包含了 Three.js 项目中可能用到大多数类、方法和属性。

要使用某一个类,我们需要先实例化它。比如要创建场景,则编写代码const scene = new THREE.Scene ()。如果要创建一个3D球体,则编写代码const sphereGeometry = new THREE.SphereGeometry(1.5,32,32)。这些类和初始化参数的意义我们一会儿再来详细了解。

创建我们第一个3D场景

现在准备好用 Three.js 在网页里来创建我们的第一个3D场景。

创建一个3D场景,我们至少需要4个对象:

  1. Scene(场景)
  2. 一些3D 对象
  3. Camera(相机)
  4. Renderer(渲染器)
场景Scene

场景就像一个容器,我们在这个容器中放置三维世界中的元素,比如模型,灯光,粒子等等,然后在某个时机, Three.js会结合Camera(相机)等各种因素将场景通过Renderer渲染器绘制到画布上。

要创建一个场景,使用Scene这个类:

代码语言:javascript
复制
// Scene
const scene = new THREE.Scene()
3D对象

3D对象可以是很多东西,比如一些最基本的几何体,导入的3D模型,粒子,灯光等等都是3D对象。

我们从创建一个最简单的红色立方体开始吧。

立方体,其实是一种名为Mesh的对象。而Mesh是由几何体和材质组合的。

Three.js中内置了许多基本的几何体类型和许多基础材质,但第一节课我们还是先简单一点,就创建一个立方体(BoxGeometry)和基础材质。

要创建立方体,需要使用BoxGeometry类,3个参数分别对应于盒子的大小。这是一种向量尺寸,请不要理解为像素

代码语言:javascript
复制
// Object
const geometry = new THREE.BoxGeometry(1, 1, 1)

要创建基础材质,要用到MeshBasicMaterial类,并且在实例化的时候,我们通过{}来包含初始化的一些参数,比如颜色属性。当然我们也可以在初始化之后再设置颜色属性。

在Three.js中有很多方法可以指定颜色。比如红色,既可以使用十六进制数字0xff0000来表达,也可以写为字符串 “#ff0000” ,还可以使用比如 “red” 这样的颜色名称,这里我们使用第一种,其他的就不过多叙述了。

代码语言:javascript
复制
// Object
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 })

最后使用Mesh类并将几何体geometry和材质material作为参数传递。

代码语言:javascript
复制
// Object
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 })
const mesh = new THREE.Mesh(geometry, material)

现在,我们使用场景的add方法把这个Mesh对象添加到场景中:

代码语言:javascript
复制
scene.add(mesh)

请牢记,如果我们只是创建了3D对象,但没有把它添加到场景中的话,是看不见的。

相机Camera

相机虽然也是一种3D对象,并且需要添加到场景中,但它本身是不可见的。当我们对3D场景进行渲染时,渲染器将从相机所在的角度来看。

在一个场景中我们也可以布置多个摄像头,就像拍电影时的多个机位,我们可以在这些相机之间切换。不过,通常我们只使用一个相机。

在Three.js中有两种类型的相机类型,一种是透视相机,一种是等距相机。一般情况下,我们也只需要用到透视相机 (近大远小)。

要创建相机,我们需要用到PerspectiveCamera这个类。在实例化这个对象时,我们需要提供两个基本参数。

  • FOV(视场) 视场就是相机的可视角度,你一定听过广角镜头对不对。当我们使用广角镜头去拍摄时,画面里能装的东西虽然非常多,但是边缘会有很大的失真变形。fov(视场)以度来表示,这里我们将使用75度角。
  • 纵横比 大部分时候,长宽比这个值设置为画布的宽度除以画布的高度即可。

千万不要忘记把相机Camera也添加到场景中哦

代码语言:javascript
复制
// Sizes
const sizes = {
    width: 800,
    height: 600
}

// Camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
scene.add(camera)
渲染器Renderer

渲染器的工作就是把Camera在场景中看到的内容渲染绘制到画布上。

想让渲染器渲染我们的场景之前,我们要先在html文件中创建一个canvas画布。

在html的body中添加 <canvas> 标签

代码语言:javascript
复制
<canvas class="webgl"></canvas>

要创建渲染器,我们要用到WebGLRenderer类,这个类在实例化的时候需要我们提供一个画布对象的参数,使用JS方法的document.querySelector(...)即可获取到我们刚才在html中创建的canvas对象。

最好将画布分配给一个变量,因为我们可能还会有其它用途。

接着我们还需要使用setSize(...) 方法来更新渲染器的绘制尺寸。

代码语言:javascript
复制
// Canvas
const canvas = document.querySelector('canvas.webgl')

// ...

// Renderer
const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)

当这些代码都写完之后,我们刷新一下当前网页,我们将看到一个800像素宽,600像素高的黑色画布。

/assets/lessons/03/step-01.png

第一次渲染

准备进行我们的第一次渲染,调用渲染器的render(...) 方法,并将场景和相机作为参数:

代码语言:javascript
复制
renderer.render(scene, camera)

似乎有点问题,什么都没有呢。这个问题恰好帮我们更好的理解三维世界的运行机制。因为我们没有指定3D立方体的位置,也没有设置相机的位置,它们默认的位置都在0,0,0,这是场景的中心,也就是说,相机此时正在立方体的内部。一般情况下,我们是无法从内部看到3D对象的。一个3D对象有很多属性,比如位置position,旋转rotation和缩放scale。位置position是一个具有三个属性的对象,这三个属性分别为 x轴,y轴和z轴。那么我们通过设置它们,就可以移动相机。现在我们把相机移动到z轴为3的位置。注意,Three.js采用右手笛卡尔坐标系。

image.png

代码语言:javascript
复制
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
camera.position.z = 3
scene.add(camera)

/assets/lessons/03/step-02.png

恭喜,我们的3D场景已经渲染到画布上了,它看起来并不立体,像一个正方形,这是因为相机与立方体在一个水平线上,所以我们只能看到立方体的一侧。

不用担心,在接下来的课程中,我们将学习更多关于位置、旋转和缩放属性的用法,以及如何为它们设置动画。那个时候,它们会看上去非常“立方体”。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-05-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 大帅老猿 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 准备好基础文件
  • 如何加载Three.js
  • 如何使用Three.js
  • 创建我们第一个3D场景
    • 场景Scene
      • 3D对象
        • 相机Camera
          • 渲染器Renderer
          • 第一次渲染
          相关产品与服务
          图像处理
          图像处理基于腾讯云深度学习等人工智能技术,提供综合性的图像优化处理服务,包括图像质量评估、图像清晰度增强、图像智能裁剪等。
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档