Three.js基础功能学习一：环境资源及基础知识

军军君012025-12-27 15:01

Three.js是基于JavaScript的开源Web图形引擎，专注于在浏览器中创建和展示交互式3D图形与动画。该库通过封装WebGL技术，简化了底层图形编程的复杂性，提供包括场景管理、材质渲染、几何体生成等高级接口。

一、学习视频

three.js学习及项目实战：官网及基础知识

二、环境及资源

英文官网：https://threejs.org/

中文官网：http://www.webgl3d.cn/

三、资源导入及使用

可以通过以下方式引入资源：

html 复制代码 
<script type="module">
import * as THREE from 'three';
</script>

可通过以下创建dom元素，用于挂载绘制的图像数据：

html 复制代码 
<body>
  <canvas id="c"></canvas>
</body>

可以通过一下代码绘制一个简单的三维元素到界面上：

javascript 复制代码 
//创建一个场景
const scene = new THREE.Scene();
//创建摄像机
const camera = new THREE.PerspectiveCamera(220, window.innerWidth / window.innerHeight, 0.1, 1000);
//创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
//渲染到元素上
renderer.render(scene, camera);

四、基础的公共资源

4.1图元

图元就是一些 3D 的形状，在运行时根据大量参数生成。

  1. BoxGeometry 盒子
  • width --- X 轴上面的宽度，默认值为 1。
  • height --- Y 轴上面的高度，默认值为 1。
  • depth --- Z 轴上面的深度，默认值为 1。
  • widthSegments --- （可选）宽度的分段数，默认值是 1。
  • heightSegments --- （可选）高度的分段数，默认值是 1。
  • depthSegments --- （可选）深度的分段数，默认值是 1。
javascript 复制代码 
// 方式 1: 导入整个 three.js核心库
import * as THREE from 'three';
//立方缓冲几何体
export default () => {
    //创建一个场景
    const scene = new THREE.Scene();

    //创建摄像机
    const camera = new THREE.PerspectiveCamera(220, window.innerWidth / window.innerHeight, 0.1, 1000);

    //创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    /**
     *  width --- X 轴上面的宽度，默认值为 1。
        height --- Y 轴上面的高度，默认值为 1。
        depth --- Z 轴上面的深度，默认值为 1。
        widthSegments --- （可选）宽度的分段数，默认值是 1。
        heightSegments --- （可选）高度的分段数，默认值是 1。
        depthSegments --- （可选）深度的分段数，默认值是 1。
     */
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); 
    const cube = new THREE.Mesh( geometry, material ); 

    scene.add(cube);

    camera.position.z = 5;
    camera.position.y = 3;
    camera.position.x = 3;
    //渲染到元素上
    renderer.render(scene, camera);
}
  1. CircleGeometry 平面园
  • radius --- 圆形的半径，默认值为1
  • segments --- 分段（三角面）的数量，最小值为3，默认值为32。
  • thetaStart --- 第一个分段的起始角度，默认为0。（three o'clock position）
  • thetaLength --- 圆形扇区的中心角，通常被称为"θ"（西塔）。默认值是2*Pi，这使其成为一个完整的圆。
javascript 复制代码 
// 方式 1: 导入整个 three.js核心库
import * as THREE from 'three';
//圆形缓冲几何体
export default () => {
    //创建一个场景
    const scene = new THREE.Scene();

    //创建摄像机
    const camera = new THREE.PerspectiveCamera(220, window.innerWidth / window.innerHeight, 0.1, 1000);

    //创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    /**
     *  radius --- 圆形的半径，默认值为1
        segments --- 分段（三角面）的数量，最小值为3，默认值为32。
        thetaStart --- 第一个分段的起始角度，默认为0。（three o'clock position）
        thetaLength --- 圆形扇区的中心角，通常被称为"θ"（西塔）。默认值是2*Pi，这使其成为一个完整的圆。
     */
    const geometry = new THREE.CircleGeometry(10,15,45,Math.PI);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const circle = new THREE.Mesh( geometry, material );
    scene.add(circle);

    camera.position.z = 15;
    camera.position.y = 13;
    camera.position.x = -13;
    //渲染到元素上
    renderer.render(scene, camera);
}
  1. ConeGeometry 锥形体
  • radius --- 圆锥底部的半径，默认值为1。
  • height --- 圆锥的高度，默认值为1。
  • radialSegments --- 圆锥侧面周围的分段数，默认为32。
  • heightSegments --- 圆锥侧面沿着其高度的分段数，默认值为1。
  • openEnded --- 一个Boolean值，指明该圆锥的底面是开放的还是封顶的。默认值为false，即其底面默认是封顶的。
  • thetaStart --- 第一个分段的起始角度，默认为0。（three o'clock position）
  • thetaLength --- 圆锥底面圆扇区的中心角，通常被称为"θ"（西塔）。默认值是2*Pi，这使其成为一个完整的圆锥。
javascript 复制代码 
// 方式 1: 导入整个 three.js核心库
import * as THREE from 'three';
//圆锥缓冲几何体
export default () => {
    //创建一个场景
    const scene = new THREE.Scene();

    //创建摄像机
    const camera = new THREE.PerspectiveCamera(220, window.innerWidth / window.innerHeight, 0.1, 1000);

    //创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    /**
     *  radius --- 圆锥底部的半径，默认值为1。
        height --- 圆锥的高度，默认值为1。
        radialSegments --- 圆锥侧面周围的分段数，默认为32。
        heightSegments --- 圆锥侧面沿着其高度的分段数，默认值为1。
        openEnded --- 一个Boolean值，指明该圆锥的底面是开放的还是封顶的。默认值为false，即其底面默认是封顶的。
        thetaStart --- 第一个分段的起始角度，默认为0。（three o'clock position）
        thetaLength --- 圆锥底面圆扇区的中心角，通常被称为"θ"（西塔）。默认值是2*Pi，这使其成为一个完整的圆锥。
     */
    const geometry = new THREE.ConeGeometry(10,100,11,2,false,45,Math.PI);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const circle = new THREE.Mesh( geometry, material );
    scene.add(circle);

    camera.position.z = 15;
    camera.position.y = 13;
    //渲染到元素上
    renderer.render(scene, camera);
}
  1. CylinderGeometry 圆柱体
  • radiusTop --- 圆柱的顶部半径，默认值是1。
  • radiusBottom --- 圆柱的底部半径，默认值是1。
  • height --- 圆柱的高度，默认值是1。
  • radialSegments --- 圆柱侧面周围的分段数，默认为32。
  • heightSegments --- 圆柱侧面沿着其高度的分段数，默认值为1。
  • openEnded --- 一个Boolean值，指明该圆锥的底面是开放的还是封顶的。默认值为false，即其底面默认是封顶的。
  • thetaStart --- 第一个分段的起始角度，默认为0。（three o'clock position）
  • thetaLength --- 圆柱底面圆扇区的中心角，通常被称为"θ"（西塔）。默认值是2*Pi，这使其成为一个完整的圆柱。
javascript 复制代码 
// 方式 1: 导入整个 three.js核心库
import * as THREE from 'three';
//圆柱缓冲几何体radiusTop --- 圆柱的顶部半径，默认值是1。
export default () => {
    //创建一个场景
    const scene = new THREE.Scene();

    //创建摄像机
    const camera = new THREE.PerspectiveCamera(220, window.innerWidth / window.innerHeight, 0.1, 1000);

    //创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    /**
     *  radiusTop --- 圆柱的顶部半径，默认值是1。
        radiusBottom --- 圆柱的底部半径，默认值是1。
        height --- 圆柱的高度，默认值是1。
        radialSegments --- 圆柱侧面周围的分段数，默认为32。
        heightSegments --- 圆柱侧面沿着其高度的分段数，默认值为1。
        openEnded --- 一个Boolean值，指明该圆锥的底面是开放的还是封顶的。默认值为false，即其底面默认是封顶的。
        thetaStart --- 第一个分段的起始角度，默认为0。（three o'clock position）
        thetaLength --- 圆柱底面圆扇区的中心角，通常被称为"θ"（西塔）。默认值是2*Pi，这使其成为一个完整的圆柱。
     */
    const geometry = new THREE.CylinderGeometry(20,20,10,32,1,false);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const circle = new THREE.Mesh( geometry, material );
    scene.add(circle);

    camera.position.z = 15;
    camera.position.y = 13;
    //渲染到元素上
    renderer.render(scene, camera);
}
  1. DodecahedronGeometry 十二面体
  • radius --- 十二面体的半径，默认值为1。
  • detail --- 默认值为0。将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个十二面体。
javascript 复制代码 
// 方式 1: 导入整个 three.js核心库
import * as THREE from 'three';
//十二面缓冲几何体
export default () => {
    //创建一个场景
    const scene = new THREE.Scene();

    //创建摄像机
    const camera = new THREE.PerspectiveCamera(220, window.innerWidth / window.innerHeight, 0.1, 1000);

    //创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    /**
     *  radius --- 十二面体的半径，默认值为1。
        detail --- 默认值为0。将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个十二面体。
     */
    const geometry = new THREE.DodecahedronGeometry (10,2);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const circle = new THREE.Mesh( geometry, material );
    scene.add(circle);

    camera.position.z = 15;
    camera.position.y = 13;
    //渲染到元素上
    renderer.render(scene, camera);
}
  1. ExtrudeGeometry 受挤压的 2D 形状
  • shapes --- 形状或者一个包含形状的数组。
  • options --- 一个包含有下列参数的对象：
    • curveSegments --- int，曲线上点的数量，默认值是12。
    • steps --- int，用于沿着挤出样条的深度细分的点的数量，默认值为1。
    • depth --- float，挤出的形状的深度，默认值为1。
    • bevelEnabled --- bool，对挤出的形状应用是否斜角，默认值为true。
    • bevelThickness --- float，设置原始形状上斜角的厚度。默认值为0.2。
    • bevelSize --- float。斜角与原始形状轮廓之间的延伸距离，默认值为bevelThickness-0.1。
    • bevelOffset --- float. Distance from the shape outline that the bevel starts. Default is 0.
    • bevelSegments --- int。斜角的分段层数，默认值为3。
    • extrudePath --- THREE.Curve对象。一条沿着被挤出形状的三维样条线。Bevels not supported for path extrusion.
  • UVGenerator --- Object。提供了UV生成器函数的对象。
javascript 复制代码 
// 方式 1: 导入整个 three.js核心库
import * as THREE from 'three';
//挤压缓冲几何体
export default () => {
    //创建一个场景
    const scene = new THREE.Scene();

    //创建摄像机
    const camera = new THREE.PerspectiveCamera(220, window.innerWidth / window.innerHeight, 0.1, 1000);

    //创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    /**
     *  shapes --- 形状或者一个包含形状的数组。
        options --- 一个包含有下列参数的对象：

        curveSegments --- int，曲线上点的数量，默认值是12。
        steps --- int，用于沿着挤出样条的深度细分的点的数量，默认值为1。
        depth --- float，挤出的形状的深度，默认值为1。
        bevelEnabled --- bool，对挤出的形状应用是否斜角，默认值为true。
        bevelThickness --- float，设置原始形状上斜角的厚度。默认值为0.2。
        bevelSize --- float。斜角与原始形状轮廓之间的延伸距离，默认值为bevelThickness-0.1。
        bevelOffset --- float. Distance from the shape outline that the bevel starts. Default is 0.
        bevelSegments --- int。斜角的分段层数，默认值为3。
        extrudePath --- THREE.Curve对象。一条沿着被挤出形状的三维样条线。Bevels not supported for path extrusion.
        UVGenerator --- Object。提供了UV生成器函数的对象。
     */
    const length = 5, width = 5;

    const shape = new THREE.Shape();
    shape.moveTo( 0,0 );
    shape.lineTo( 0, width );
    shape.lineTo( length, width );
    shape.lineTo( length, 0 );
    shape.lineTo( 0, 0 );

    const extrudeSettings = {
        steps: 2,
        depth: 16,
        bevelEnabled: true,
        bevelThickness: 1,
        bevelSize: 1,
        bevelOffset: 0,
        bevelSegments: 1
    };

    const geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const circle = new THREE.Mesh( geometry, material );
    scene.add(circle);

    camera.position.z = 15;
    camera.position.y = 13;
    //渲染到元素上
    renderer.render(scene, camera);
}
  1. IcosahedronGeometry 二十面体
  • radius --- 二十面体的半径，默认为1。
  • detail --- 默认值为0。将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个二十面体。当这个值大于1的时候，实际上它将变成一个球体。
javascript 复制代码 
// 方式 1: 导入整个 three.js核心库
import * as THREE from 'three';
//二十面缓冲几何体
export default () => {
    //创建一个场景
    const scene = new THREE.Scene();

    //创建摄像机
    const camera = new THREE.PerspectiveCamera(220, window.innerWidth / window.innerHeight, 0.1, 1000);

    //创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    /**
     *  radius --- 二十面体的半径，默认为1。
        detail --- 默认值为0。将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个二十面体。当这个值大于1的时候，实际上它将变成一个球体。
     */
    const geometry = new THREE.IcosahedronGeometry (10);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const circle = new THREE.Mesh( geometry, material );
    scene.add(circle);

    camera.position.z = 15;
    camera.position.y = 13;
    //渲染到元素上
    renderer.render(scene, camera);
}
  1. LatheGeometry 绕着一条线旋转形成的形状
  • points --- 一个Vector2对象数组。每个点的X坐标必须大于0。 Default is an array with (0,-0.5), (0.5,0) and (0,0.5) which creates a simple diamond shape.
  • segments --- 要生成的车削几何体圆周分段的数量，默认值是12。
  • phiStart --- 以弧度表示的起始角度，默认值为0。
  • phiLength --- 车削部分的弧度（0-2PI）范围，2PI将是一个完全闭合的、完整的车削几何体，小于2PI是部分的车削。默认值是2PI。
javascript 复制代码 
// 方式 1: 导入整个 three.js核心库
import * as THREE from 'three';
//车削缓冲几何体
export default () => {
    //创建一个场景
    const scene = new THREE.Scene();

    //创建摄像机
    const camera = new THREE.PerspectiveCamera(220, window.innerWidth / window.innerHeight, 0.1, 1000);

    //创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    /**
     *  points --- 一个Vector2对象数组。每个点的X坐标必须大于0。 Default is an array with (0,-0.5), (0.5,0) and (0,0.5) which creates a simple diamond shape.
        segments --- 要生成的车削几何体圆周分段的数量，默认值是12。
        phiStart --- 以弧度表示的起始角度，默认值为0。
        phiLength --- 车削部分的弧度（0-2PI）范围，2PI将是一个完全闭合的、完整的车削几何体，小于2PI是部分的车削。默认值是2PI。
     */
    const points = [];
    for ( let i = 0; i < 10; i ++ ) {
        points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * 10 + 5, ( i - 5 ) * 2 ) );
    }
    const geometry = new THREE.LatheGeometry( points );
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const circle = new THREE.Mesh( geometry, material );
    scene.add(circle);

    camera.position.z = 15;
    camera.position.y = 13;
    //渲染到元素上
    renderer.render(scene, camera);
}
  1. OctahedronGeometry 八面体
  • radius --- 八面体的半径，默认值为1。
  • detail --- 默认值为0，将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个八面体。
javascript 复制代码 
// 方式 1: 导入整个 three.js核心库
import * as THREE from 'three';
//八面缓冲几何体radius --- 八面体的半径，默认值为1。
export default () => {
    //创建一个场景
    const scene = new THREE.Scene();

    //创建摄像机
    const camera = new THREE.PerspectiveCamera(220, window.innerWidth / window.innerHeight, 0.1, 1000);

    //创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    /**
     * radius --- 八面体的半径，默认值为1。
     * detail --- 默认值为0，将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个八面体。
     */
    const geometry = new THREE.OctahedronGeometry( 20 );
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const circle = new THREE.Mesh( geometry, material );
    scene.add(circle);

    camera.position.z = 15;
    camera.position.y = 13;
    //渲染到元素上
    renderer.render(scene, camera);
}
  1. ParametricGeometry 通过提供一个函数（将网格中 2D 的点转成对应的 3D 点）生成的表面。
  • func --- A function that takes in a u and v value each between 0 and 1 and modifies a third Vector3 argument. Default is a function that generates a curved plane surface.
  • slices --- The count of slices to use for the parametric function. Default is 8.
  • stacks --- The count of stacks to use for the parametric function. Default is 8.
javascript 复制代码 
// 方式 1: 导入整个 three.js核心库
import * as THREE from 'three';
import { ParametricGeometry } from 'three/addons/geometries/ParametricGeometry.js';
function klein( v:number, u:number, target ) {

	u *= Math.PI;
	v *= 2 * Math.PI;
	u = u * 2;

	let x;
	let z;

	if ( u < Math.PI ) {

		x = 3 * Math.cos( u ) * ( 1 + Math.sin( u ) ) + ( 2 * ( 1 - Math.cos( u ) / 2 ) ) * Math.cos( u ) * Math.cos( v );
		z = - 8 * Math.sin( u ) - 2 * ( 1 - Math.cos( u ) / 2 ) * Math.sin( u ) * Math.cos( v );

	} else {

		x = 3 * Math.cos( u ) * ( 1 + Math.sin( u ) ) + ( 2 * ( 1 - Math.cos( u ) / 2 ) ) * Math.cos( v + Math.PI );
		z = - 8 * Math.sin( u );

	}

	const y = - 2 * ( 1 - Math.cos( u ) / 2 ) * Math.sin( v );

	target.set( x, y, z ).multiplyScalar( 0.75 );
}

//八面缓冲几何体radius --- 八面体的半径，默认值为1。
export default () => {
    //创建一个场景
    const scene = new THREE.Scene();

    //创建摄像机
    const camera = new THREE.PerspectiveCamera(220, window.innerWidth / window.innerHeight, 0.1, 1000);

    //创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    /**
     *  func --- A function that takes in a u and v value each between 0 and 1 and modifies a third Vector3 argument. Default is a function that generates a curved plane surface.
        slices --- The count of slices to use for the parametric function. Default is 8.
        stacks --- The count of stacks to use for the parametric function. Default is 8.
     */
    const geometry = new ParametricGeometry( klein );
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const circle = new THREE.Mesh( geometry, material );
    scene.add(circle);

    camera.position.z = 15;
    camera.position.y = 13;
    //渲染到元素上
    renderer.render(scene, camera);
}
  1. PlaneGeometry 2D平面
  • width --- 平面沿着 X 轴的宽度。默认值是 1。
  • height --- 平面沿着 Y 轴的高度。默认值是 1。
  • widthSegments --- （可选）平面的宽度分段数，默认值是 1。
  • heightSegments --- （可选）平面的高度分段数，默认值是 1。
javascript 复制代码 
// 方式 1: 导入整个 three.js核心库
import * as THREE from 'three';
//平面缓冲几何体
export default () => {
    //创建一个场景
    const scene = new THREE.Scene();

    //创建摄像机
    const camera = new THREE.PerspectiveCamera(220, window.innerWidth / window.innerHeight, 0.1, 1000);

    //创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    /**
     *  width --- 平面沿着 X 轴的宽度。默认值是 1。
        height --- 平面沿着 Y 轴的高度。默认值是 1。
        widthSegments --- （可选）平面的宽度分段数，默认值是 1。
        heightSegments --- （可选）平面的高度分段数，默认值是 1。
     */
    const geometry = new THREE.PlaneGeometry( 10,10 );
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const circle = new THREE.Mesh( geometry, material );
    scene.add(circle);

    camera.position.z = 15;
    camera.position.y = 5;
    //渲染到元素上
    renderer.render(scene, camera);
}
  1. PolyhedronGeometry 将一些环绕着中心点的三角形投影到球体上
  • vertices --- 一个顶点Array（数组）：[1,1,1, -1,-1,-1, ... ]。
  • indices --- 一个构成面的索引Array（数组）， [0,1,2, 2,3,0, ... ]。
  • radius --- Float - 最终形状的半径。
  • detail --- Integer - 将对这个几何体细分多少个级别。细节越多，形状就越平滑。
javascript 复制代码 
// 方式 1: 导入整个 three.js核心库
import * as THREE from 'three';
//多面缓冲几何体
export default () => {
    //创建一个场景
    const scene = new THREE.Scene();

    //创建摄像机
    const camera = new THREE.PerspectiveCamera(220, window.innerWidth / window.innerHeight, 0.1, 1000);

    //创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    /**
     *  vertices --- 一个顶点Array（数组）：[1,1,1, -1,-1,-1, ... ]。
        indices --- 一个构成面的索引Array（数组）， [0,1,2, 2,3,0, ... ]。
        radius --- Float - 最终形状的半径。
        detail --- Integer - 将对这个几何体细分多少个级别。细节越多，形状就越平滑。
     */
    const verticesOfCube = [
        -1,-1,-1,    1,-1,-1,    1, 1,-1,    -1, 1,-1,
        -1,-1, 1,    1,-1, 1,    1, 1, 1,    -1, 1, 1,
    ];

    const indicesOfFaces = [
        2,1,0,    0,3,2,
        0,4,7,    7,3,0,
        0,1,5,    5,4,0,
        1,2,6,    6,5,1,
        2,3,7,    7,6,2,
        4,5,6,    6,7,4
    ];
    const geometry = new THREE.PolyhedronGeometry( verticesOfCube,indicesOfFaces,10 );
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const circle = new THREE.Mesh( geometry, material );
    scene.add(circle);

    camera.position.z = 15;
    camera.position.y = 5;
    //渲染到元素上
    renderer.render(scene, camera);
}
  1. RingGeometry 中间有洞的 2D 圆盘
  • innerRadius --- 内部半径，默认值为0.5。
  • outerRadius --- 外部半径，默认值为1。
  • thetaSegments --- 圆环的分段数。这个值越大，圆环就越圆。最小值为3，默认值为32。
  • phiSegments --- 圆环半径的分段数字。最小值为1，默认值为1。
  • thetaStart --- 起始角度，默认值为0。
  • thetaLength --- 圆心角，默认值为Math.PI * 2。
  • const geometry = new THREE.RingGeometry( 10,20,10 );
javascript 复制代码 
// 方式 1: 导入整个 three.js核心库
import * as THREE from 'three';
//圆环缓冲几何体
export default () => {
    //创建一个场景
    const scene = new THREE.Scene();

    //创建摄像机
    const camera = new THREE.PerspectiveCamera(220, window.innerWidth / window.innerHeight, 0.1, 1000);

    //创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    /**
     *  innerRadius --- 内部半径，默认值为0.5。
        outerRadius --- 外部半径，默认值为1。
        thetaSegments --- 圆环的分段数。这个值越大，圆环就越圆。最小值为3，默认值为32。
        phiSegments --- 圆环半径的分段数字。最小值为1，默认值为1。
        thetaStart --- 起始角度，默认值为0。
        thetaLength --- 圆心角，默认值为Math.PI * 2。
     */
    const geometry = new THREE.RingGeometry( 10,20,10 );
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const circle = new THREE.Mesh( geometry, material );
    scene.add(circle);

    camera.position.z = 15;
    camera.position.y = 5;
    //渲染到元素上
    renderer.render(scene, camera);
}
  1. ShapeGeometry 2D 的三角轮廓
  • shapes --- 一个单独的shape，或者一个包含形状的Array。Default is a single triangle shape.
  • curveSegments - Integer - 每一个形状的分段数，默认值为12。
javascript 复制代码 
// 方式 1: 导入整个 three.js核心库
import * as THREE from 'three';
//形状缓冲几何体
export default () => {
    //创建一个场景
    const scene = new THREE.Scene();

    //创建摄像机
    const camera = new THREE.PerspectiveCamera(220, window.innerWidth / window.innerHeight, 0.1, 1000);

    //创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    /**
     *  shapes --- 一个单独的shape，或者一个包含形状的Array。Default is a single triangle shape.
        curveSegments - Integer - 每一个形状的分段数，默认值为12。
     */
    const x = 0, y = 0;

    const heartShape = new THREE.Shape();

    heartShape.moveTo( x + 5, y + 5 );
    heartShape.bezierCurveTo( x + 5, y + 5, x + 4, y, x, y );
    heartShape.bezierCurveTo( x - 6, y, x - 6, y + 7,x - 6, y + 7 );
    heartShape.bezierCurveTo( x - 6, y + 11, x - 3, y + 15.4, x + 5, y + 19 );
    heartShape.bezierCurveTo( x + 12, y + 15.4, x + 16, y + 11, x + 16, y + 7 );
    heartShape.bezierCurveTo( x + 16, y + 7, x + 16, y, x + 10, y );
    heartShape.bezierCurveTo( x + 7, y, x + 5, y + 5, x + 5, y + 5 );

    const geometry = new THREE.ShapeGeometry( heartShape );
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const circle = new THREE.Mesh( geometry, material );
    scene.add(circle);

    camera.position.z = 15;
    camera.position.y = 5;
    //渲染到元素上
    renderer.render(scene, camera);
}
  1. SphereGeometry 球体
  • radius --- 球体半径，默认为1。
  • widthSegments --- 水平分段数（沿着经线分段），最小值为3，默认值为32。
  • heightSegments --- 垂直分段数（沿着纬线分段），最小值为2，默认值为16。
  • phiStart --- 指定水平（经线）起始角度，默认值为0。。
  • phiLength --- 指定水平（经线）扫描角度的大小，默认值为 Math.PI * 2。
  • thetaStart --- 指定垂直（纬线）起始角度，默认值为0。
  • thetaLength --- 指定垂直（纬线）扫描角度大小，默认值为 Math.PI。
javascript 复制代码 
// 方式 1: 导入整个 three.js核心库
import * as THREE from 'three';
//球缓冲几何体
export default () => {
    //创建一个场景
    const scene = new THREE.Scene();

    //创建摄像机
    const camera = new THREE.PerspectiveCamera(220, window.innerWidth / window.innerHeight, 0.1, 1000);

    //创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    /**
     *  radius --- 球体半径，默认为1。
        widthSegments --- 水平分段数（沿着经线分段），最小值为3，默认值为32。
        heightSegments --- 垂直分段数（沿着纬线分段），最小值为2，默认值为16。
        phiStart --- 指定水平（经线）起始角度，默认值为0。。
        phiLength --- 指定水平（经线）扫描角度的大小，默认值为 Math.PI * 2。
        thetaStart --- 指定垂直（纬线）起始角度，默认值为0。
        thetaLength --- 指定垂直（纬线）扫描角度大小，默认值为 Math.PI。
     */

    const geometry = new THREE.SphereGeometry( 10 );
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const circle = new THREE.Mesh( geometry, material );
    scene.add(circle);

    camera.position.z = 15;
    camera.position.y = 5;
    //渲染到元素上
    renderer.render(scene, camera);
}
  1. TetrahedronGeometry 四面体
  • radius --- 四面体的半径，默认值为1。
  • detail --- 默认值为0。将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个四面体。
javascript 复制代码 
// 方式 1: 导入整个 three.js核心库
import * as THREE from 'three';
//四面缓冲几何体
export default () => {
    //创建一个场景
    const scene = new THREE.Scene();

    //创建摄像机
    const camera = new THREE.PerspectiveCamera(220, window.innerWidth / window.innerHeight, 0.1, 1000);

    //创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    /**
     *  radius --- 四面体的半径，默认值为1。
        detail --- 默认值为0。将这个值设为一个大于0的数将会为它增加一些顶点，使其不再是一个四面体。
     */

    const geometry = new THREE.TetrahedronGeometry( 10 );
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const circle = new THREE.Mesh( geometry, material );
    scene.add(circle);

    camera.position.z = 15;
    camera.position.y = 5;
    //渲染到元素上
    renderer.render(scene, camera);
}
  1. TextGeometry根据 3D 字体和字符串生成的 3D 文字
  • text --- 将要显示的文本。
  • parameters --- 包含有下列参数的对象：
  • font --- THREE.Font的实例。
  • size --- Float。字体大小，默认值为100。
  • depth --- Float。挤出文本的厚度。默认值为50。
  • curveSegments --- Integer。（表示文本的）曲线上点的数量。默认值为12。
  • bevelEnabled --- Boolean。是否开启斜角，默认为false。
  • bevelThickness --- Float。文本上斜角的深度，默认值为20。
  • bevelSize --- Float。斜角与原始文本轮廓之间的延伸距离。默认值为8。
  • bevelSegments --- Integer。斜角的分段数。默认值为3。
javascript 复制代码 
// 方式 1: 导入整个 three.js核心库
import * as THREE from 'three';
import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
//文本缓冲几何体
export default () => {
    //创建一个场景
    const scene = new THREE.Scene();

    //创建摄像机
    const camera = new THREE.PerspectiveCamera(220, window.innerWidth / window.innerHeight, 0.1, 1000);

    //创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    /**
     *  text --- 将要显示的文本。
        parameters --- 包含有下列参数的对象：
            font --- THREE.Font的实例。
            size --- Float。字体大小，默认值为100。
            depth --- Float。挤出文本的厚度。默认值为50。
            curveSegments --- Integer。（表示文本的）曲线上点的数量。默认值为12。
            bevelEnabled --- Boolean。是否开启斜角，默认为false。
            bevelThickness --- Float。文本上斜角的深度，默认值为20。
            bevelSize --- Float。斜角与原始文本轮廓之间的延伸距离。默认值为8。
            bevelSegments --- Integer。斜角的分段数。默认值为3。
     */

    const geometry = new TextGeometry("junjunjun", {
        size: 20,
		depth: 5,
		curveSegments: 12,
		bevelEnabled: true,
		bevelThickness: 10,
		bevelSize: 8,
		bevelSegments: 5
    } );
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const circle = new THREE.Mesh( geometry, material );
    scene.add(circle);

    camera.position.z = 15;
    camera.position.y = 0;
    //渲染到元素上
    renderer.render(scene, camera);
}
  1. TorusGeometry 圆环体（甜甜圈）
  • radius - 环面的半径，从环面的中心到管道横截面的中心。默认值是1。
  • tube --- 管道的半径，默认值为0.4。
  • radialSegments --- 管道横截面的分段数，默认值为12。
  • tubularSegments --- 管道的分段数，默认值为48。
  • arc --- 圆环的圆心角（单位是弧度），默认值为Math.PI * 2。
javascript 复制代码 
// 方式 1: 导入整个 three.js核心库
import * as THREE from 'three';
//圆环缓冲几何体
export default () => {
    //创建一个场景
    const scene = new THREE.Scene();

    //创建摄像机
    const camera = new THREE.PerspectiveCamera(220, window.innerWidth / window.innerHeight, 0.1, 1000);

    //创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    /**
     *  radius - 环面的半径，从环面的中心到管道横截面的中心。默认值是1。
        tube --- 管道的半径，默认值为0.4。
        radialSegments --- 管道横截面的分段数，默认值为12。
        tubularSegments --- 管道的分段数，默认值为48。
        arc --- 圆环的圆心角（单位是弧度），默认值为Math.PI * 2。
     */

    const geometry =  new THREE.TorusGeometry( 10, 3, 16, 100 );
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const circle = new THREE.Mesh( geometry, material );
    scene.add(circle);

    camera.position.z = 15;
    camera.position.y = 0;
    //渲染到元素上
    renderer.render(scene, camera);
}
  1. TorusKnotGeometry 环形节
  • radius - 圆环的半径，默认值为1。
  • tube --- 管道的半径，默认值为0.4。
  • tubularSegments --- 管道的分段数量，默认值为64。
  • radialSegments --- 横截面分段数量，默认值为8。
  • p --- 这个值决定了几何体将绕着其旋转对称轴旋转多少次，默认值是2。
  • q --- 这个值决定了几何体将绕着其内部圆环旋转多少次，默认值是3。
javascript 复制代码 
// 方式 1: 导入整个 three.js核心库
import * as THREE from 'three';
//圆环缓冲扭结几何体
export default () => {
    //创建一个场景
    const scene = new THREE.Scene();

    //创建摄像机
    const camera = new THREE.PerspectiveCamera(220, window.innerWidth / window.innerHeight, 0.1, 1000);

    //创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    /**
     *  radius - 圆环的半径，默认值为1。
        tube --- 管道的半径，默认值为0.4。
        tubularSegments --- 管道的分段数量，默认值为64。
        radialSegments --- 横截面分段数量，默认值为8。
        p --- 这个值决定了几何体将绕着其旋转对称轴旋转多少次，默认值是2。
        q --- 这个值决定了几何体将绕着其内部圆环旋转多少次，默认值是3。
     */
    const geometry =  new THREE.TorusKnotGeometry( 10, 3, 100, 16 );
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const circle = new THREE.Mesh( geometry, material );
    scene.add(circle);

    camera.position.z = 15;
    camera.position.y = 0;
    //渲染到元素上
    renderer.render(scene, camera);
}
  1. TubeGeometry 圆环沿着路径
  • path --- Curve - 一个由基类Curve继承而来的3D路径。 Default is a quadratic bezier curve.
  • tubularSegments --- Integer - 组成这一管道的分段数，默认值为64。
  • radius --- Float - 管道的半径，默认值为1。
  • radialSegments --- Integer - 管道横截面的分段数目，默认值为8。
  • closed --- Boolean 管道的两端是否闭合，默认值为false。
javascript 复制代码 
// 方式 1: 导入整个 three.js核心库
import * as THREE from 'three';
//管道缓冲几何体

class CustomSinCurve extends THREE.Curve {
    scale: number;

    constructor( scale = 1 ) {

        super();

        this.scale = scale;

    }

    getPoint( t, optionalTarget = new THREE.Vector3() ) {

        const tx = t * 3 - 1.5;
        const ty = Math.sin( 2 * Math.PI * t );
        const tz = 0;

        return optionalTarget.set( tx, ty, tz ).multiplyScalar( this.scale );

    }

}
export default () => {
    //创建一个场景
    const scene = new THREE.Scene();

    //创建摄像机
    const camera = new THREE.PerspectiveCamera(220, window.innerWidth / window.innerHeight, 0.1, 1000);

    //创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    /**
     *  path --- Curve - 一个由基类Curve继承而来的3D路径。 Default is a quadratic bezier curve.
        tubularSegments --- Integer - 组成这一管道的分段数，默认值为64。
        radius --- Float - 管道的半径，默认值为1。
        radialSegments --- Integer - 管道横截面的分段数目，默认值为8。
        closed --- Boolean 管道的两端是否闭合，默认值为false。
     */

    const path = new CustomSinCurve( 10 );
    const geometry = new THREE.TubeGeometry( path, 20, 2, 8, false );
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const circle = new THREE.Mesh( geometry, material );
    scene.add(circle);

    camera.position.z = 15;
    camera.position.y = 5;
    //渲染到元素上
    renderer.render(scene, camera);
}
  1. EdgesGeometry 一个工具对象，将一个几何体作为输入，生成面夹角大于某个阈值的那条边。
  • geometry --- 任何一个几何体对象。
  • thresholdAngle --- 仅当相邻面的法线之间的角度（单位为角度）超过这个值时，才会渲染边缘。默认值为1。
javascript 复制代码 
// 方式 1: 导入整个 three.js核心库
import * as THREE from 'three';
//边缘几何体
export default () => {
    //创建一个场景
    const scene = new THREE.Scene();

    //创建摄像机
    const camera = new THREE.PerspectiveCamera(220, window.innerWidth / window.innerHeight, 0.1, 1000);

    //创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    /**
     *  geometry --- 任何一个几何体对象。
        thresholdAngle --- 仅当相邻面的法线之间的角度（单位为角度）超过这个值时，才会渲染边缘。默认值为1。
     */
    const geometry = new THREE.BoxGeometry( 100, 100, 100 );
    const edges = new THREE.EdgesGeometry( geometry );
    const line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { color: 0xffffff } ) );
    scene.add(line);

    camera.position.z = 15;
    camera.position.y = 5;
    //渲染到元素上
    renderer.render(scene, camera);
}
  1. WireframeGeometry 对于给定的几何体，生成每个边包含一个线段（2 个点）的几何体。
  • geometry --- 任意几何体对象。
javascript 复制代码 
// 方式 1: 导入整个 three.js核心库
import * as THREE from 'three';
//网格几何体
export default () => {
    //创建一个场景
    const scene = new THREE.Scene();

    //创建摄像机
    const camera = new THREE.PerspectiveCamera(220, window.innerWidth / window.innerHeight, 0.1, 1000);

    //创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    /**
     *  geometry --- 任意几何体对象。
     */
    const geometry = new THREE.SphereGeometry( 10, 10, 10 );
    const wireframe = new THREE.WireframeGeometry( geometry );
    const line = new THREE.LineSegments( wireframe );
    line.material.depthTest = false;
    line.material.opacity = 0.25;
    line.material.transparent = true;
    scene.add(line);

    camera.position.z = 15;
    camera.position.y = 5;
    //渲染到元素上
    renderer.render(scene, camera);
}
相关推荐
千寻girling2 小时前
面试官: “ 请你说一下什么是 ajax ? ”
前端·javascript
是垚不是土2 小时前
基于DDNS-Go动态域名解析配置：实现多网络线路冗余切换方案
运维·开发语言·网络·阿里云·golang·运维开发
@大迁世界2 小时前
JavaScript 框架的终结
开发语言·前端·javascript·ecmascript
catchadmin2 小时前
PHP True Async 最近进展以及背后的争议
开发语言·php
PPPPickup2 小时前
easychat项目复盘---管理端系统设置
java·开发语言·前端
挖矿大亨2 小时前
C++中的this指针
java·开发语言·c++
梦6502 小时前
Vue 实现动态路由
前端·javascript·vue.js
姜糖编程日记2 小时前
C++——初识（2）
开发语言·前端·c++
ECT-OS-JiuHuaShan2 小时前
麻烦是第一推动力，不厌其烦就是负熵流
开发语言·人工智能·数学建模·学习方法·量子计算
热门推荐
01GitHub 镜像站点02从快手“12·22”直播攻击事件看：一次教科书式的业务层饱和攻击033D 圣诞树网页代码04电脑检测软件—图吧工具箱05Linux下V2Ray安装配置指南06UV安装并设置国内源07在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）08jdk21下载、安装（Windows、Linux、macOS）09Gemini3 生成的基于手势控制3D粒子圣诞树10Claude Code Skills 实用使用手册