threejs拥有自己的加载器,可以支持obj、gltf等格式的加载,能够实现快速的导入模型,但是如果需要改变模型的形状呢,那加载器的方式可能就不是那么方便了
因此使用BufferGeometry的方式来通过模型数据自己创建网格,然后放入到3d场景中
const geometry = new THREE.BufferGeometry();
// 创建一个简单的矩形. 在这里我们左上和右下顶点被复制了两次。
// 因为在两个三角面片里,这两个顶点都需要被用到。
const vertices = new Float32Array( [
-1.0, -1.0, 1.0,
1.0, -1.0, 1.0,
1.0, 1.0, 1.0,
1.0, 1.0, 1.0,
-1.0, 1.0, 1.0,
-1.0, -1.0, 1.0
] );
// itemSize = 3 因为每个顶点都是一个三元组。
geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
const mesh = new THREE.Mesh( geometry, material );
这是官方文档给出的例子,也就是说最少需要顶点数据,如果是复杂多边体还需要面的数据,uv数据,因此需要读取obj模型中的数据,然后转成对应的格式
function loadFromUrl(url) {
return fetch(url)
.then(response => response.text())
.then(objData => {
const lines = objData.split('\n');
let vertices = [];
let faceTriIds = [];
let uv = [];
for (const line of lines) {
const parts = line.split(' ').filter(part => part!== '');
if (parts[0] === 'v') {
// 将顶点坐标依次存入一维数组
vertices.push(parseFloat(parts[1]));
vertices.push(parseFloat(parts[2]));
vertices.push(parseFloat(parts[3]));
} else if (parts[0] === 'f') {
const facePart = parts[1].split('/');
const facePart02 = parts[2].split('/');
const facePart03 = parts[3].split('/');
faceTriIds.push(Number(facePart[0])-1,Number(facePart02[0])-1,Number(facePart03[0])-1);
} else if (parts[0] === 'vt') {
uv.push(parseFloat(parts[1]),parseFloat(parts[2]))
}
}
return { vertices, faceTriIds, uv };
})
.catch(error => {
console.error('Error loading OBJ file from URL:', error);
return null;
});
}
export default loadFromUrl;
通过import的方式导入,使用这个方法,将obj文件的位置入参即可