javascript - WebGl Object literal not working -
the basic issue can't example work in object literal - , don't errors in console not reayll sure why doesn't want run.
i know code works if use normal functions , not object literal notation maybe have messed scope somewhere or should use object constructors?
i had around , couldn't see issues relating using webgl within object literal presume have dodgy coding going on.
i have submitted jsfiddle inspect - please ignore cross domain issue of texture.
var mycube = { container : null, renderer : null, scene : null, camera : null, cube : null, animating : null, light : null, mapurl : null, map : null, material : null, geometry : null, animating : false, onload : function(){ this.container = $("#container"); this.renderer = new three.webglrenderer( { antialias: true } ); this.renderer.setsize(this.container.offsetwidth, this.container.offsetheight); $(this.container).append( this.renderer.domelement ); this.scene = new three.scene(); this.camera = new three.perspectivecamera( 45, this.container.offsetwidth / this.container.offsetheight, 1, 4000 ); this.camera.position.set( 0, 0, 3 ); this.light = new three.directionallight( 0xffffff, 1.5); this.light.position.set(0, 0, 1); this.scene.add( this.light ); this.mapurl = "molumen_small_funny_angry_monster-999px.png"; this.map = three.imageutils.loadtexture(this.mapurl); this.material = new three.meshphongmaterial({ map: this.map }); this.geometry = new three.cubegeometry(1, 1, 1); this.cube = new three.mesh(this.geometry, this.material); this.cube.rotation.x = math.pi / 5; this.cube.rotation.y = math.pi / 5; this.scene.add( this.cube ); this.myrun(); }, myrun : function(){ mycube.renderer.render(mycube.scene,mycube.camera); if(mycube.animating) { mycube.cube.rotation.y -= 0.11; mycube.cube.rotation.x -= 0.10; } requestanimationframe(mycube.myrun); } } mycube.onload(); $('#container').click(function(){ mycube.animating = !mycube.animating; return false; });
all had add [0] onto end of jquery selector container div so...
this.container = $("#container")[0];
and not
this.container = $("#container");
what had failed realize (stupidly) without [0] returning jquery object , not html dom element. considering wealth of knowledge on here i'm surprised no 1 spotted before me.
if go jsfiddle example , add in [0] see works (apart texture).
i think post single best example of how simple can hold such long time...sigh!
Comments
Post a Comment