three.js入门(二):三维空间下的直线
时间: 2023-07-15 22:15:01 浏览: 91
在三维空间中,一条直线可以由两个点确定。我们可以使用 `THREE.Line` 来定义一条直线,并将其添加到场景中。
```javascript
// 创建两个点
var point1 = new THREE.Vector3(-5, 0, 0);
var point2 = new THREE.Vector3(5, 0, 0);
// 创建直线
var geometry = new THREE.Geometry();
geometry.vertices.push(point1, point2);
var material = new THREE.LineBasicMaterial({ color: 0xff0000 });
var line = new THREE.Line(geometry, material);
// 将直线添加到场景中
scene.add(line);
```
上述代码创建了一条以两个点 `-5, 0, 0` 和 `5, 0, 0` 为端点的红色直线,并将其添加到场景中。
如果你想让这条直线在场景中保持不变,不会随着相机的移动而移动,可以将其添加到场景的静态物体中。
```javascript
var staticObject = new THREE.Object3D();
staticObject.add(line);
scene.add(staticObject);
```
这样,当相机移动时,这条直线将保持不变。
当然,你也可以在直线上加入一些动画效果,让它动起来。你可以通过设置直线的顶点坐标来使其运动。以下是一个简单的例子:
```javascript
function animate() {
requestAnimationFrame(animate);
// 使直线的第二个点沿着 y 轴移动
line.geometry.vertices[1].y += 0.1;
line.geometry.verticesNeedUpdate = true;
renderer.render(scene, camera);
}
```
上述代码中,`animate` 函数每帧调用一次,使直线的第二个点沿着 y 轴移动了 `0.1` 的距离。`verticesNeedUpdate` 标记告诉 three.js 更新直线的顶点坐标。
希望这些能帮助你入门 three.js 中的直线绘制。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)