VCAN

We Can Do It!

0%

16 曲线路径管道 - Threejs入门

分类于

通过组合曲线绘制一个管道。 [ 练一练 ] [ 看一看 ]

使用 CurvePath 将三个曲线组合在一起形成一个连续的路径。通过 TubeGeometry 将路径转换成管道几何体。管道具有 50 段，每段的半径为 0.5，圆形截面有 50 个细分。

示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(
  60,
  window.innerWidth / window.innerHeight,
  0.1,
  100
)
camera.position.y = 30

const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
app.appendChild(renderer.domElement)

// 创建环境光
const ambLight = new THREE.AmbientLight()
// 创建平行光
const dirLight = new THREE.DirectionalLight()
// 设置平行光位置
dirLight.position.set(5, 5, 5)
// 添加到场景中
scene.add(ambLight, dirLight)

// 利用曲线路径，绘制一个管道
const p1 = new THREE.Vector3(0, 0, 10)
const p2 = new THREE.Vector3(0, 0, 3)
const p3 = new THREE.Vector3(0, 0, 0)
const p4 = new THREE.Vector3(3, 0, 0)
const p5 = new THREE.Vector3(10, 0, 0)

const line1 = new THREE.LineCurve3(p1, p2)
const curve = new THREE.QuadraticBezierCurve3(p2, p3, p4)
const line2 = new THREE.LineCurve3(p4, p5)

const curvePath = new THREE.CurvePath()
curvePath.curves.push(line1, curve, line2)

const geometry = new THREE.TubeGeometry(curvePath, 50, 0.5, 50)

const material = new THREE.MeshLambertMaterial({
  color: 0x00ffff,
  side: THREE.DoubleSide,
})

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

const controls = new OrbitControls(camera, app)

renderer.setAnimationLoop(() => {
  renderer.render(scene, camera)
})

演示效果