Three.js 把模型变成线框图

直接回答：只是想让模型显示成线框，给材质加 wireframe: true 就够了；想在实体模型上叠加一层线框，就得用 WireframeGeometry 单独构造并作为第二个对象放进场景。

如果你想要在 three.is 中把模型变成线框图，可以使用下面的方法

1.使用 THREE.WireframeGeometry 将模型的几何体转换为线框几何体

1 2	// 从模型的几何体创建一个线框几何体 var wireframe = new THREE.WireframeGeometry( model.geometry );

2.使用 THREE.LineSegments 创建一个线框对象，并将线框几何体传递给它

1 2	// 使用线框几何体创建线框对象 var wireframe = new THREE.LineSegments( wireframe );

3.将线框对象添加到场景中。

1 2	//将线框对象添加到场景中 scene.add(wireframe):

4.设置线框对象的材质，并调整线条的颜色和宽度

1 2	// 设置线框的材质 wireframe.material = new THREE.LineBasicMaterial({color: 0xffffff, linewidth: 2})

这样，你就可以在 three.js 中创建一个线框模型了。

相关问题

three.js 模型变成线框模型后方向错误

在 threejs 中，可以使用 THREE.EdgesGeometry 类来将模型变成线框模型。首先，需要创建一个 THREE.EdgesGeometry 对象，然后将模型的几何体作为参数传入。例如:

1	let edges = new THREE.EdgesGeometry(geometry);

然后，可以创建一个线条材质，并将其应用到一个线段对象上，最后将这个线段对象添加到场景中。例如:

1
2
3

let material = new THREE.LineBasicMaterial({color: 0x000000})
let wireframe = new THREE.LineSegments(edges，material);
scene.add(wireframe);

如果线框模型的方向错误，那么可能是模型的顶点顺序问题造成的。你可以尝试使用 TEREE,Geometry.computevertexNormals()来计算出正确的法向量，然后再将模型变成线框模型如果问题仍然没有得到解决，可以尝试检查模型的几何体数据是否正确，也可以尝试调整光照和材质的设置。

three.js 如何把模型变成蓝色的线框模型

可以使用 threejs 的 EdgesGeometry 和 LineSegments 类来实现这一效果。首先，你需要准备好你的模型并加载到场景中。然后，你可以使用 EdgesGeometry 类来从你的模型几何体中提取边缘信息，并使用 lineSegments 类将这些边缘信息渲染成线段。最后，你可以设置线条的颜色来改变模型的颜色下面是一个简单的例子:

// 获取模型几何体
const geometry = new THREE.BoxGeometry(1，1，1)
// 从几何体中提取边缘信息
const edgesGeometry = new THREE.EdgesGeometry(geometr)
// 创建线条材质
const material = new THREE.LineBasicMaterial({ color:0x0000ff})
//创建线段并添加到场景中
const lineSegments = new THREE.LineSegments(edgesGeome,material)
scene.add(lineSegments);

这篇笔记整理自我自己的实践记录，如果做法有出入，或者你踩过别的坑，欢迎到留言板一起聊聊。