如何使用打字稿在 reactjs 中导入 .obj 文件？答案

【问题标题】：How can I import .obj file in reactjs using typescript?如何使用打字稿在 reactjs 中导入 .obj 文件？
【发布时间】：2021-06-22 22:54:06
【问题描述】：

我正在用打字稿制作反应项目。需要导入.obj文件，所以我导入了threejs库和react-three-fiber库，如下所示；

import React, { useState, useMemo } from 'react'
import logo from './logo.svg';
import { Canvas } from 'react-three-fiber';
import { Group } from 'three';
import './App.css';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';

接下来，我不知道是什么，我只是在 react 中使用 typescript 的初学者。我正在使用react 17.0.3，功能组件操作。谁能教我.obj文件导入代码？帮帮我。

【问题讨论】：

这能回答你的问题吗？ three.js OBJLoader not loading in react

标签： reactjs typescript three.js .obj react-three-fiber

【解决方案1】：

可以使用三个obj-loader包：

import OBJLoader from "three-obj-loader"
const objLoader = new THREE.OBJLoader()
objLoader.load('asset.obj', callback)

这里是一个例子：https://codesandbox.io/s/kw7l49nw1r?file=/src/ThreeScene.js:7034-7048

【讨论】：

谢谢，但这个答案是关于使用 javascript，我想要打字稿示例。而且，我不想将 .obj 文件作为整个场景导入，而是希望作为整个文档顶部的小画布。

【解决方案2】：

这是我在使用 CRA 创建的 react 应用程序中使用的代码 sn-p。

import {
  MeshBasicMaterial,
  Mesh,
  DoubleSide,
  Vector3,
  TextureLoader,
  AdditiveBlending,
  PlaneGeometry,
  Matrix4,
  ObjectLoader,
} from 'three';

const createPin = ({ x, y, z }) => {
  const objLoader = new ObjectLoader()
  const pinObj = objLoader.parse(require('./ball-head-pin-scene.json'))

  const vector = new Vector3(x, y, z)
  const axis = new Vector3(0.1, 0, 1)
  pinObj.quaternion.setFromUnitVectors(axis, vector.clone().normalize())

  return pinObj
}

【讨论】：