Three.js基础功能学习十：渲染器与辅助对象

本章介绍threejs的渲染器和辅助对象相关内容，用于配置不通的渲染方式及辅助的工具，如轨道控制器/第一视角/坐标轴等不同的辅助工具内容。

一、学习视频

three.js学习及项目实战：辅助对象学习

二、渲染器

2.1 ShaderChunk

WebGL着色器库的着色器片段

2.2 ShaderLib

three.js的WebGL着色器库

2.3 UniformsLib

为webgl着色器提供的Uniforms库

2.4 UniformsUtils

提供用于管理uniforms的实用功能。

.clone ( src : Object ) : Object
src -- 表示定义uniforms的对象的路径
通过执行深层复制克隆给定的统一定义。这意味着如果uniform的[page:Uniform.value 值]引用Vector3或Texture之类的对象，则克隆的uniform将引用新的对象引用。
.merge ( uniforms : Array ) : Object
uniforms -- 包含uniforms定义的对象数组
将给定的统一定义合并到一个对象中。由于该方法在内部使用.clone()，因此它在生成合并的统一定义时执行深度复制。

三、渲染器 / WebXR

3.1 WebXRManager

此类表示WebXR设备API的抽象，并由WebGLRenderer在内部使用。 WebXRManager还提供了一个公共接口，允许用户启用/禁用XR并执行XR相关任务，例如检索控制器。

Properties

.cameraAutoUpdate : Boolean
manager的XR摄像头是否应自动更新。默认为true。
.enabled : Boolean
此标志通知渲染器准备好进行XR渲染。默认为假。如果您要在应用中使用XR，请将其设置为true。
.isPresenting : Boolean
XR演示是否处于活动状态。默认为false。该标志是只读的，由WebXRManager自动设置。

方法(Methods)

.getCamera () : ArrayCamera
返回表示活动XR会话的XR相机的ArrayCamera实例。对于每个视图，它在其cameras属性中包含一个单独的相机对象。
当前未使用相机的fov，不反映 XR 相机的 fov。如果您需要应用级别的fov，则必须从XR相机的投影矩阵中手动计算。
.getController ( index : Integer ) : Group
index --- 控制器的索引。
返回表示XR控制器所谓的目标光线空间的[page:Group 组]。使用此空间可视化3D对象，支持用户完成UI交互等指向任务。
.getControllerGrip ( index : Integer ) : Group
index --- 控制器的索引。
返回一个[page:Group 组]，代表所谓的XR控制器的抓地力空间。如果用户要握住其他3D对象（如光剑），请使用此空间。
注意：如果你想显示用户手中的东西并同时提供指向光线，你需要将手持对象附加到.getControllerGrip()返回的组，并将光线附加到.getController()返回的组. 这个想法是在同一个WebXR控制器的两个不同坐标空间中有两个不同的组。
.getHand ( index : Integer ) : Group
index --- 控制器的索引。
返回代表XR控制器所谓的手或关节空间的[page:Group 组]。在不使用物理控制器时，使用此空间可视化用户的手。
.getReferenceSpace () : String
返回参考空间。
.getSession () : XRSession
返回XRSession对象，它允许在应用程序级别更细粒度地管理活动的WebXR会话。
.setFramebufferScaleFactor ( factor : Float, limited : Boolean ) : undefined
factor --- 要设置的帧缓冲区比例因子。
limited --- 如果值最终高于设备的能力，是否应将帧缓冲区比例因子减小到本机限制。默认为false。
指定在渲染到XR设备时确定帧缓冲区大小时要使用的比例因子。该值是相对于默认XR设备显示分辨率的。默认为1。值0.5将指定具有显示器原始分辨率50%的帧缓冲区。
注意：在呈现XR内容时无法更改帧缓冲区比例因子。
.setReferenceSpace ( referenceSpace : XRReferenceSpace ) : undefined
referenceSpace --- 自定义参考空间。
可用于配置覆盖默认参考空间的自定义参考空间。
.setReferenceSpaceType ( referenceSpaceType : String ) : undefined
referenceSpaceType --- 要设置的参考空间类型。
可用于配置与用户物理环境的空间关系。根据用户在3D空间中的移动方式，设置适当的参考空间可以改进跟踪。默认为本层空间。请查看MDN以了解可能的值及其用例。
.updateCamera ( camera : PerspectiveCamera ) : undefined
更新 XR 相机的状态。如果您将.cameraAutoUpdate设置为false，请在应用级别使用此方法。该方法需要场景的非 XR 相机作为参数。调用此方法时，传入的相机变换会自动调整到 XR 相机的位置。
注意：在呈现 XR 内容时无法更改参考空间类型。

四. 辅助对象

4.1 ArrowHelper

用于模拟方向的3维箭头对象.
构造函数

ArrowHelper(dir : Vector3, origin : Vector3, length : Number, hex : Number, headLength : Number, headWidth : Number )

dir -- 基于箭头原点的方向. 必须为单位向量.
origin -- 箭头的原点.
length -- 箭头的长度. 默认为 1.
hex -- 定义的16进制颜色值. 默认为 0xffff00.
headLength -- 箭头头部(锥体)的长度. 默认为箭头长度的0.2倍(0.2 * length).
headWidth -- The width of the head of the arrow. Default is 0.2 * headLength.

属性

请到基类 Object3D 页面查看公共属性.

.line : Line
包含箭头辅助对象的线段部分.
.cone : Mesh
包含箭头辅助对象的锥体部分.

方法

请到基类 Object3D 页面查看公共方法.

.setColor (color : Color) : undefined
color -- 所需的颜色。
设置箭头辅助对象的颜色.
.setLength (length : Number, headLength : Number, headWidth : Number) : undefined
length -- 要设置的长度.
headLength -- 要设置的箭头头部(锥体)的长度.
headWidth -- The width of the head of the arrow.
设置箭头辅助对象的长度.
.setDirection (dir : Vector3) : undefined
dir -- 要设置的方向. 必须为单位向量.
设置箭头辅助对象的方向.

typescript 复制代码

import * as THREE from "three"

import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

export default () => {
    const canvas = document.getElementById("demo");

    const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setAnimationLoop(animate);

    const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100);
    camera.position.set(10, 10, 10);

    const scene = new THREE.Scene();


    const dir = new THREE.Vector3(2, 5, 0);

    //normalize the direction vector (convert to vector of length 1)
    dir.normalize();

    const origin = new THREE.Vector3(0, 0, 0);
    const length = 10;
    const hex = 0xffff00;

    const arrowHelper = new THREE.ArrowHelper(dir, origin, length, hex);
    scene.add(arrowHelper);

    const control = new OrbitControls(camera, renderer.domElement)
    control.update();

    function animate() {
        requestAnimationFrame(animate);
        control.update();

        renderer.render(scene, camera);
    }

    animate()
}

4.2 AxesHelper

用于简单模拟3个坐标轴的对象.

红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴.

AxesHelper( size : Number )

size -- (可选的) 表示代表轴的线段长度. 默认为 1

typescript 复制代码

import * as THREE from "three"

import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

export default () => {
    const canvas = document.getElementById("demo");

    const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setAnimationLoop(animate);

    const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100);
    camera.position.set(10, 10, 10);

    const scene = new THREE.Scene();

    const axesHelper = new THREE.AxesHelper(15);
    scene.add(axesHelper);

    const control = new OrbitControls(camera, renderer.domElement)
    control.update();

    function animate() {
        requestAnimationFrame(animate);
        control.update();

        renderer.render(scene, camera);
    }

    animate()
}

4.3 BoxHelper

用于图形化地展示对象世界轴心对齐的包围盒的辅助对象。The actual bounding box is handled with Box3, this is just a visual helper for debugging. It can be automatically resized with the BoxHelper.update method when the object it's created from is transformed. 注意:要想能正常运行,目标对象必须包含 BufferGeometry , 所以当目标对象是精灵 Sprites 时将不能正常运行.

构造函数

BoxHelper( object : Object3D, color : Color )

object -- (可选的) 被展示世界轴心对齐的包围盒的对象.
color -- (可选的) 线框盒子的16进制颜色值. 默认为 0xffff00.
创建一个新的线框盒子包围指定的对象. 内部使用 Box3.setFromObject 方法来计算尺寸. 注意:此线框盒子将包围对象的所有子对象.

方法

请到基类 LineSegments 页面查看公共方法.

.update () : undefined
更新辅助对象的几何体，与目标对象尺寸保持一致, 包围目标对象所有子对象. 请查看 Box3.setFromObject.
.setFromObject ( object : Object3D ) : this
object - 用于创建辅助对象的目标 Object3D 对象.
更新指定对象的线框盒子.

typescript 复制代码

import * as THREE from "three"

import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

export default () => {
    const canvas = document.getElementById("demo");

    const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setAnimationLoop(animate);

    const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100);
    camera.position.set(10, 10, 10);

    const scene = new THREE.Scene();

    const sphere = new THREE.SphereGeometry();
    const object = new THREE.Mesh(sphere, new THREE.MeshBasicMaterial(0xff5500));
    const box = new THREE.BoxHelper(object, 0xffff00);
    scene.add(box);

    const control = new OrbitControls(camera, renderer.domElement)
    control.update();

    function animate() {
        requestAnimationFrame(animate);
        control.update();

        renderer.render(scene, camera);
    }

    animate()
}

4.4 Box3Helper

模拟3维包围盒 Box3 的辅助对象.
构造函数

Box3Helper( box : Box3, color : Color )

box -- 被模拟的3维包围盒.
color -- (可选的) 线框盒子的颜色. 默认为 0xffff00.
创建一个新的线框盒子用以表示指定的3维包围盒.

属性

请到基类 LineSegments 页面查看公共属性.

.box : Box3
被模拟的3维包围盒.

方法

请到基类 LineSegments 页面查看公共方法.

.updateMatrixWorld ( force : Boolean ) : undefined
重写基类 Object3D 的该方法以便于同时更新线框辅助对象与 .box 属性保持一致.

typescript 复制代码

import * as THREE from "three"

import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

export default () => {
    const canvas = document.getElementById("demo");

    const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setAnimationLoop(animate);

    const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100);
    camera.position.set(10, 10, 10);

    const scene = new THREE.Scene();

    const box = new THREE.Box3();
    box.setFromCenterAndSize(new THREE.Vector3(1, 1, 1), new THREE.Vector3(2, 10, 3));

    const helper = new THREE.Box3Helper(box, 0xffff00);
    scene.add(helper);

    const control = new OrbitControls(camera, renderer.domElement)
    control.update();

    function animate() {
        requestAnimationFrame(animate);
        control.update();

        renderer.render(scene, camera);
    }

    animate()
}

4.5 CameraHelper

用于模拟相机视锥体的辅助对象.它使用 LineSegments 来模拟相机视锥体.

CameraHelper must be a child of the scene.
构造函数

CameraHelper( camera : Camera )

camera -- 被模拟的相机.
为指定相机创建一个新的相机辅助对象 CameraHelper .

属性

请到基类 LineSegments 页面查看公共属性.

.camera : Camera
被模拟的相机.
.pointMap : Object
包含用于模拟相机的点.
.matrix : Object
请参考相机的世界矩阵 camera.matrixWorld.
.matrixAutoUpdate : Object
请查看 Object3D.matrixAutoUpdate. 这里设置为 false 表示辅助对象使用相机的 matrixWorld.

方法

请到基类 LineSegments 页面查看公共方法.

.dispose () : undefined
用于辅助对象销毁内部创建的 material 和 geometry 。
.setColors ( frustum : Color, cone : Color, up : Color, target : Color, cross : Color ) : this
定义辅助对象的颜色。
.update () : undefined
基于相机的投影矩阵更新辅助对象.

typescript 复制代码

import * as THREE from "three"

import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

export default () => {
    const canvas = document.getElementById("demo");

    const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setAnimationLoop(animate);

    const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100);
    camera.position.set(10, 10, 10);

    const scene = new THREE.Scene();

    const box = new THREE.Box3();
    box.setFromCenterAndSize(new THREE.Vector3(1, 1, 1), new THREE.Vector3(2, 10, 3));

    const helper = new THREE.Box3Helper(box, 0xffff00);
    scene.add(helper);

    const control = new OrbitControls(camera, renderer.domElement)
    control.update();

    const camera1 = new THREE.PerspectiveCamera(15, window.innerWidth / window.innerHeight, 0.1, 10);
    const helper1 = new THREE.CameraHelper(camera1);
    scene.add(helper1);

    function animate() {
        requestAnimationFrame(animate);
        control.update();

        renderer.render(scene, camera);
    }

    animate()
}

4.6 DirectionalLightHelper

用于模拟场景中平行光 DirectionalLight 的辅助对象. 其中包含了表示光位置的平面和表示光方向的线段.
构造函数

DirectionalLightHelper( light : DirectionalLight, size : Number, color : Hex )

light-- 被模拟的光源.
size -- (可选的) 平面的尺寸. 默认为 1.
color -- (可选的) 如果没有设置颜色将使用光源的颜色.

属性

请到基类 Object3D 页面查看公共属性.

.lightPlane : Line
包含表示平行光方向的线网格.
.light : DirectionalLight
被模拟的光源. 请参考 directionalLight .
.matrix : Object
请参考光源的世界矩阵 matrixWorld.
.matrixAutoUpdate : Object
请查看 Object3D.matrixAutoUpdate 页面. 这里设置为 false 表示辅助对象使用光源的 matrixWorld.
.color : hex
构造函数中传入的颜色值. 默认为 undefined. 如果改变该值, 辅助对象的颜色将在下一次 update 被调用时更新.

方法

请到基类 Object3D 页面查看公共方法.

.dispose () : undefined
销毁该平行光辅助对象.
.update () : undefined
更新辅助对象，与模拟的 directionalLight 光源的位置和方向保持一致.

typescript 复制代码

import * as THREE from "three"

import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

export default () => {
    const canvas = document.getElementById("demo");

    const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setAnimationLoop(animate);

    const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100);
    camera.position.set(10, 10, 10);

    const scene = new THREE.Scene();

    const light = new THREE.DirectionalLight(0xFF0000, 1);
    const helper = new THREE.DirectionalLightHelper(light, 5);
    scene.add(helper);

    const control = new OrbitControls(camera, renderer.domElement)
    control.update();

    function animate() {
        requestAnimationFrame(animate);
        control.update();

        renderer.render(scene, camera);
    }

    animate()
}

4.7 GridHelper

坐标格辅助对象. 坐标格实际上是2维线数组.构造函数

GridHelper( size : number, divisions : Number, colorCenterLine : Color, colorGrid : Color )

size -- 坐标格尺寸. 默认为 10.
divisions -- 坐标格细分次数. 默认为 10.
colorCenterLine -- 中线颜色. 值可以为 Color 类型, 16进制和 CSS 颜色名. 默认为 0x444444
colorGrid -- 坐标格网格线颜色. 值可以为 Color 类型, 16进制和 CSS 颜色名. 默认为 0x888888
创建一个尺寸为 'size' 和每个维度细分 'divisions' 次的坐标格. 颜色可选.

typescript 复制代码

import * as THREE from "three"

import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

export default () => {
    const canvas = document.getElementById("demo");

    const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setAnimationLoop(animate);

    const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.set(20, 10, 10);

    const scene = new THREE.Scene();


    const size = 100;
    const divisions = 100;

    const gridHelper = new THREE.GridHelper(size, divisions, new THREE.Color("#00ff00"), new THREE.Color("#0000ff"));
    scene.add(gridHelper);

    const control = new OrbitControls(camera, renderer.domElement)
    control.update();

    function animate() {
        requestAnimationFrame(animate);
        control.update();

        renderer.render(scene, camera);
    }

    animate()
}

4.8 PolarGridHelper

极坐标格辅助对象. 坐标格实际上是2维线数组.

PolarGridHelper( radius : Number, sectors : Number, rings : Number, divisions : Number, color1 : Color, color2 : Color )

radius -- 极坐标格半径. 可以为任何正数. 默认为 10.
sectors -- The number of sectors the grid will be divided into. This can be any positive integer. Default is 16.
rings -- The number of rings. This can be any positive integer. Default is 8.
divisions -- 圆圈细分段数. 可以为任何大于或等于3的正整数. 默认为 64.
color1 -- 极坐标格使用的第一个颜色. 值可以为 Color 类型, 16进制和 CSS 颜色名. 默认为 0x444444
color2 -- 极坐标格使用的第二个颜色. 值可以为 Color 类型, 16进制和 CSS 颜色名. 默认为 0x888888

typescript 复制代码

import * as THREE from "three"

import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

export default () => {
    const canvas = document.getElementById("demo");

    const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setAnimationLoop(animate);

    const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.set(20, 10, 10);

    const scene = new THREE.Scene();

    const radius = 20;
    const sectors = 16;
    const rings = 8;
    const divisions = 64;

    const helper = new THREE.PolarGridHelper(radius, sectors, rings, divisions, new THREE.Color("#ff0000"));
    scene.add(helper);

    const control = new OrbitControls(camera, renderer.domElement)
    control.update();

    function animate() {
        requestAnimationFrame(animate);
        control.update();

        renderer.render(scene, camera);
    }

    animate()
}

4.9 HemisphereLightHelper

创建一个虚拟的球形网格 Mesh 的辅助对象来模拟半球形光源 HemisphereLight.
构造函数

HemisphereLightHelper( light : HemisphereLight, sphereSize : Number, color : Hex )

light -- 被模拟的光源.
size -- 用于模拟光源的网格尺寸.
color -- (可选的) 如果没有赋值辅助对象将使用光源的颜色.

属性

请到基类 Object3D 页面查看公共属性.

.light : HemisphereLight
被模拟的半球形光源.
.matrix : Object
请参考半球形光源的世界矩阵 matrixWorld.
.matrixAutoUpdate : Object
请查看 Object3D.matrixAutoUpdate. 这里设置为 false 表示辅助对象使用半球形光源的 matrixWorld.
.color : hex
构造函数中传入的颜色值. 默认为 undefined. 如果改变该值, 辅助对象的颜色将在下一次 update 被调用时更新.

方法

请到基类 Object3D 页面查看公共方法.

.dispose () : undefined
销毁该半球形光源辅助对象.
.update () : undefined
更新辅助对象，与 .light 属性的位置和方向保持一致.

typescript 复制代码

import * as THREE from "three"

import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

export default () => {
    const canvas = document.getElementById("demo");

    const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setAnimationLoop(animate);

    const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.set(20, 10, 10);

    const scene = new THREE.Scene();

    const light = new THREE.HemisphereLight(0xff0000, 0x00ff00, 1);
    const helper = new THREE.HemisphereLightHelper(light, 40);
    scene.add(helper);

    const control = new OrbitControls(camera, renderer.domElement)
    control.update();

    function animate() {
        requestAnimationFrame(animate);
        control.update();

        renderer.render(scene, camera);
    }

    animate()
}

4.10 PlaneHelper

用于模拟平面 Plane 的辅助对象.
构造函数

PlaneHelper( plane : Plane, size : Float, hex : Color )

plane -- 被模拟的平面.
size -- (可选的) 辅助对象的单边长度. 默认为 1.
color -- (可选的) 辅助对象的颜色. 默认为 0xffff00.
创建一个线框辅助对象来表示指定平面.

属性

请到基类 LineSegments 页面查看公共属性.

.plane : Plane
被模拟的平面 plane .
.size : Float
辅助对象的单边长度.

方法

请到基类 LineSegments 页面查看公共方法.

.updateMatrixWorld ( force : Boolean ) : undefined
重写基类 Object3D 的该方法以便于同时更新线框辅助对象与 .plane 和 .size 属性保持一致.

typescript 复制代码

import * as THREE from "three"

import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

export default () => {
    const canvas = document.getElementById("demo");

    const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setAnimationLoop(animate);

    const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.set(20, 10, 10);

    const scene = new THREE.Scene();

    const plane = new THREE.Plane(new THREE.Vector3(1, 1, 0.2), 3);
    const helper = new THREE.PlaneHelper(plane, 50, 0xffff00);
    scene.add(helper);

    const control = new OrbitControls(camera, renderer.domElement)
    control.update();

    function animate() {
        requestAnimationFrame(animate);
        control.update();

        renderer.render(scene, camera);
    }

    animate()
}

4.11 PointLightHelper

创建一个虚拟的球形网格 Mesh 的辅助对象来模拟点光源 PointLight.
构造函数

PointLightHelper( light : PointLight, sphereSize : Float, color : Hex )

light -- 要模拟的光源.
sphereSize -- (可选的) 球形辅助对象的尺寸. 默认为 1.
color -- (可选的) 如果没有赋值辅助对象将使用光源的颜色.

属性

请到基类 Mesh 页面查看公共属性.

.light : PointLight
被模拟的点光源 PointLight .
.matrix : Object
请参考点光源的世界矩阵 matrixWorld.
.matrixAutoUpdate : Object
请查看 Object3D.matrixAutoUpdate. 这里设置为 false 表示辅助对象使用点光源的 matrixWorld.
.color : hex
构造函数中传入的颜色值. 默认为 undefined. 如果改变该值, 辅助对象的颜色将在下一次 update 被调用时更新.

方法

请到基类 Mesh 页面查看公共方法.

.dispose () : undefined
销毁该点光源辅助对象.
.update () : undefined
更新辅助对象，与 .light 属性的位置保持一致.

typescript 复制代码

import * as THREE from "three"

import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

export default () => {
    const canvas = document.getElementById("demo");

    const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setAnimationLoop(animate);

    const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.set(20, 10, 10);

    const scene = new THREE.Scene();

    const pointLight = new THREE.PointLight(0xff0000, 1, 100);
    pointLight.position.set(10, 10, 10);
    scene.add(pointLight);

    const sphereSize = 10;
    const pointLightHelper = new THREE.PointLightHelper(pointLight, sphereSize);
    scene.add(pointLightHelper);

    const control = new OrbitControls(camera, renderer.domElement)
    control.update();

    function animate() {
        requestAnimationFrame(animate);
        control.update();

        renderer.render(scene, camera);
    }

    animate()
}

4.12 SkeletonHelper

用来模拟骨骼 Skeleton 的辅助对象. 该辅助对象使用 LineBasicMaterial 材质.
构造函数

SkeletonHelper( object : Object3D )

object -- 通常是 SkinnedMesh的实例. 实际上, 只要子级存在Bones的任何 Object3D 的实例都可以，(参考 Object3D.children).
属性

.bones : Array
辅助对象使用 Lines 渲染的骨数组.
.isSkeletonHelper : Boolean
只读属性，用以检查该给定对象是否是 SkeletonHelper.
.root : Object3D
构造函数传入的对象.

typescript 复制代码

import * as THREE from "three"

import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

export default () => {
    const canvas = document.getElementById("demo");

    const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setAnimationLoop(animate);

    const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.set(20, 10, 10);

    const scene = new THREE.Scene();

    const pointLight = new THREE.PointLight(0xff0000, 1, 100);
    pointLight.position.set(10, 10, 10);
    scene.add(pointLight);


    const segmentHeight = 8;
    const segmentCount = 4;
    const height = segmentHeight * segmentCount;
    const halfHeight = height * 0.5;

    const sizing = {
        segmentHeight: segmentHeight,
        segmentCount: segmentCount,
        height: height,
        halfHeight: halfHeight
    };
    const geometry = new THREE.CylinderGeometry(
        5, // radiusTop
        5, // radiusBottom
        sizing.height, // height
        8, // radiusSegments
        sizing.segmentCount * 3, // heightSegments
        true // openEnded
    );

    const position = geometry.attributes.position;

    const vertex = new THREE.Vector3();

    const skinIndices = [];
    const skinWeights = [];

    for (let i = 0; i < position.count; i++) {

        vertex.fromBufferAttribute(position, i);

        // compute skinIndex and skinWeight based on some configuration data

        const y = (vertex.y + sizing.halfHeight);

        const skinIndex = Math.floor(y / sizing.segmentHeight);
        const skinWeight = (y % sizing.segmentHeight) / sizing.segmentHeight;

        skinIndices.push(skinIndex, skinIndex + 1, 0, 0);
        skinWeights.push(1 - skinWeight, skinWeight, 0, 0);

    }

    const bones = [];

    let prevBone = new THREE.Bone();
    bones.push(prevBone);
    prevBone.position.y = - sizing.halfHeight;

    for (let i = 0; i < sizing.segmentCount; i++) {

        const bone = new THREE.Bone();
        bone.position.y = sizing.segmentHeight;
        bones.push(bone);
        prevBone.add(bone);
        prevBone = bone;

    }

    geometry.setAttribute('skinIndex', new THREE.Uint16BufferAttribute(skinIndices, 4));
    geometry.setAttribute('skinWeight', new THREE.Float32BufferAttribute(skinWeights, 4));


    const material = new THREE.MeshPhongMaterial({
        color: 0x156289,
        emissive: 0x072534,
        side: THREE.DoubleSide,
        flatShading: true
    });
    const skeleton = new THREE.Skeleton(bones);

    const mesh = new THREE.SkinnedMesh(geometry, material);

    const rootBone = skeleton.bones[0];
    mesh.add(rootBone);

    // bind the skeleton to the mesh

    mesh.bind(skeleton);

    // move the bones and manipulate the model

    skeleton.bones[0].rotation.x = -0.1;
    skeleton.bones[1].rotation.x = 0.2;

    const helper = new THREE.SkeletonHelper(mesh);
    scene.add(helper);

    const control = new OrbitControls(camera, renderer.domElement)
    control.update();

    function animate() {
        requestAnimationFrame(animate);
        control.update();

        renderer.render(scene, camera);
    }

    animate()
}

4.13 SpotLightHelper

用于模拟聚光灯 SpotLight 的锥形辅助对象.
构造函数

SpotLightHelper( light : SpotLight, color : Hex )

light -- 被模拟的聚光灯 SpotLight .
color -- (可选的) 如果没有赋值辅助对象将使用光源的颜色.

属性

请到基类 Object3D 页面查看公共属性.

.cone : LineSegments
用于模拟光源的 LineSegments 类型对象.
.light : SpotLight
被模拟的聚光灯 SpotLight .
.matrix : Object
请参考聚光灯的世界矩阵 matrixWorld.
.matrixAutoUpdate : Object
请查看 Object3D.matrixAutoUpdate. 这里设置为 false 表示辅助对象使用聚光灯的 matrixWorld.
.color : hex
构造函数中传入的颜色值. 默认为 undefined. 如果改变该值, 辅助对象的颜色将在下一次 update 被调用时更新.

方法

请到基类 Object3D 页面查看公共属性.

.dispose () : undefined
销毁该聚光灯辅助对象.
.update () : undefined
更新聚光灯辅助对象.

typescript 复制代码

import * as THREE from "three"

import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

export default () => {
    const canvas = document.getElementById("demo");

    const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setAnimationLoop(animate);

    const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.set(20, 10, 10);

    const scene = new THREE.Scene();

    const spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(10, 10, 10);
    scene.add(spotLight);

    const spotLightHelper = new THREE.SpotLightHelper(spotLight);
    scene.add(spotLightHelper);

    const control = new OrbitControls(camera, renderer.domElement)
    control.update();

    function animate() {
        requestAnimationFrame(animate);
        control.update();

        renderer.render(scene, camera);
    }

    animate()
}