53. Three.js案例-使用样条曲线绘制3D图形

原创已于 2025-01-06 09:29:52 修改 · 931 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#Three.js #WebGL #样条曲线 #3D图形

于 2025-01-06 09:18:18 首次发布

Threejs 专栏收录该内容

65 篇文章

订阅专栏

53. Three.js案例-使用样条曲线绘制3D图形

实现效果

该案例使用Three.js创建了一个基于样条曲线的3D图形，并为其添加了纹理映射和线框盒。通过三角函数生成样条曲线上的点，然后利用这些点创建一个旋转体（Lathe
Geometry），并用指定的纹理贴图进行渲染。最后，为该旋转体添加了一个红色的线框盒，以展示其边界。

知识点

WebGLRenderer

用于创建WebGL渲染器对象，它负责将场景中的所有元素渲染到页面上。

构造器

WebGLRenderer(parameters : Object)

参数	类型	描述
parameters	Object	渲染器配置参数，如抗锯齿设置等

antialias: 布尔值，默认为false。如果设置为true，则开启抗锯齿功能。
setClearColor(color: Color, alpha: Float)：设置背景颜色和透明度。

Scene

表示场景，是所有物体、光源、相机等的容器。

const myScene = new THREE.Scene();

PerspectiveCamera

透视投影相机，模拟人眼观察世界的方式。

构造器

PerspectiveCamera(fov : Float, aspect : Float, near : Float, far : Float)

参数	类型	描述
fov	Float	视野角度，单位为度
aspect	Float	宽高比
near	Float	近裁剪面距离
far	Float	远裁剪面距离

position.set(x: Float, y: Float, z: Float)：设置相机位置。
lookAt(vector: Vector3)：让相机看向指定坐标点。

LatheGeometry

根据二维轮廓线绕Y轴旋转生成三维几何体。

构造器

LatheGeometry(points : Array<Vector2>, segments : Integer)

参数	类型	描述
points	Array	一系列二维向量，定义了轮廓线上的点
segments	Integer	分割段数，决定了曲面平滑度

MeshBasicMaterial

一种基本材质，可以用来显示简单的几何形状。

属性

map: Texture类型，用于指定要应用的纹理图像。
side: 设置材质渲染面，默认只渲染正面，可选值有THREE.FrontSide, THREE.BackSide, THREE.DoubleSide。

BoxHelper

用于创建一个包围给定对象的线框盒，便于调试或可视化对象的边界范围。

构造器

BoxHelper(object : Object3D, color : Color)

参数	类型	描述
object	Object3D	要创建线框盒的对象
color	Color	线框盒的颜色

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="ThreeJS/three.js"></script>
    <script src="ThreeJS/jquery.js"></script>
</head>
<body>
<center id="myContainer"></center>
<script>
    // 创建渲染器
    var myRenderer = new THREE.WebGLRenderer({antialias: true});
    myRenderer.setSize(window.innerWidth, window.innerHeight);
    myRenderer.setClearColor('white', 1.0);
    $("#myContainer").append(myRenderer.domElement);

    // 创建场景
    var myScene = new THREE.Scene();

    // 创建相机
    var myCamera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 30, 1000);
    myCamera.position.set(-172.94, -204.34, 194.46);
    myCamera.lookAt(new THREE.Vector3(0, 0, 0));

    // 根据三角函数设置样条曲线的点
    var myPoints = [];
    for (var i = 0; i < 90; i++) {
        myPoints.push(new THREE.Vector2(Math.sin(i * 0.2) * Math.sin(i * 0.1) * 15 + 50, (i - 5) * 2));
    }

    // 创建样条曲线图形
    var myGeometry = new THREE.LatheGeometry(myPoints, 400);
    var myMap = new THREE.TextureLoader().load("images/img002.jpg");
    var myMaterial = new THREE.MeshBasicMaterial({map: myMap, side: THREE.DoubleSide});
    var myMesh = new THREE.Mesh(myGeometry, myMaterial);
    myMesh.translateY(-70);
    myScene.add(myMesh);

    // 创建线框盒
    var myBox = new THREE.BoxHelper(myMesh, 'red');
    myScene.add(myBox);

    // 渲染
    function animate() {
        requestAnimationFrame(animate);
        myRenderer.render(myScene, myCamera);
    }

    animate();
</script>
</body>
</html>