Три. ⇐ Javascript

[Anonymous]

Я пытаюсь отобразить модель, которую я загрузил на Sketchfab, которая не отображается, как ожидается, когда я ее рендерил. alt = "рендеринг i получаю" src = "https://i.sstatic.net/cwq3ihng.png"/>
выше, что рендеринг, который я получаю в Three.js.
Как мне достичь результатов, таких как первая картина? Задается ли проблема с моделью или то, как я отображаю ее, используя Three.js? < /P>
Вот мой код: < /p>

Код: Выделить всё

import * as THREE from 'three';
import { GLTFLoader } from 'https://unpkg.com/three@0.138.3/examples/jsm/loaders/GLTFLoader.js';
import { FBXLoader } from 'https://unpkg.com/three@0.138.3/examples/jsm/loaders/FBXLoader.js';
import { OrbitControls } from 'https://unpkg.com/three@0.138.3/examples/jsm/controls/OrbitControls.js';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 10000 );
camera.position.set( -50, 50, 1000 );
camera.lookAt(0, 0, 0)
//camera.position.set( , 0, 0 );
//camera.lookAt(scene.position)
const renderer = new THREE.WebGLRenderer({antialias: true, logarithmicDepthBuffer: true});
renderer.setSize( window.innerWidth, window.innerHeight);
const color = 0xFFFFFF;
const intensity = 10;
const light = new THREE.DirectionalLight(color, intensity);
light.position.set(-60, 60, 1060);
//const light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 0.5 );
//scene.add( light );

// Add a simple test cube to confirm the setup works
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
document.getElementById("threejsbackdrop").appendChild( renderer.domElement );
const controls = new OrbitControls( camera, renderer.domElement );
controls.update();
//import GLTFLoader from "../js/GLTFLoader.js"
// Instantiate a loader
const loader = new GLTFLoader();
const fbxLoader = new FBXLoader()
// Load a glTF resource
loader.load('./black_hole.glb', function ( gltf ) {

gltf.animations; // Array
gltf.scene; // THREE.Group
gltf.scenes; // Array
gltf.cameras; // Array
gltf.asset; // Object
gltf.scene.receiveShadow = true;

//console.log(gltf.scene)

/*var box = new THREE.Box3()
.setFromObject( gltf.scene );
var center = new THREE.Vector3();
box.getCenter( center );
gltf.scene.position.sub( center )
//gltf.scene.position.x +=3
//gltf.scene.position.z += 3*/

scene.add( gltf.scene );

},
// called while loading is progressing
function ( xhr ) {
//console.log(xhr)
//console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
if(( xhr.loaded / xhr.total * 100 ) == 100){
console.log("Finished Loading!")
}

},
// called when loading has errors
function ( error ) {
console.log(error)
console.log( 'An error happened' );

}
);
function animate() {
requestAnimationFrame( animate );
var bg3dobj = scene.children.find(e => e.name == "Sketchfab_Scene")

controls.update();
//updateLayers()

renderer.render( scene, camera );
};

animate();

заранее спасибо!

Подробнее здесь: https://stackoverflow.com/questions/795 ... -rendering