手动读取obj文件并使用threejs展示出来

最新推荐文章于 2025-05-14 15:24:15 发布

天空原海

最新推荐文章于 2025-05-14 15:24:15 发布

阅读量421

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.youkuaiyun.com/Hacker_Hacker007/article/details/141822470

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文件的位置入参即可