Hello,
I face the below issue.
I am working on a project with three.js and i-towns. I use Fbx Loader to display my 3D models on the map but one of them is not visible. Everything seems to work correctly though, without errors.
Do you mind sharing the FBX file in this topic?
In this link you can find the fbx file and the texture.
Thank you very much!
The model has a very large scale so it’s hard to see it in a usual project setup. I’ve updated the official FBX example with this code.
import * as THREE from '../build/three.module.js';
import Stats from './jsm/libs/stats.module.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { FBXLoader } from './jsm/loaders/FBXLoader.js';
let camera, scene, renderer, stats;
init();
animate();
function init() {
const container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 50000 );
camera.position.set( 0, 2500, 5000 );
scene = new THREE.Scene();
const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
hemiLight.position.set( 0, 5000, 0 );
scene.add( hemiLight );
const dirLight = new THREE.DirectionalLight( 0xffffff );
dirLight.position.set( 0, 5000, 3000 );
scene.add( dirLight );
const loader = new FBXLoader();
loader.load( 'models/fbx/UP_WP7_7D.01_CYI_GSUR_STR_01.fbx', function ( object ) {
// center the model
const box = new THREE.Box3().setFromObject( object );
const center = box.getCenter( new THREE.Vector3() );
object.position.x += ( object.position.x - center.x );
object.position.y += ( object.position.y - center.y );
object.position.z += ( object.position.z - center.z );
scene.add( object );
} );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
container.appendChild( renderer.domElement );
const controls = new OrbitControls( camera, renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
stats = new Stats();
container.appendChild( stats.dom );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
stats.update();
}
It looks like so then:
Wow!
Thank you so much for your detailed answer!!
I will give it a try 