Results 1 to 3 of 3

Thread: Porting 3D graphics to the web - Tutorial issues

  1. #1
    Junior Member
    Join Date
    Mar 2012
    Posts
    2

    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

    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:
    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>

  2. #2

    Re: Porting 3D graphics to the web - Tutorial issues

    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.

  3. #3
    Junior Member
    Join Date
    Mar 2012
    Posts
    2

    Re: Porting 3D graphics to the web - Tutorial issues

    Quote Originally Posted by federico_strazzullo
    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

Similar Threads

  1. web gl ui creation .
    By sah in forum Interoperability issues
    Replies: 0
    Last Post: 07-03-2012, 09:44 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •