It’s my first days using three.js and I’ve ran into a problem last night. I’m creating AR scene with all the normal stuff, such as camera, renderer, lights etc. I’ve added an FBX model into the main.js code which also includes an fbx loader. So my problem in a nutshell is that I can’t see my model. The code shows no errors whatsoever. I’ve tried to play around with the camera and model positions but I haven’t seen a blimp of my model no matter where I put the camera or what model scaling I’m using.
The object in question is a simple donut in FBX format.
Pardon for possibly poor explanations. I’m still trying to learn the terminology ;D
I’m adding a snippet of code of my main.js code and a link to the fbx model. Please let me know if anything else is required to look at my problem closer.
Set scene.background to some color to ensure the model isn’t just the same color as the background (this may happen if textures / materials fail to load and the model is rendered black, similarly to the default background.)
Use Box3 to measure the model size - in some cases model can be very small or very big, making it hard to see at a reasonable distance.
So I’ve added a light blue background and added a bounding box inside the model code. I’ve adjusted the model scaling (measurements taken from Blender) so it would be as close as possible to the bounding box’s measurements. Still no result.
I’m starting to think that my code has some serious issue despite of no errors showing which I’m just missing. It would make sense because I’ve tried 4 models by now and none of them were visible.
I’m adding index.html snippet and updated main.js snippet.
I tried adding a simple box to the code and it shows up right away. So the problem could be in an FBX loader I’m using because the .fbx file itself is tested and works in other environments. Very peculiar
Before going deeper into debugging, try to use modules from the same Three.js release. Currently:
ARButton is from r126
three.module.js is from r149
FBXLoader is from r161
Apparently, when I load the model in the Three.js editor, it shows up – it is too big, so I had to pull the camera back, and there was no light, so I added one point light. I think the model is OK, somewhere in your code there is a bug or a parameter with not adequate value (like size, distance, light intensity, etc).
Thank you for your reply. I’ll update the versions. Yes, I’ve been playing with the lights, cameras, distances etc. Having a box in the scene helps me visualize the situation but not all of it because the changes are often invisible.
I have tried a different FBXLoader and had the same results. It would actually make sense if the problem was the light because nothing ever shows up if I put an fbx object there.
It would help me if someone would copy/paste my code and try it on a different pc, if that’s a possibility.
When I try your files, nothing is shown. A quick attempt to fix things failed, so instead of digging into the code, I started over and made a small version of main.js that loads and shows the donut. Maybe you can start adding your stuff to this main.js step by step and find when things break down?
import * as THREE from 'three';
import { FBXLoader } from "three/addons/loaders/FBXLoader.js";
var scene = new THREE.Scene();
scene.add( new THREE.DirectionalLight( 'white', 2.5 ) );
var camera = new THREE.PerspectiveCamera( 30, innerWidth/innerHeight );
camera.position.set( 100, 200, 300 );
camera.lookAt( scene.position );
var renderer = new THREE.WebGLRenderer( {antialias: true} );
renderer.setSize( innerWidth, innerHeight );
renderer.setAnimationLoop( animationLoop );
document.body.appendChild( renderer.domElement );
new FBXLoader().load( "donut_small.fbx", model => scene.add(model) );
function animationLoop( t )
{
renderer.render( scene, camera );
}
I’ll do as you suggested. The main thing is that now I can work with the model because I can see it.
You actually made it work with 20 lines of code… bravo!
Note to self, start from scratch if the code breaks lol
