three.js - Why does this ThreeJs plane appear to get a kink in it as the camera moves down the y-axis? -
i have instance of three.planebuffergeometry
apply image texture this:
var camera, scene, renderer; var geometry, material, mesh, light, floor; scene = new three.scene(); three.imageutils.loadtexture( "someimage.png", undefined, handleloaded, handleerror ); function handleloaded(texture) { var geometry = new three.planebuffergeometry( texture.image.naturalwidth, texture.image.naturalheight, 1, 1 ); var material = new three.meshbasicmaterial({ map: texture, overdraw: true }); floor = new three.mesh( geometry, material ); floor.material.side = three.doubleside; scene.add( floor ); camera = new three.perspectivecamera( 75, window.innerwidth / window.innerheight, 1, texture.image.naturalheight * a_bunch ); camera.position.z = texture.image.naturalwidth * 0.5; camera.position.y = some_int; camera.lookat(floor.position); renderer = new three.canvasrenderer(); renderer.setsize(window.innerwidth,window.innerheight); appendtodom(); animate(); } function handleerror() { console.log(arguments); } function appendtodom() { document.body.appendchild(renderer.domelement); } function animate() { requestanimationframe(animate); renderer.render(scene,camera); }
here's code pen: http://codepen.io/anon/pen/qelxvj?editors=001
( note: threejs "pollutes" global scope, use harsh term, , decorates three
using decorator pattern--relying on scripts loading in correct order without using module loader system. so, brevity's sake, copy-pasted source code of few required decorators code pen ensure load in right order. you'll have scroll down several thousand lines bottom of code pen play code instantiates plane, paints , moves camera. )
in code pen, lay plane flat against x-y axis, looking straight z-axis, were. then, pan camera down along y-axis, continuously pointing @ plane.
as can see in code pen, camera moves along y-axis in negative direction, texture on plane appears develop kink in around west texas.
why? how can prevent happening?
i've seen similar behaviour, not in three.js, not in browser webgl directx , vvvv; still, think you'll have set widthsegments/heightsegments of planebuffergeometry higher level (>4) , you're set!
Comments
Post a Comment