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