Acabo de empezar a aprender three.js y quería probar la importación de modelos con gltf loader. cuando cargo cierto modelo 3d, mi escena se ve así,

pero sin el modelo, el fondo se ve así (después de habilitar alfa verdadero y cambiar el fondo del lienzo a un degradado)

el objeto que estoy tratando de cargar es este,

Supongo que tiene algo que ver con el ángulo de la cámara o la escala del objeto. A continuación se muestra mi código js completo.

 const loader = new GLTFLoader(); const gui = new dat.GUI() loader.load('orange.glb', (gltf) => { browserscene.add(gltf.scene) gltf.scene.position.x = 10 gltf.scene.position.y = 20 gltf.scene.rotation.x = 0.2 gltf.scene.rotation.z = 0.8 gltf.scene.scale.x = 3 gltf.scene.scale.y = 3 }); // Debug // Canvas const canvas = document.querySelector('canvas.webgl') // Scene const browserscene = new THREE.Scene() // Materials const material = new THREE.MeshBasicMaterial() material.color = new THREE.Color(0xFFFE00) // Lights var light = new THREE.HemisphereLight(0x404040, 0xFFFFFF, 10); browserscene.add(light); const sizes = { width: window.innerWidth, height: window.innerHeight } window.addEventListener('resize', () => { // Update sizes sizes.width = window.innerWidth sizes.height = window.innerHeight // Update camera camera.aspect = sizes.width / sizes.height camera.updateProjectionMatrix() // Update renderer renderer.setSize(sizes.width, sizes.height) renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)) }) const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100) camera.position.x = 0 camera.position.y = 0 camera.position.z = 2 browserscene.add(camera) const renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true, alpha: true }) renderer.setSize(sizes.width, sizes.height) renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)) const animate = () => { // Render requestAnimationFrame(animate) renderer.render(browserscene, camera) } animate()