CODEWITHSUNDEEP
javascriptthree.js
thiefaine
thiefaine

Reputation: 25

Three js scene not rendering

I have an issue with Three js. I created a scene with a 3d model that can rotate and everything worked. Then I tried to do this scene in OOP with javascript but the scene is not rendering and I have a black screen.

Here is my code : 

function deg2radians(degs)
{
	return Math.PI * degs / 180.0;
}


var	OBJLoaded = function()
{
	this.createRender();
	this.createScenes();
	this.createCamera();
	this.createLights();

	this.loadModel();

	this.render();
};

OBJLoaded.prototype.createRender = function()
{
	var fill = document.getElementById("3dModel");
	this.renderer = Detector.webgl? new THREE.WebGLRenderer( { antialias: true} ): new THREE.CanvasRenderer( {antialias: true} );
	this.renderer.setSize( window.innerWidth, window.innerHeight );
	this.renderer.setPixelRatio( window.devicePixelRatio );
	this.renderer.setClearColor(0xBAC4CC);
	fill.appendChild( this.renderer.domElement );
};

OBJLoaded.prototype.createScenes = function()
{
	this.scene = new THREE.Scene();
};

OBJLoaded.prototype.createCamera = function()
{
	this.camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
	this.camera.position.z = 100;
	this.camera.aspect = window.innerWidth / window.innerHeight;
	this.camera.updateProjectionMatrix();

};

OBJLoaded.prototype.createLights = function()
{
	var hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.6 );
	hemiLight.color.setHSL( 1, 1, 1 );
	hemiLight.position.set( 0, 500, 0 );
	this.scene.add( hemiLight );
};

OBJLoaded.prototype.render = function ()
{
	if (this.needupdate) {
		this.renderer.render(this.scene, this.camera);
		this.needupdate = false;
	}
};

OBJLoaded.prototype.loadModel = function()
{
	THREE.ImageUtils.crossOrigin = "anonymous";
	var self = this;
	var loader = new THREE.OBJMTLLoader();
	loader.load( 'skate_tracker.obj', 'skate_tracker.mtl', function ( obj ) {
			obj.position.set(-2, 0, 0);
			obj.rotation.y = -55;
			obj.castShadow = true;
			obj.receiveShadow = true;
			self.model = obj;
			self.scene.add( self.model );
			});
};

OBJLoaded.prototype.newData = function(data)
{
	if (this.model === undefined)
		return;

	this.model.rotation.x = -deg2radians(data[0] + 270);
	this.model.rotation.y =  deg2radians(data[1]);
	this.model.rotation.z =  deg2radians(data[2] + 180);

	this.needupdate = true;
};

var o = new OBJLoaded();

function update()
{
	o.render();
	requestAnimationFrame(update);
}

requestAnimationFrame(update);
<head>
<style>
body {margin:0; padding:0;}
</style>
</head>

<body>
<div class="item_slider active" id="3d_div" style="display:block;">
	<div class="fill" id="3dModel"></div>
</div>
</body>

<!-- Jquery -->
<script src="js/jquery.js"></script>

<!-- Three.js -->
<script src="js/three.min.js"></script>

<!-- Controls -->
<script src="js/OrbitControls.js"></script>

<!-- Renderer -->
<script src="js/Projector.js"></script>
<script src="js/CanvasRenderer.js"></script>
<script src="js/Detector.js"></script>

<!-- Object loading -->
<script src="js/MTLLoader.js"></script>
<script src="js/OBJMTLLoader.js"></script>

So if you can help me understanding what is going wrong, it would be cool :) . Thanks.

EDIT : My code without "OOP" that works without any errors.

var scene, camera, renderer, controls;
var object;
var OBJLoaded;

init();
animate();

function animate()
{
	requestAnimationFrame( animate );
	controls.update();
	render();
}

function init() {

	var fill = document.getElementById("3dModel");

	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
	camera.position.z = 100;

	controls = new THREE.OrbitControls( camera );
	controls.damping = 0.2;
	controls.addEventListener( 'change', render );

	//HEMILIGHT
	hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.6 );
	hemiLight.color.setHSL( 1, 1, 1 );
	hemiLight.position.set( 0, 500, 0 );
	scene.add( hemiLight );

	THREE.ImageUtils.crossOrigin = "anonymous";
	var loader = new THREE.OBJMTLLoader();
	loader.load( 'skate_tracker.obj', 'skate_tracker.mtl', function ( object ) {
		var s = 1;
		object.position.set(-2, 0, 0);
		object.scale.set(s, s, s);
		object.rotation.y = -55;
		object.castShadow = true;
		object.receiveShadow = true;
		scene.add( object );
		OBJLoaded = object;
	});
	renderer = Detector.webgl? new THREE.WebGLRenderer( { antialias: true} ): new THREE.CanvasRenderer( {antialias: true} );
	//renderer.setSize( window.innerWidth, window.innerHeight );
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setClearColor(0xBAC4CC);
	renderer.setSize( fill.offsetWidth, fill.offsetHeight );

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();

	renderer.setSize( window.innerWidth, window.innerHeight );

	fill.appendChild( renderer.domElement );

	window.addEventListener( 'resize', onWindowResize, false );
	animate();
}

function onWindowResize() {

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();

	renderer.setSize( window.innerWidth, window.innerHeight );

	render();
}

function render()
{
	renderer.render( scene, camera );
}

Upvotes: 1

Views: 6781

Answers (1)

Bergi
Bergi

Reputation: 665546

It seems that in your code the line

this.renderer.render(this.scene, this.camera);

is never called because you did not initialise the this.needupdate flag to true. It just stays undefined.

Upvotes: 2

Related Questions