Porting 3D graphics to the web - Tutorial issues

Thought I’d join the forums in hope for some help to my noobie problems, lets see how it goes :slight_smile:

I really like 3D modelling and implementing them on my websites would be übercool, so WebGL would probably be the easiest solution to that since I’m already somewhat familiar to JavaScript (libraries seem relatively easy to use).

Ok so, has anyone tried to follow this awesome looking tutorial on Opera Dev:
http://dev.opera.com/articles/view/port … ro-part-2/

I’m having the exact same problem as federicostrazzullo in the comments section there. Browser claims ‘zmesh is undefined’ on line 79 and doesn’t render a thing. I’ve tried with FF and Opera and both of them state the same.

Any suggestions?

Here’s my code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>testi</title>
	</head>
<body>

<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript" src="three/build/Three.js"></script>
<script type="text/javascript" src="RequestAnimationFrame.js"></script>
<script>
	var SCREEN_WIDTH = window.innerWidth;
	var SCREEN_HEIGHT = window.innerHeight;
	var FLOOR = 0;
	var container;
	var camera, scene;
	var webglRenderer;
	var zmesh, geometry;
	var mouseX = 0, mouseY = 0;
	var windowHalfX = window.innerWidth / 2;
	var windowHalfY = window.innerHeight / 2;

	document.addEventListener( 'mousemove', onDocumentMouseMove, false );
	
	init();
	animate();
	
	function init() {
	  container = document.createElement( 'div' );
	  document.body.appendChild( container );
				
	  // camera
	  camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
	  camera.position.z = 75;
				
	  // scene
	  scene = new THREE.Scene();

	  // lights
	  var ambient = new THREE.AmbientLight( 0xffffff );
	  scene.add( ambient );
				
	  // more lights
	  var directionalLight = new THREE.DirectionalLight( 0xffeedd );
	  directionalLight.position.set( 0, -70, 100 ).normalize();
	  scene.add( directionalLight );
	}

	// renderer
	webglRenderer = new THREE.WebGLRenderer();
	webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
	webglRenderer.domElement.style.position = "relative";
	container.appendChild( webglRenderer.domElement );

	// loader
	var loader = new THREE.JSONLoader(),
	callbackModel = function( geometry ) { createScene( geometry,  90, FLOOR, -50, 105 ) };
	loader.load( { model: "testi.js", callback: callbackModel } );
	
	function createScene( geometry, x, y, z, b ) {
	  zmesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( { color: 0xffaa00 } ) );
	  zmesh.position.set( 0, 16, 0 );
	  zmesh.scale.set( 1, 1, 1 );
	  scene.add( zmesh );
	}
	
	function onDocumentMouseMove(event) {
	  mouseX = ( event.clientX - windowHalfX );
	  mouseY = ( event.clientY - windowHalfY );
	}

	function animate() {
	  requestAnimationFrame( animate );
	  render();
	}

	function render() {
	  zmesh.rotation.set(-mouseY/500 + 1, -mouseX/200, 0);
	  webglRenderer.render( scene, camera );
	}
</script>

</body>
</html>

As I’ve said in the post, I have placed the animate() call elsewhere. Just place “animate();” between function createScene(geometry, x, y, z, b) and function onDocumentMouseMove(event) and the model should load.

My bad. Your fix was working in the first place. I just didn’t notice it since I was getting a new error instead. I’ve spent hours googling for these issues with no success. It’s just that I’d like to get this simple yet surprisingly challenging tutorial to work and I’m not giving up until I do so :slight_smile:

These point to Three.js, line 600:

Chrome:
Uncaught TypeError: Object #<Object> has no method ‘split’

Firefox:
a.split is not a function