I'm not able to get my Three.js scene to display on HTML canvas. I'm importing an OBJ file which is importing correctly. It shows all details, such as Meshes, materials, etc. correctly. Here is my code:
export function TestScene() {
const mountRef = useRef(null);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1,
1000);
const renderer = new THREE.WebGLRenderer();
const loader = new THREE.OBJLoader();
renderer.setSize(window.innerWidth, window.innerHeight);
useEffect(() => {
mountRef.current.appendChild(renderer.domElement);
const animate = function () {
requestAnimationFrame(animate);
renderer.render(scene, camera);
};
loader.load(
'object.obj',
function (object) {
scene.add(object);
camera.position.z = 100;
},
function (xhr) {
console.log((xhr.loaded / xhr.total * 100) + '% loaded');
},
function (error) {
console.log(error);
}
);
animate()
}, [])
return <>
<h1 id='test' style={{ color: 'black' }}>blahhh</h1>
<div ref={mountRef} />
</>
}
I was able to resolve my issue by configuring the Orbital controls which took me two the model. I then adjusted the scaling using object.scale.set(.0001, .0001, .0001); -
import { tsExportAssignment } from '@babel/types';
import React, { useEffect, useRef, useCallback } from 'react';
import { MTLLoader} from 'three/examples/jsm/loaders/MTLLoader';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
const THREE = require('three')
export function TestScene() {
const [update, setUpdate] = React.useState(0);
const mountRef = useRef(null);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(100, window.innerWidth /
window.innerHeight, 0.1, 1000);
const light = new THREE.HemisphereLight(0xffffbb, 0x080820, 1);
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setClearColor(0xffffff, 1);
const loader = new OBJLoader();
const mtlLoader = new MTLLoader()
renderer.setSize(window.innerWidth, window.innerHeight);
const controls = new OrbitControls(camera, renderer.domElement);
camera.position.set(0, 20, 20);
controls.update();
useEffect(() => {
mountRef.current.appendChild(renderer.domElement);
const animate = function () {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
};
mtlLoader.load(
'object.mtl',
(materials) => {
materials.preload()
loader.setMaterials(materials)
console.log(materials)
loader.load(
'object.obj',
function (object) {
object.scale.set(.0001, .0001, .0001);
scene.add(object);
scene.add(camera);
scene.add(light);
console.log(scene)
animate()
},
function (xhr) {
const loading = (xhr.loaded / xhr.total * 100)
if(loading === 100) {
setUpdate(loading)
}
console.log((xhr.loaded / xhr.total * 100) + '% loaded');
},
function (error) {
console.log(error);
}
);
});
}, [])
console.log(scene)
return <>
<>{update !== 100 ? <h5 id='test' style={{ color: 'black' }}
className="blinking">Loading OBJ..</h5> : <h5 style={{ color: 'black' }}>File
Loaded, Rendering Scene</h5>}</>
<div ref={mountRef} />
</>
}