Three.js 提供了一些辅助类(Helpers)以帮助我们更容易地调试、可视化场景中的元素。
ArrowHelper 用于创建箭头辅助器,可以用来可视化方向向量或表示某一方向的箭头。
THREE.ArrowHelper(direction, origin, length, color, headLength, headWidth)
参数说明:
const dir = new THREE.Vector3( 2, 0, 2 );
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 );
运行效果,在前一章的图形基础上查看箭头效果,下面的箭头从原点指向 (2,0,2)的位置 :
THREE.AxisHelper(size)
setColors
来设置颜色。.dispose ()
释放资源。THREE.BoxHelper(object, color)
BoxHelper( object : Object3D, color : Color )
本示例包含创建形状的完整代码:
// 引入Three.js库的全部功能,并将其命名为THREE
import * as THREE from 'three';
// 引入交互控制器
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
// 创建一个场景
const scene = new THREE.Scene();
// 创建一个透视相机,参数分别为视野角度、视口宽高比、近端距离、远端距离
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 创建一个WebGL渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器的大小为窗口的宽度和高度
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器的canvas元素添加到HTML文档中的body标签中
document.body.appendChild(renderer.domElement);
//------------- 下面放创建几何体的代码 -----------------------
const geometry = new THREE.SphereGeometry( 10, 10, 10 );
const wireframe = new THREE.WireframeGeometry( geometry );
const myGeometry = new THREE.LineSegments( wireframe );
myGeometry.material.depthTest = false;
myGeometry.material.opacity = 0.5;
myGeometry.material.transparent = true;
scene.add( myGeometry );
//--------------- 创建几何体代码结束 --------------------------
// 创建一个平行光源
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1).normalize(); // 设置光源的方向
scene.add(directionalLight);
const controls = new OrbitControls(camera, renderer.domElement);
camera.position.z = 40;
const dir = new THREE.Vector3( 2, 0, 2 );
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 axesHelper = new THREE.AxesHelper( 10 );
scene.add( axesHelper );
const box = new THREE.BoxHelper( myGeometry, 0xffff00 );
scene.add( box );
// 创建一个动画函数
function animate() {
// 请求下一帧动画
requestAnimationFrame(animate);
// 更新 OrbitControls
controls.update();
myGeometry.rotation.y += 0.01;
myGeometry.rotation.z += 0.01;
// 渲染场景
renderer.render(scene, camera);
}
animate()
运行效果:
Box3表示一个三维空间中的轴对齐包围盒,Box3Helper创建了用于显示该包围盒的线框辅助器。
THREE.Box3Helper(box, color)
参数说明:
const box = new THREE.Box3();
box.setFromCenterAndSize(new THREE.Vector3(1, 1, 1), new THREE.Vector3(2, 1, 3));
const helper = new THREE.Box3Helper(box, 0xffff00);
scene.add(helper);
运行效果:
CameraHelper 使用LinxSegments 将相机的视锥体可视化出来 , 以帮助我们理解相机的视野范围。
THREE.CameraHelper(camera)
...
// 创建一个透视相机,参数分别为视野角度、视口宽高比、近端距离、远端距离
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
...
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const helper = new THREE.CameraHelper(camera);
scene.add(helper);
运行效果:
THREE.DirectionalLightHelper(light, size, color)
参数说明:
// 引入Three.js库的全部功能,并将其命名为THREE
import * as THREE from 'three';
// 引入交互控制器
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
// 创建一个场景
const scene = new THREE.Scene();
// 创建一个透视相机,参数分别为视野角度、视口宽高比、近端距离、远端距离
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 创建一个WebGL渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器的大小为窗口的宽度和高度
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器的canvas元素添加到HTML文档中的body标签中
document.body.appendChild(renderer.domElement);
//------------- 下面放创建几何体的代码 -----------------------
const radius = 2;
const detail = 0;
const dodecahedronGeometry = new THREE.DodecahedronGeometry(radius, detail);
const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
const myGeometry = new THREE.Mesh(dodecahedronGeometry, material);
myGeometry.material.depthTest = false;
myGeometry.material.opacity = 0.5;
myGeometry.material.transparent = true;
scene.add( myGeometry );
//--------------- 创建几何体代码结束 --------------------------
// 创建一个平行光源
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1).normalize(); // 设置光源的方向
scene.add(directionalLight);
const controls = new OrbitControls(camera, renderer.domElement);
camera.position.z = 20;
const helper = new THREE.DirectionalLightHelper( directionalLight, 5 );
scene.add( helper );
// 创建一个动画函数
function animate() {
// 请求下一帧动画
requestAnimationFrame(animate);
// 更新 OrbitControls
controls.update();
myGeometry.rotation.y += 0.01;
myGeometry.rotation.z += 0.01;
myGeometry.rotation.x += 0.01;
// 渲染场景
renderer.render(scene, camera);
helper.update();
}
animate()
运行效果:
网格是二维线条的数组,用于帮助我们可视化场景中的空间布局。
THREE.GridHelper(size, divisions, colorCenterLine, colorGrid)
GridHelper
基于 LineSegments
类,它具有与LineSegments
类相同的方法和属性。
下面示例创建一个尺寸为10、每边分10段的网格辅助器:
const size = 10;
const divisions = 10;
const gridHelper = new THREE.GridHelper(size, divisions);
scene.add(gridHelper);
运行效果:
极坐标网格也是一个二维的线条数组,用于可视化极坐标系中的布局。
THREE.PolarGridHelper(radius, sectors, rings, divisions, color1, color2)
参数说明:
下面创建一个半径为10、分为16个扇区、有8个环数的极坐标网格,每个圆被平滑分成64个线段:
const radius1 = 10;
const sectors = 16;
const rings = 8;
const divisions = 64;
const helper = new THREE.PolarGridHelper(radius1, sectors, rings, divisions);
scene.add(helper);
运行效果:
HemisphereLightHelper
是用于可视化半球光(HemisphereLight)的辅助类,它创建了一个球形 Mesh 以辅助可视化半球光的效果。
THREE.HemisphereLightHelper(light, sphereSize, color)
参数:
下面示例创建一个半球光,然后创建基于该半球光的可视化辅助器:
// 引入Three.js库的全部功能,并将其命名为THREE
import * as THREE from 'three';
// 引入交互控制器
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
// 创建一个场景
const scene = new THREE.Scene();
// 创建一个透视相机,参数分别为视野角度、视口宽高比、近端距离、远端距离
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 创建一个WebGL渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器的大小为窗口的宽度和高度
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器的canvas元素添加到HTML文档中的body标签中
document.body.appendChild(renderer.domElement);
//------------- 下面放创建几何体的代码 -----------------------
const radius = 2;
const detail = 0;
const dodecahedronGeometry = new THREE.DodecahedronGeometry(radius, detail);
const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
const myGeometry = new THREE.Mesh(dodecahedronGeometry, material);
myGeometry.material.depthTest = false;
myGeometry.material.opacity = 0.5;
myGeometry.material.transparent = true;
scene.add( myGeometry );
//--------------- 创建几何体代码结束 --------------------------
const controls = new OrbitControls(camera, renderer.domElement);
camera.position.z = 20;
const light = new THREE.HemisphereLight(0xffffbb, 0x080820, 1);
scene.add(light);
const helper = new THREE.HemisphereLightHelper(light, 5);
scene.add(helper);
// 创建一个动画函数
function animate() {
// 请求下一帧动画
requestAnimationFrame(animate);
// 更新 OrbitControls
controls.update();
myGeometry.rotation.y += 0.01;
myGeometry.rotation.z += 0.01;
myGeometry.rotation.x += 0.01;
// 渲染场景
renderer.render(scene, camera);
helper.update();
}
animate()
PlaneHelper 用于可视化平面的辅助类,它创建了一个平面的线框表示。
THREE.PlaneHelper(plane, size, hex)
参数:
属性:
// 引入Three.js库的全部功能,并将其命名为THREE
import * as THREE from 'three';
// 引入交互控制器
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
// 创建一个场景
const scene = new THREE.Scene();
// 创建一个透视相机,参数分别为视野角度、视口宽高比、近端距离、远端距离
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 创建一个WebGL渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器的大小为窗口的宽度和高度
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器的canvas元素添加到HTML文档中的body标签中
document.body.appendChild(renderer.domElement);
//------------- 下面放创建几何体的代码 -----------------------
const myGeometry = new THREE.Plane(new THREE.Vector3(1, 1, 0.2), 5);
scene.add(myGeometry);
//--------------- 创建几何体代码结束 --------------------------
const controls = new OrbitControls(camera, renderer.domElement);
camera.position.z = 20;
const helper = new THREE.PlaneHelper(myGeometry, 10, 0xffff00);
scene.add(helper);
// 创建一个动画函数
function animate() {
// 请求下一帧动画
requestAnimationFrame(animate);
// 更新 OrbitControls
controls.update();
// 渲染场景
renderer.render(scene, camera);
helper.update();
}
animate()
运行效果:
PointLightHelper 创建了一个球形 Mesh 以辅助可视化点光源的效果。
THREE.PointLightHelper(light, sphereSize, color)
参数:
下面创建了一个白色的圆锥体,点光源颜色是 : #0xffff00:
// 引入Three.js库的全部功能,并将其命名为THREE
import * as THREE from 'three';
// 引入交互控制器
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
// 创建一个场景
const scene = new THREE.Scene();
// 创建一个透视相机,参数分别为视野角度、视口宽高比、近端距离、远端距离
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 创建一个WebGL渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器的大小为窗口的宽度和高度
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器的canvas元素添加到HTML文档中的body标签中
document.body.appendChild(renderer.domElement);
//------------- 下面放创建几何体的代码 -----------------------
const geometry = new THREE.ConeGeometry( 1, 1, 20, 40 );
const material = new THREE.MeshPhongMaterial( {color: 0xffffff} );
const myGeometry = new THREE.Mesh( geometry, material ); scene.add( myGeometry );
//--------------- 创建几何体代码结束 --------------------------
const controls = new OrbitControls(camera, renderer.domElement);
camera.position.z = 10;
// 创建点光源
const pointLight = new THREE.PointLight(0xffff00, 1, 100);
pointLight.position.set(1, 1, 2);
scene.add(pointLight);
const sphereSize = 1;
const pointLightHelper = new THREE.PointLightHelper(pointLight, sphereSize);
scene.add(pointLightHelper);
// 创建一个动画函数
function animate() {
// 请求下一帧动画
requestAnimationFrame(animate);
// 更新 OrbitControls
controls.update();
myGeometry.rotation.x += 0.01;
myGeometry.rotation.y += 0.01;
// 渲染场景
renderer.render(scene, camera);
}
animate()
运行效果:
SkeletonHelper 通过使用 LineBasicMaterial
渲染实现可视化骨骼。
本助手类将在后续章节详细介绍。
SpotLightHelper( light : SpotLight, color : Hex )
参数:
// 引入Three.js库的全部功能,并将其命名为THREE
import * as THREE from 'three';
// 引入交互控制器
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
// 创建一个场景
const scene = new THREE.Scene();
// 创建一个透视相机,参数分别为视野角度、视口宽高比、近端距离、远端距离
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 创建一个WebGL渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器的大小为窗口的宽度和高度
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器的canvas元素添加到HTML文档中的body标签中
document.body.appendChild(renderer.domElement);
//------------- 下面放创建几何体的代码 -----------------------
const geometry = new THREE.ConeGeometry( 1, 1, 20, 40 );
const material = new THREE.MeshPhongMaterial( {color: 0xffffff} );
const myGeometry = new THREE.Mesh( geometry, material ); scene.add( myGeometry );
//--------------- 创建几何体代码结束 --------------------------
const controls = new OrbitControls(camera, renderer.domElement);
camera.position.z = 10;
// 创建 SpotLight
const spotLight = new THREE.SpotLight(0xff0000);
spotLight.position.set(2, 2, 2);
scene.add(spotLight);
// 创建 SpotLightHelper
const spotLightHelper = new THREE.SpotLightHelper(spotLight, 0xff0000); // 可选:设置颜色
scene.add(spotLightHelper);
const helper = new THREE.SkeletonHelper(myGeometry);
scene.add(helper);
// 创建一个动画函数
function animate() {
// 请求下一帧动画
requestAnimationFrame(animate);
// 更新 OrbitControls
controls.update();
myGeometry.rotation.x += 0.01;
myGeometry.rotation.y += 0.01;
// 渲染场景
renderer.render(scene, camera);
}
animate()
运行效果: