I am trying to display a model I downloaded on Sketchfab which is not showing up as expected when I render it.
Above is the expected rendering
Above is the rendering I get in three.js.
How do I achieve results like the first picture? Does the issue lie with the model or the way I display it using three.js?
Here is my code:
import * as THREE from 'three';
import { GLTFLoader } from '/[email protected]/examples/jsm/loaders/GLTFLoader.js';
import { FBXLoader } from '/[email protected]/examples/jsm/loaders/FBXLoader.js';
import { OrbitControls } from '/[email protected]/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<THREE.AnimationClip>
gltf.scene; // THREE.Group
gltf.scenes; // Array<THREE.Group>
gltf.cameras; // Array<THREE.Camera>
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();
Many thanks in advance!
I am trying to display a model I downloaded on Sketchfab which is not showing up as expected when I render it.
Above is the expected rendering
Above is the rendering I get in three.js.
How do I achieve results like the first picture? Does the issue lie with the model or the way I display it using three.js?
Here is my code:
import * as THREE from 'three';
import { GLTFLoader } from 'https://unpkg/[email protected]/examples/jsm/loaders/GLTFLoader.js';
import { FBXLoader } from 'https://unpkg/[email protected]/examples/jsm/loaders/FBXLoader.js';
import { OrbitControls } from 'https://unpkg/[email protected]/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<THREE.AnimationClip>
gltf.scene; // THREE.Group
gltf.scenes; // Array<THREE.Group>
gltf.cameras; // Array<THREE.Camera>
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();
Many thanks in advance!
Share Improve this question edited Mar 31 at 19:32 Łukasz Daniel Mastalerz 2,4282 gold badges7 silver badges28 bronze badges asked Mar 31 at 14:57 user9002871user9002871 153 bronze badges1 Answer
Reset to default 1Try add postprocessing...
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js'
// ...
const unrealBloom = new UnrealBloomPass()
effectComposer.addPass(unrealBloom)
https://threejs./examples/webgl_postprocessing_unreal_bloom.html