I am learning to bring in models. Since the Blender plugin has been deprecated, I figured I would learn to use the FBX format instead.
However, I output a box.fbx. Then I output a sphere.fbx. Only one will load at a time. If I comment out the box, the sphere loads. Otherwise, even if the sphere is not commented out, the box will load.
I’m sure it is something I’ve done wrong but at least I’m trying! Could it be that I’m using Fenix to test? Would that matter at all? Here is the code:
three.js webgl - FBX loader <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #000;
color: #fff;
margin: 0px;
overflow: hidden;
}
#info {
color: #fff;
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 100;
display:block;
}
#info a {
color: #046;
font-weight: bold;
}
</style>
</head>
<body>
<div id="info">
<a href="http://threejs.org/" target="_blank" rel="noopener">three.js</a> - FBXLoader<br>
Character and animation from <a href="https://www.mixamo.com/" target="_blank" rel="noopener">Mixamo</a>
</div>
<script src="./index_files/three.js.download"></script>
<script src="./index_files/inflate.min.js.download"></script>
<script src="./index_files/FBXLoader.js.download"></script>
<script src="./index_files/OrbitControls.js.download"></script>
<script src="./index_files/Detector.js.download"></script>
<script src="./index_files/stats.min.js.download"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats, controls;
var camera, scene, renderer, light;
var clock = new THREE.Clock();
var mixers = [];
init();
animate();
function init() {
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
window.addEventListener( 'resize', onWindowResize, false );
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.set( 100, 200, 300 );
controls = new THREE.OrbitControls( camera );
controls.target.set( 0, 100, 0 );
controls.update();
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xa0a0a0 );
light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
light.position.set( 0, 200, 0 );
scene.add( light );
light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 200, 100 );
light.castShadow = true;
light.shadow.camera.top = 180;
light.shadow.camera.bottom = -100;
light.shadow.camera.left = -120;
light.shadow.camera.right = 120;
scene.add( light );
// scene.add( new THREE.CameraHelper( light.shadow.camera ) );
// ground
var burners = new THREE.FBXLoader();
burners.load( '/fbx/box.fbx', function ( object ) {
object.traverse( function ( child ) {
if( child.material ) {
child.material = new THREE.MeshBasicMaterial ( {
color: 0x151515,
wireframe: true
} );
}
} )
object.position.set( 0, 0, 0);
scene.add ( object );
} );
// model
var range = new THREE.FBXLoader();
range.load( '/fbx/sphere.fbx', function ( object2 ) {
object2.traverse( function ( child2 ) {
if( child2.material ) {
child2.material = new THREE.MeshBasicMaterial ( {
color: 0xffffff,
wireframe: true,
} );
}
} )
object2.position.set( 0, 0, 0);
scene.add ( object2 );
} );
//burners
container.appendChild( renderer.domElement );
// stats
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 );
if ( mixers.length > 0 ) {
for ( var i = 0; i < mixers.length; i ++ ) {
mixers[ i ].update( clock.getDelta() );
}
}
renderer.render( scene, camera );
stats.update();
}
</script><div><canvas width="1920" height="898" style="width: 1920px; height: 898px;"></canvas><div style="position: fixed; top: 0px; left: 0px; cursor: pointer; opacity: 0.9; z-index: 10000;"><canvas width="80" height="48" style="width: 80px; height: 48px; display: block;"></canvas><canvas width="80" height="48" style="width: 80px; height: 48px; display: none;"></canvas><canvas width="80" height="48" style="width: 80px; height: 48px; display: none;"></canvas></div></div><div><canvas width="928" height="898" style="width: 928px; height: 898px;"></canvas><div style="position: fixed; top: 0px; left: 0px; cursor: pointer; opacity: 0.9; z-index: 10000;"><canvas width="80" height="48" style="width: 80px; height: 48px; display: block;"></canvas><canvas width="80" height="48" style="width: 80px; height: 48px; display: none;"></canvas><canvas width="80" height="48" style="width: 80px; height: 48px; display: none;"></canvas></div></div>
