Three.js - 绘制线框几何模型

最新推荐文章于 2024-05-31 21:20:33 发布

「已注销」

最新推荐文章于 2024-05-31 21:20:33 发布

阅读量7.1k

点赞数 1

分类专栏： threejs

本文链接：https://blog.csdn.net/ithanmang/article/details/80854584

版权

通过 three.js 可以绘制线段模型，包括虚线和基础线条。
demo浏览地址：https://ithanmang.gitee.io/threejs/home/201806/20180629/01-line.html

var lineGeometry = new THREE.Geometry();
lineGeometry.vertices.push(new THREE.Vector3(-200, -200, -200));
lineGeometry.vertices.push(new THREE.Vector3(200, 200, 200));

//定义线的基本材料，我们可以使用LineBasicMaterial（实线材料）和LineDashedMaterial（虚线材料）
var lineMaterial = new THREE.LineDashedMaterial({
   
    color : 0x9B30FF
});
var line = new THREE.Line(lineGeometry, lineMaterial);
// 计算线条间的距离
line.computeLineDistances();
scene.add(line);

值得注意的是，如果需要绘制虚线，就要计算线条之间的距离，否则不会出现虚线的效果

// 计算线条间的距离
 line.computeLineDistances();

示例效果
这里写图片描述
通过查看官方文档，可以绘制LineBasicMaterial和LineDashedMaterial，基础线条和虚线材质。

绘制基础线条的方法
绘制虚线材质的方法

本篇示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

最低0.47元/天解锁文章

「已注销」

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
Three.js - 绘制线框几何模型

通过 three.js 可以绘制线段模型，包括虚线和基础线条。var lineGeometry = new THREE.Geometry();lineGeometry.vertices.push(new THREE.Vector3(-200, -200, -200));lineGeometry.vertices.push(new THREE.Vector3(200, 200, 200)...
复制链接

扫一扫