Three.js - 绘制线条
您已经了解了 Three.js 中的很多材料。现在让我们看看绘制线条时使用的一些独特材料。我们可以使用线条绘制各种形状和图案。
使用 BufferGeometry
THREE.BufferGeometry 是 Three.js 中所有内置几何图形的基类。您可以通过传递几何图形顶点数组来创建几何图形。
详细了解 BufferGeometry 此处。
const points = [] points.push(new THREE.Vector3(-10, 0, 0)) points.push(new THREE.Vector3(0, -10, 0)) points.push(new THREE.Vector3(10, 0, 0))
这些是 Three.js 为我们提供的一些其他元素，用于创建几何图形。THREE.Vector3(x, y, z) - 它在 3D 空间中创建一个点。在上面的代码中，我们向 points 数组中添加了 3 个点。
const geometry = new THREE.BufferGeometry().setFromPoints(points)
如前所述，THREE.BufferGeometry() 创建了我们的几何图形。我们使用 setFromPoints 方法通过点数组设置几何图形。
注意 − 在每个连续的顶点对之间绘制线，但不在第一个和最后一个顶点之间绘制线(线不是闭合的)。
const material = new THREE.LineBasicMaterial({
// for normal lines
color: 0xffffff,
linewidth: 1,
linecap: 'round', //ignored by WebGLRenderer
linejoin: 'round', //ignored by WebGLRenderer
})
// or
const material = new THREE.LineDashedMaterial({
// for dashed lines
color: 0xffffff,
linewidth: 1,scale: 1,
dashSize: 3,
gapSize: 1,
})
这些是线条的独特材质。您可以使用 THREE.LineBasicMaterial 或 THREE.LineDashedMaterial 中的任何一个。
const line = new THREE.Line(geometry,material)
示例
现在，我们使用 THREE.Line 来绘制线条，而不是使用 THREE.Mesh。现在，您可以在屏幕上看到使用线条绘制的"V"形。
linebasic.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Three.js - Line basic</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -applesystem, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
html,
body {
height: 100vh;
width: 100vw;
}
#threejs-container {
position: block;
width: 100%;
height: 100%;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.js"></script>
</head>
<body>
<div id="threejs-container"></div>
<script type="module">
// Creating a line using LineBasicMaterial
// GUI
const gui = new dat.GUI()
// 尺寸
let width = window.innerWidth
let height = window.innerHeight
// 场景
const scene = new THREE.Scene()
scene.background = new THREE.Color(0x262626)
// 相机
const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 100)
camera.position.set(0, 0, 50)
camera.lookAt(0, 0, 0)
const camFolder = gui.addFolder('Camera')
camFolder.add(camera.position, 'z', 10, 100)
camFolder.open()
// Line
const points = []
points.push(new THREE.Vector3(-10, 0, 0))
points.push(new THREE.Vector3(0, -20, 0))
points.push(new THREE.Vector3(10, 0, 0))
const folders = [gui.addFolder('Poin 1'), gui.addFolder('Poin 2'), gui.addFolder('Poin 3')]
folders.forEach((folder, i) => {
folder.add(points[i], 'x', -30, 30, 1).onChange(redraw)
folder.add(points[i], 'y', -30, 30, 1).onChange(redraw)
folder.add(points[i], 'z', -30, 30, 1).onChange(redraw)
folder.open()
})
const geometry = new THREE.BufferGeometry().setFromPoints(points)
const material = new THREE.LineBasicMaterial({
color: 0xffffff,
linewidth: 2
})
const line = new THREE.Line(geometry, material)
line.position.set(0, 10, 0)
scene.add(line)
function redraw() {
let newGeometry = new THREE.BufferGeometry().setFromPoints(points)
line.geometry.dispose()
line.geometry = newGeometry
}
// 响应性
window.addEventListener('resize', () => {
width = window.innerWidth
height = window.innerHeight
camera.aspect = width / height
camera.updateProjectionMatrix()
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.render(scene, camera)
})
// 渲染器
const renderer = new THREE.WebGL1Renderer()
renderer.setSize(width, height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
// 动画
function animate() {
requestAnimationFrame(animate)
renderer.render(scene, camera)
}
// 渲染场景
const container = document.querySelector('#threejs-container')
container.append(renderer.domElement)
renderer.render(scene, camera)
animate()
</script>
</body>
</html>
输出
示例
您可以通过指定顶点来使用线条创建任何类型的几何线框。查看以下我们绘制虚线的示例。
dashedline.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Three.js - Dashed line</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -applesystem, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
html,
body {
height: 100vh;
width: 100vw;
}
#threejs-container {
position: block;
width: 100%;
height: 100%;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.js"></script>
</head>
<body>
<div id="threejs-container"></div>
<script type="module">
// Creating dashed line using LineDashedMaterial
// GUI
const gui = new dat.GUI()
// 尺寸
let width = window.innerWidth
let height = window.innerHeight
// 场景
const scene = new THREE.Scene()
scene.background = new THREE.Color(0x262626)
// 相机
const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 100)
camera.position.set(0, 0, 50)
camera.lookAt(0, 0, 0)
const camFolder = gui.addFolder('Camera')
camFolder.add(camera.position, 'z', 10, 100)
camFolder.open()
// Line
const points = []
points.push(new THREE.Vector3(-10, 0, 0))
points.push(new THREE.Vector3(0, -20, 0))
points.push(new THREE.Vector3(10, 0, 0))
const folders = [gui.addFolder('Poin 1'), gui.addFolder('Poin 2'), gui.addFolder('Poin 3')]
folders.forEach((folder, i) => {
folder.add(points[i], 'x', -30, 30, 1).onChange(redraw)
folder.add(points[i], 'y', -30, 30, 1).onChange(redraw)
folder.add(points[i], 'z', -30, 30, 1).onChange(redraw)
folder.open()
})
const geometry = new THREE.BufferGeometry().setFromPoints(points)
const material = new THREE.LineDashedMaterial({
color: 0xffffff,
linewidth: 2,
scale: 1,
dashSize: 3,
gapSize: 2
})
const line = new THREE.Line(geometry, material)
line.computeLineDistances()
line.position.set(0, 10, 0)
scene.add(line)
console.log(line)
function redraw() {
let newGeometry = new THREE.BufferGeometry().setFromPoints(points)
line.geometry.dispose()
line.geometry = newGeometry
}
// 响应性
window.addEventListener('resize', () => {
width = window.innerWidth
height = window.innerHeight
camera.aspect = width / height
camera.updateProjectionMatrix()
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.render(scene, camera)
})
// 渲染器
const renderer = new THREE.WebGL1Renderer()
renderer.setSize(width, height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
// 动画
function animate() {
requestAnimationFrame(animate)
renderer.render(scene, camera)
}
// 渲染场景
const container = document.querySelector('#threejs-container')
container.append(renderer.domElement)
renderer.render(scene, camera)
animate()
</script>
</body>
</html>
