One of the popular questions on this forum seem to be “why don’t I see anything”, so I thought maybe it makes sense to gather common reasons for that and make a quick checklist, that might give one an idea as to what’s wrong with the setup.
Here’s my quick take on it, let me know what you think.
I Don’t See Anything Checklist
- Check if the renderer is connected to the canvas and its size is set to match the canvas, for example:
const canvas = document.getElementById('my_canvas_id');
const [w, h] = [canvas.width, canvas.height];
const renderer = new THREE.WebGLRenderer({
antialias: true,
canvas: canvas,
});
renderer.setSize(w, h);
- Make sure you’re rendering the scene, add this line at the very end of your code:
renderer.render(scene, camera);
- Add axis to your scene, check if they are visible:
const hlp = new THREE.AxesHelper(110);
scene.add(hlp);
- Check your camera setup, replace your camera with this one, see if helper axis (3) are visible:
const camera = new THREE.PerspectiveCamera(45, canvas.width / canvas.height, 0, 1000);
camera.position.z = 500;
- Check if you added the model to the scene:
scene.add(my_model);
- Give your scene a background color.
Sometimes the model appears black on a black background, and this will help you see it better. Reasons for this issue may include missing or improperly set up lighting, or the model’s material not interacting with the lights.
scene.background = new THREE.Color(0, 0, 0.3);
-
Model/texture doesn’t show up after loading:
7.1 Check if you render the scene AFTER the loading is complete, for example:
new THREE.TextureLoader().load(
'path to my texture/model',
// onLoad callback
function (texture) {
// apply texture if necessary
renderer.render(scene, camera)
},
);