No puedo hacer que mi escena Three.js se muestre en el lienzo HTML. Estoy importando un archivo OBJ que se está importando correctamente. Muestra todos los detalles, como mallas, materiales, etc. correctamente. Aquí está mi código:
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} /> </> }Pude resolver mi problema configurando los controles orbitales que me llevaron a dos modelos. Luego ajusté la escala usando 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} /> </> }