0

I am making react project with typescript. There is need to import .obj file, so I imported threejs library and react-three-fiber library like following;

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';

Next, I have got no idea what, I am just beginner for using typescript in react. I am using react 17.0.3, function component operation. Who can teach me .obj file import code? Help me.

blue pine
  • 472
  • 6
  • 17
  • Does this answer your question? [three.js OBJLoader not loading in react](https://stackoverflow.com/questions/45191676/three-js-objloader-not-loading-in-react) – Anonymous User Mar 26 '21 at 05:25

2 Answers2

0

You can use three-obj-loader package:

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

Here is an example: https://codesandbox.io/s/kw7l49nw1r?file=/src/ThreeScene.js:7034-7048

Evgenii Studitskikh
  • 109
  • 4
  • 11
  • Thank you, but this answer is about using javascript, I want typescript example. And, I don't want to import .obj file as a entire scene, want as a small canvas at the top of entire doc. – blue pine Mar 26 '21 at 05:55
0

This is the code snippet I used in a react application created with CRA.

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
}
att
  • 617
  • 8
  • 17