My scene renders black and there are no errors in the console

Questions
1

I even get the OBJLoader message that my model is loaded,
Does anybody has an idea of why is this happening? The scene is there, I know because if I use an { alpha: true } in my renderer it disappears to show the background of my site.

Here’s my code, thank you in advanced!

import * as THREE from './lib/three.module.js';
import { MTLLoader } from './lib/loaders/MTLLoader.js';
import { OBJLoader } from './lib/loaders/OBJLoader.js';

var scene3d = document.getElementById("scene3d");
var camera, mixer, controls, model, percent;

var scene = new  THREE.Scene();
var clock = new THREE.Clock();
var renderer = new THREE.WebGLRenderer();

scene.background = new THREE.Color( 0xff0000 );

init();

function init() {
  setupTHREEObjects();
  ambientSetup();
  sceneObjects();
}

function setupTHREEObjects() {
  camera = new THREE.PerspectiveCamera( 70, (window.innerWidth/5*3) / window.innerHeight , 1, 10 );
  camera.position.z = 9;
  scene.add( camera );
  renderer.setClearColor( 0xFF0000, 0 );
  renderer.setSize(window.innerWidth/5*3, window.innerHeight);
  scene3d.appendChild(renderer.domElement);
}

window.addEventListener('resize', function(){
  var width = window.innerWidth/5*3;
  var height = window.innerHeight;
  renderer.setSize(window.innerWidth/5*3, height);
  camera.aspect = window.innerWidth/5*3/height;
  camera.updateProjectionMatrix();
});

function ambientSetup(){
  var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.8 );
  scene.add( ambientLight );
  var pointLight = new THREE.PointLight( 0xFFC5CB, .8 );
  pointLight.position.copy( camera.position );
  scene.add( pointLight );
}

function sceneObjects(){

  var onError = function () { };
  var onProgress = function ( xhr ) {
  	if ( xhr.lengthComputable ) {
  		var percentComplete = xhr.loaded / xhr.total * 100;
  		// console.log( Math.round( percentComplete, 2 ) + '% downloaded' );
  	}
  };

  new MTLLoader()
  .setPath( './assets/modelo/' )
  .load( 'flor.mtl', function ( materials ) {
  	materials.preload();
  	new OBJLoader()
  	.setMaterials(materials)
  	.setPath( './assets/modelo/' )
  	.load( 'flor.obj', function ( object) {
  		object.scale.x= .001;
  		object.scale.y= .001;
  		object.scale.z= .001;

  		object.position.x = 0;
  		object.position.y	= 0;
  		object.position.z = 5;

  		object.rotation.x= -1;
  		object.rotation.y= -1;

  		scene.add( object );

  	}, onProgress, onError );
  });
}
2

Could be a number of things.

  • Since you’re setting your camera.position.z = 9, and obj.position.z = 5, maybe your camera is inside the object.
  • Maybe you’re scaling it too small with 0.001 so you can’t see it.
  • Maybe your materials are just black.

Hard to tell without knowing what’s in the .mtl and .obj files.

3

Thank you for answering! Actually my object size is 0.001 because I thought the same, that it was blocking the camera in some way. But even if remove the whole object section, the background color is still not showing, just black.

4

What do you get when you compute the geometry’s bounding box after it’s been loaded? Use this after you’ve added object to the scene to find out how big and where it is:

object.geometry.computeBoundingBox();
const boundsMin = object.geometry.boundingBox.min;
const boundsMax = object.geometry.boundingBox.max;
console.log(boundsMin, boundsMax);

You should also add a material that always shows up, in case that’s the problem:
object.material = new THREE.MeshBasicMaterial(); // <- is always white
https://threejs.org/docs/#api/en/core/Geometry.computeBoundingBox

1 Like
5

Your onError function is empty – use it to log the errors, otherwise they’re silenced.

onError = function ( e ) { console.error( e ); };
2 Likes
6

It works, I was missing the renderer.render(scene, camera); at the end of all my functions
I also removed the scene.add( camera );
Thanks again!

1 Like