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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值