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