three.js part1-CSDN博客

本文链接：https://blog.csdn.net/qq_14993375/article/details/125199083

本文是一篇关于Three.js的初学者教程，详细介绍了如何使用Three.js创建基本3D场景，包括设置场景、添加对象、相机、渲染器以及对象变换。还涉及到了使用WebGL库、Webpack构建项目、对象动画、相机类型和控制，以及引入了GSAP库进行高级动画处理。此外，讲解了 OrbitControls 的使用，为3D场景添加交互性。

摘要由CSDN通过智能技术生成

threejs journey 学习笔记

WebGL、Three.js的关系

WebGL是一项可以在浏览器中流畅展示3D模型和场景的一种技术。它使用JavaScript作为编程语言，调用浏览器支持的3D绘制函数，来实现3D模型和场景的展现
Three.js是一个封装好的webgl库，它使WebGL的学习更加简单

一个Three.js程序至少要包括渲染器（Renderer）、场景（Scene）、照相机（Camera），以及你在场景中创建的物体

基本场景

加载加载 Three.js 库：可以到https://threejs.org/并单击下载zip文件并解压缩。
转到 build/ 文件夹并将文件复制 three.min.js 到您的项目中
在这里插入图片描述

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03 - Basic Scene</title>
    <script src="./three.min.js"></script>
	<script src="./script.js"></script>
</head>
<body>
    <script src="./script.js"></script>
</body>
</html>

第一个场景

需要 4 个元素才能开始：

将包含对象的场景
一些对象
相机
渲染器

场景：场景就像一个容器，将对象、模型、粒子、灯光等放入其中

const scene = new THREE.Scene()

对象：对象可以是很多东西。可以拥有原始几何体、导入的模型、粒子、灯光等

比如需要创建一种名为Mesh的对象的一个网格是几何（形状）和材料（外观）的组合

几何图形：BoxGeometry
材料：MeshBasicMaterial

// Object
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 })
const mesh = new THREE.Mesh(geometry, material)

// 可以使用以下 add(...) 方法将网格添加到场景中
scene.add(mesh)

相机

要创建相机，我们使用PerspectiveCamera，需要提供两个基本参数：

视野
视野是你的视角有多大。如果您使用非常大的角度，您将能够同时看到各个方向，但会产生很大的失真，因为结果将绘制在一个小矩形上。如果您使用小角度，则事物看起来会放大。视野（或 fov）以度数表示，对应于垂直视角
纵横比
在大多数情况下，纵横比是画布的宽度除以其高度。我们暂时没有指定任何宽度或高度，但我们稍后会需要。同时，我们将创建一个具有可以重用的临时值的对象

透视投影照相机（Perspective Camera）的构造函数是：
THREE.PerspectiveCamera(fov, aspect, near, far)
在这里插入图片描述
aspect 等于 width / height，通常设为Canvas的横纵比例。
near 和 far 分别是照相机到视景体最近、最远的距离，均为正值，且 far 应大于
near

// Sizes
const sizes = {
    width: 800,
    height: 600
}

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

渲染器

渲染器的工作是进行渲染。
要求渲染器从相机的角度渲染我们的场景，结果将被绘制到画布中。您可以自己创建画布，也可以让渲染器生成它然后将其添加到您的页面中

// Canvas
const canvas = document.querySelector('canvas.webgl')

// ...

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

第一次渲染

// 调用 render(...) 渲染器上的方法并将其发送 scene 和 camera as 参数：
renderer.render(scene, camera)

没有显示出来，问题在于：我们没有指定对象的位置，也没有指定相机的位置。两者都处于默认位置，即场景的中心，我们无法从其内部看到对象（默认情况下）

const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
// 可以访问每个对象的多个属性，例如 position、 rotation和 scale。现在，使用该 position属性向后移动相机
camera.position.z = 3
scene.add(camera)

使用webpack构建项目

import './style.css'
import * as THREE from 'three'

// Scene
const scene = new THREE.Scene()

// Object
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 })
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

// Sizes
const sizes = {
    width: 800,
    height: 600
}

// Camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
camera.position.z = 3
scene.add(camera)

// Renderer
const renderer = new THREE.WebGLRenderer({
    canvas: document.querySelector('canvas.webgl')
})
renderer.setSize(sizes.width, sizes.height)
renderer.render(scene, camera)

变换物体

有 4 个属性可以在我们的场景中转换对象：
position （移动物体）
scale （调整对象大小）
rotation （旋转对象）
quaternion （也可以旋转对象；稍后会详细介绍）
注意：确保在调用该 render(…) 方法之前执行此操作

移动对象

mesh.position.x = 0.7
mesh.position.y = - 0.6
mesh.position.z = 1

该 position 属性不是任何对象。它是Vector3的一个实例。虽然这个类有一个 x、一个 y和一个 z 属性，但它也有许多有用的方法。

你可以：

// 得到一个向量的长度
console.log(mesh.position.length())

// 得到与另一个Vector3的距离
console.log(mesh.position.distanceTo(camera.position))


// 可以对其值进行归一化（这意味着您会将向量的长度减少到 1 单位但保留其方向）：
console.log(mesh.position.normalize())

// 要更改值，而不是单独更改 , x， 您还可以使用以下 方法：yzset(...)
mesh.position.set(0.7, - 0.6, 1)

轴助手

使用 AxesHelper，会应该看到一条绿线和一条红线。绿线对应于轴y，红线对应x轴，蓝线对应 z轴

const axesHelper = new THREE.AxesHelper(2)
scene.add(axesHelper)

缩放对象

scale 也是一个Vector3默认情况下 x， y 和 z 等于 1，表示对象没有应用缩放

mesh.scale.x = 2
mesh.scale.y = 0.25
mesh.scale.z = 0.5

旋转对象

回转

// 实现半个旋转
mesh.rotation.x = Math.PI * 0.25
mesh.rotation.y = Math.PI * 0.25

在这里插入图片描述

quaternion

该quaternion属性也表示旋转，但以更数学的方式解决了顺序问题

还可以使用lookAt来将相机朝向一个物体旋转，使大炮朝向敌人，或者将角色的眼睛移到一个物体上

camera.lookAt(mesh.position)
camera.lookAt(new THREE.Vector3(0, - 1, 0))

组合变换

可以按任意顺序组合 position、 rotation ( 或 quaternion) 和 scale 。结果将是相同的。它相当于对象的状态

mesh.position.x = 0.7
mesh.position.y = - 0.6
mesh.position.z = 1
mesh.scale.x = 2
mesh.scale.y = 0.25
mesh.scale.z = 0.5
mesh.rotation.x = Math.PI * 0.25
mesh.rotation.y = Math.PI * 0.25

场景图

/**
 * Objects
 */
const group = new THREE.Group()
group.scale.y = 2
group.rotation.y = 0.2
scene.add(group)

const cube1 = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshBasicMaterial({ color: 0xff0000 })
)
cube1.position.x = - 1.5
group.add(cube1)

const cube2 = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshBasicMaterial({ color: 0xff0000 })
)
cube2.position.x = 0
group.add(cube2)

const cube3 = new THREE.Mesh(
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.MeshBasicMaterial({ color: 0xff0000 })
)
cube3.position.x = 1.5
group.add(cube3)

在这里插入图片描述

动画

我们想要执行一个函数，该函数将移动对象并在每一帧上进行渲染，而不管帧速率如何，使用该 window.requestAnimationFrame(…) 方法
requestAnimationFrame将在下一帧执行您提供的功能

创建一个名为的函数 tick 并调用该函数一次。
在此函数中，用于 window.requestAnimationFrame(…) 在下一帧调用相同的函数：

/**
 * Animate
 */
const tick = () =>
{
    console.log('tick')
    window.requestAnimationFrame(tick)
}
tick()

现在已经无限循环。
现在可以 renderer.render(…) 在该函数内移动调用并增加多维数据集 rotation：

/**
 * Animate
 */
const tick = () =>
{
    // Update objects
    mesh.rotation.y += 0.01

    // Render
    renderer.render(scene, camera)

    // Call tick again on the next frame
    window.requestAnimationFrame(tick)
}

tick()

适应帧率

为了使动画适应帧速率，我们需要知道距离上一次滴答已经过去了多少时间。
首先，我们需要一种测量时间的方法。在原生 JavaScript 中，您可以使用 Date.now() 来获取当前时间戳：

/** Animate */
let time = Date.now()
const tick = () => {
        // Time
    const currentTime = Date.now()
    const deltaTime = currentTime - time
    time = currentTime

    // Update objects
    mesh.rotation.y += 0.01 * deltaTime

    // ...
}
tick()

使用时钟

/**
 * Animate
 */
const clock = new THREE.Clock()

const tick = () =>
{
    const elapsedTime = clock.getElapsedTime()

    // Update objects
    camera.position.x = Math.cos(elapsedTime)
    camera.position.y = Math.sin(elapsedTime)
    camera.lookAt(mesh.position)

    // ...
}

tick()

使用GSAPGSAP库

GSAP

import './style.css'
import * as THREE from 'three'
import gsap from 'gsap'

/**
 * Animate
 */
gsap.to(mesh.position, { duration: 1, delay: 1, x: 2 })  // 从 A 到 B 的动画

const tick = () =>
{
    // Render
    renderer.render(scene, camera)

    // Call tick again on the next frame
    window.requestAnimationFrame(tick)
}

tick()

例子

import './style.css'
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import * as dat from 'dat.gui'

// Debug
const gui = new dat.GUI()

// Canvas
const canvas = document.querySelector('canvas.webgl')

// Scene
const scene = new THREE.Scene()

// Objects
const geometry = new THREE.TorusGeometry( .7, .2, 16, 100 );

// Materials

const material = new THREE.MeshBasicMaterial()
material.color = new THREE.Color(0xff0000)

// Mesh
const sphere = new THREE.Mesh(geometry,material)
scene.add(sphere)

// Lights

const pointLight = new THREE.PointLight(0xffffff, 0.1)
pointLight.position.x = 2
pointLight.position.y = 3
pointLight.position.z = 4
scene.add(pointLight)

/**
 * Sizes
 */
const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}

window.addEventListener('resize', () =>
{
    // Update sizes
    sizes.width = window.innerWidth
    sizes.height = window.innerHeight

    // Update camera
    camera.aspect = sizes.width / sizes.height
    camera.updateProjectionMatrix()

    // Update renderer
    renderer.setSize(sizes.width, sizes.height)
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})

/**
 * Camera
 */
// Base camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
camera.position.x = 0
camera.position.y = 0
camera.position.z = 2
scene.add(camera)


/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

/**
 * Animate
 */

const clock = new THREE.Clock()

const tick = () =>
{

    const elapsedTime = clock.getElapsedTime()

    // Update objects
    sphere.rotation.y = .5 * elapsedTime

    // Update Orbital Controls
    // controls.update()

    renderer.render(scene, camera)

    window.requestAnimationFrame(tick)
}

tick()

相机

相机
相机类就是我们所说的抽象类。您不应该直接使用它，但您可以从它继承以访问通用属性和方法。以下一些类继承自Camera 。
阵列相机ArrayCamera
ArrayCamera 用于通过使用多个摄像头多次渲染您的场景。每个相机都会渲染画布的特定区域。你可以想象这看起来像老式的控制台多人游戏，我们必须共享一个分屏。
立体相机StereoCamera
立体相机四用于通过两个模拟眼睛的摄像头渲染场景，以创建我们所说的视差效果，这将诱使您的大脑认为有深度。您必须拥有足够的设备，例如 VR 耳机或红蓝眼镜才能看到结果。
立方体相机CubeCamera
立方体相机一用于获取面向每个方向（向前、向后、向左、向右、向上和向下）的渲染，以创建周围环境的渲染。您可以使用它为反射或阴影贴图创建环境贴图。我们稍后会谈到这些。
正交相机OrthographicCamera
正交相机四用于在没有透视的情况下创建场景的正交渲染。如果您制作像《帝国时代》这样的 RTS 游戏，它会很有用。无论元素与相机的距离如何，它们在屏幕上的大小都是相同的。
透视相机PerspectiveCamera
透视相机是我们已经使用并模拟了具有透视功能的真实相机。
我们将专注于OrthographicCamera和透视相机

透视相机

const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 1, 1000)

视野
第一个称为视野的参数对应于您的相机视图的垂直幅度角（以度为单位）。如果你使用小角度，你会得到一个长范围的效果，如果你使用广角，你会得到一个鱼眼效果，因为最终相机看到的东西会被拉伸或挤压以适合画布。

至于选择合适的视野，您必须尝试一下。45 我通常使用和之间的视野 75。

纵横比
第二个参数称为纵横比，对应于宽度除以高度。虽然您可能认为这显然是画布宽度乘以相机高度，并且 Three.js 应该自己计算它，但如果您开始以非常特定的方式使用 Three.js，情况并非总是如此。但在我们的例子中，您可以简单地使用画布宽度和画布高度。

我建议将这些值保存在一个对象中，因为我们将多次需要它们：

const sizes = {
    width: 800,
    height: 600
}

近与远
第三个和第四个参数称为 near 和 far，对应于相机可以看到的距离和距离。near 任何比该值更靠近相机或比该值更远的对象或对象的一部分 far 都不会显示在渲染中。

正交相机

正交相机不同于透视相机由于缺乏透视，这意味着无论物体与相机的距离如何，它们都将具有相同的大小。

const camera = new THREE.OrthographicCamera(- 1, 1, 1, - 1, 0.1, 100)

在这里插入图片描述

如您所见，没有透视，我们的立方体的边看起来是平行的。问题是我们的立方体看起来不是立方体。

这是由于我们为 , , 和提供的值 left是 rightor top， bottom 这 1 意味着 - 1我们渲染了一个正方形区域，但是该正方形区域将被拉伸以适合我们的矩形画布，而我们的画布不是正方形。

const aspectRatio = sizes.width / sizes.height
const camera = new THREE.OrthographicCamera(- 1 * aspectRatio, 1 * aspectRatio, 1, - 1, 0.1, 100)

在这里插入图片描述

自定义控件

// Camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 1, 1000)

// const aspectRatio = sizes.width / sizes.height
// const camera = new THREE.OrthographicCamera(- 1 * aspectRatio, 1 * aspectRatio, 1, - 1, 0.1, 100)

// camera.position.x = 2
// camera.position.y = 2
camera.position.z = 3
camera.lookAt(mesh.position)
scene.add(camera)

我们现在要做的是用鼠标控制相机。首先，我们想知道鼠标坐标。我们可以使用原生 JavaScript 通过监听 mousemove 事件来做到这一点addEventListener。

坐标将位于回调函数的参数中，如 event.clientX 和 event.clientY：

// Cursor
const cursor = {
    x: 0,
    y: 0
}

window.addEventListener('mousemove', (event) =>
{
    cursor.x = event.clientX / sizes.width - 0.5
    cursor.y = event.clientY / sizes.height - 0.5

    console.log(cursor.x, cursor.y)
})

const tick = () =>
{
    // ...

    // Update camera
    camera.position.x = Math.sin(cursor.x * Math.PI * 2) * 2
    camera.position.z = Math.cos(cursor.x * Math.PI * 2) * 2
    camera.position.y = cursor.y * 3
    camera.lookAt(mesh.position)

    // ...
}

tick()

内置控件

设备方向控制DeviceOrientationControls
设备方向控制 1如果您的设备、操作系统和浏览器允许，将自动检索设备方向并相应地旋转相机。如果您拥有合适的设备，您可以使用它来创建身临其境的宇宙或 VR 体验。
飞控FlyControls
飞控像在宇宙飞船上一样移动相机。您可以在所有 3 个轴上旋转，前进和后退。
第一人称控制FirstPersonControls
FirstPersonControls就像FlyControls，但具有固定的向上轴。你可以看到这就像鸟儿不能做桶滚动的飞行鸟瞰图。虽然 FirstPersonControls 包含“FirstPerson”，但它不像在 FPS 游戏中那样工作。
指针锁控件PointerLockControls
PointerLockControls使用指针锁定 JavaScript API . mousemove 此 API 隐藏光标，使其居中，并在事件回调中不断发送移动。使用此 API，您可以直接在浏览器中创建 FPS 游戏。虽然如果你想创建这种交互，这个类听起来很有希望，但它只会在指针被锁定时处理相机旋转。您必须自己处理相机位置和游戏物理。
轨道控制OrbitControls
轨道控制与我们在上一课中制作的控件非常相似。您可以使用鼠标左键围绕一个点旋转，使用鼠标右键横向平移，使用滚轮放大或缩小。
轨迹球控件TrackballControls
轨迹球控件就像OrbitControls但在垂直角度方面没有限制。即使场景颠倒，您也可以继续旋转并使用相机旋转。
变换控件TransformControls
变换控件与相机无关。您可以使用它向对象添加 Gizmo 以移动该对象。
拖动控件DragControls
就像TransformControls,拖动控件与相机无关。您可以使用它通过拖放来移动面向相机的平面上的对象。

轨道控制

需求：使用鼠标左键或鼠标右键拖放来移动相机，并且可以向上或向下滚动以放大或缩小

实例化

首先，我们需要使用OrbitControls实例化一个变量。你可能认为可以使用 THREE.OrbitControls ，但是不能。

THREE OrbitControls 类是变量中默认不可用的那些类的一部分。该决定有助于减轻图书馆的重量。这就是我们的 Webpack 模板的用武之地。

该类可能在变量OrbitControls 中不可用；THREE它仍然位于依赖项文件夹中。要导入它，您必须提供 /node_modules/ 文件夹内部的路径，即 /three/examples/jsm/controls/OrbitControls.js：

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

// Controls 
// 必须提供相机和页面中将处理鼠标事件作为参数的元素
const controls = new OrbitControls(camera, canvas)
controls.target.y = 2  // 查看立方体上方
controls.enableDamping = true // 阻尼将通过添加某种加速度和摩擦公式来平滑动画

// ...
const tick = () =>
{
    // ...

    // Update controls
    controls.update() // 在每一帧上更新控件

    // ...
}