Uncaught TypeError: Cannot read property 'x' of undefined in three.js line 468 -
this first time attempting import obj three.js , use it. attempting use object loader included in 3 master build.
the issue seems in how object file loads, errors being undefined in kind of loop. trouble is, don't know undefined shouldn't be. create obj file used https://developer.cdn.mozilla.net/media/uploads/demos/w/i/wizgrav/f232e401f674086f9aae99b474e27ed0/running-image-triang_1372626220_demo_package/index.html
what doing wrong? first time using three, tried make few changes possible (only files in directory structure).
since object, at: http://geevideoproduction.com/geetop3d.obj
<!doctype html> <html lang="en"><head> <title>three.js webgl - loaders - obj loader</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <style> body { font-family: monospace; background-color: #000; color: #fff; margin: 0px; overflow: hidden; } #info { color: #fff; position: absolute; top: 10px; width: 100%; text-align: center; z-index: 100; display:block; } #info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer } </style> </head> <body> <script src="./jscript/three.min.js"></script> <script src="./jscript/js/loaders/objloader.js"></script> <script src="./jscript/js/detector.js"></script> <script src="./jscript/js/libs/stats.min.js"></script> <script> var container, stats; var camera, scene, renderer; var mousex = 0, mousey = 0; var windowhalfx = window.innerwidth / 2; var windowhalfy = window.innerheight / 2; init(); animate(); function init() { container = document.createelement( 'div' ); document.body.appendchild( container ); camera = new three.perspectivecamera( 45, window.innerwidth / window.innerheight, 1, 2000 ); camera.position.z = 100; // scene scene = new three.scene(); var ambient = new three.ambientlight( 0x101030 ); scene.add( ambient ); var directionallight = new three.directionallight( 0xffeedd ); directionallight.position.set( 0, 0, 1 ); scene.add( directionallight ); // texture var manager = new three.loadingmanager(); manager.onprogress = function ( item, loaded, total ) { console.log( item, loaded, total ); }; var texture = new three.texture(); var loader = new three.imageloader( manager ); loader.load( '/playfiles/geevideoproduction/images/geetop.png', function ( image ) { texture.image = image; texture.needsupdate = true; } ); // model var loader = new three.objloader( manager ); loader.load( '/playfiles/geevideoproduction/images/geetop3d.obj', function ( object ) { object.traverse( function ( child ) { if ( child instanceof three.mesh ) { child.material.map = texture; } } ); object.position.y = - 80; scene.add( object ); } ); // renderer = new three.webglrenderer(); renderer.setsize( window.innerwidth, window.innerheight ); container.appendchild( renderer.domelement ); document.addeventlistener( 'mousemove', ondocumentmousemove, false ); // window.addeventlistener( 'resize', onwindowresize, false ); } function onwindowresize() { windowhalfx = window.innerwidth / 2; windowhalfy = window.innerheight / 2; camera.aspect = window.innerwidth / window.innerheight; camera.updateprojectionmatrix(); renderer.setsize( window.innerwidth, window.innerheight ); } function ondocumentmousemove( event ) { mousex = ( event.clientx - windowhalfx ) / 2; mousey = ( event.clienty - windowhalfy ) / 2; } // function animate() { requestanimationframe( animate ); render(); } function render() { camera.position.x += ( mousex - camera.position.x ) * .05; camera.position.y += ( - mousey - camera.position.y ) * .05; camera.lookat( scene.position ); renderer.render( scene, camera ); } </script><div><canvas width="1244" height="500"></canvas></div> </body></html>
Comments
Post a Comment