PDA

View Full Version : Porting 3D graphics to the web - Tutorial issues



kipposeta
03-31-2012, 03:27 AM
Thought I'd join the forums in hope for some help to my noobie problems, lets see how it goes :)

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/ (http://dev.opera.com/articles/view/porting-3d-graphics-to-the-web-webgl-intro-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>

federico_strazzullo
03-31-2012, 08:23 AM
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.

kipposeta
04-01-2012, 03:14 AM
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 :)

These point to Three.js, line 600:

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

Firefox:
a.split is not a function