javascript - Three.js skybox seems broken after rotating camera -

javascript - Three.js skybox seems broken after rotating camera -

js , i'm trying create simple skybox based on this demo. seems ok far except 1 thing when rotate photographic camera (i'm using orbitcontrols.js) , z value not minimum possible textures deed weird , seem broken.

source:

var camera, scene, renderer, controls, skybox; var toradians = function(deg) { homecoming deg * math.pi / 180 } var todegrees = function(radians) { homecoming radians * (180 / math.pi); } var init = function() { // scene scene = new three.scene(); scene.fog = new three.fogexp2( 0xffffff, 0.00010); // photographic camera photographic camera = new three.perspectivecamera(45, window.innerwidth / window.innerheight, 1, 20000 ); camera.position.z = 5000; scene.add( photographic camera ); // skydome var urlprefix = "http://three.dev/skybox/textures/"; var urls = [urlprefix + "px.png", urlprefix + "nx.png", urlprefix + "py.png", urlprefix + "ny.png", urlprefix + "pz.png", urlprefix + "nz.png"]; var texturecube = three.imageutils.loadtexturecube( urls ); var shader = three.shaderlib[ "cube" ]; shader.uniforms[ "tcube" ].value = texturecube; var material = new three.shadermaterial( { fragmentshader: shader.fragmentshader, vertexshader: shader.vertexshader, uniforms: shader.uniforms, depthwrite: false, side: three.backside } ), skybox = new three.mesh( new three.boxgeometry( 10000, 10000, 10000 ), material ); scene.add( skybox ); //var texture = three.imageutils.loadtexture( 'http://three.dev/skybox/textures/wood.jpg') //var paintmaterial = new three.meshbasicmaterial({map: texturecube}) // var lightamb = new three.ambientlight(0x333333); // lightamb.position.set( 0,0,0 ); // scene.add(lightamb); // var directionallighttop = new three.directionallight( 0xffffff, 1 ); // directionallighttop.position.set( 0, 0, 0 ).normalize(); // scene.add( directionallighttop ); // var color = new three.color("rgb(255,0,0)"); // var pointlightred = new three.pointlight(color, 1, 8000); // pointlightred.position.set( 0, 0, 0); // camera.add( pointlightred ); // renderer renderer = new three.webglrenderer( {alpha: true, antialias: true} ); renderer.setsize( window.innerwidth, window.innerheight ); renderer.setclearcolor( 0xffffff, 1 ); renderer.autoclear = false; controls = new three.orbitcontrols( camera, renderer.domelement ); controls.rotatespeed = 0.5; controls.mindistance = 500; controls.maxdistance = 6000; document.body.appendchild( renderer.domelement ); window.addeventlistener( 'resize', onwindowresize, false ); // start rendering render(); } function onwindowresize() { camera.aspect = window.innerwidth / window.innerheight; camera.updateprojectionmatrix(); renderer.setsize( window.innerwidth, window.innerheight ); render(); } var update = function() { } var render = function() { update(); controls.update(); requestanimationframe( render ); renderer.render(scene, camera); } window.onload = function(){ init(); }

you're adding skybox in 'main' scene. improve way accomplish skydome create new scene. 'background' 'main' scene. there's give-and-take skydomes v.s. skyboxes, put, box saves polys, dome looks better. in illustration i'll using dome/sphere.

var renderer = new three.webglrenderer( {alpha: true, antialias: true} ); var mainscene = new three.scene(); var maincamera = new three.perspectivecamera(45, window.innerwidth / window.innerheight, 1, 20000 ); var skydome = { scene: new three.scene(), camera: new three.perspectivecamera(45, window.innerwidth / window.innerheight, 1, 20000 ); }; skydome.material = new three.meshbasicmaterial({color: 0x0f0f0f}) //the material skydome, sake of lazyness took meshbasicmaterial. skydome.mesh = new three.mesh(new three.spheregeometry(100, 20, 20), skydome.material); skydome.scene.add(skydome.mesh);

now, during render function adjust rotation of skydome camera, not position.

var render = function(){ requestanimationframe( render ); skydome.camera.quaternion = maincamera.quaternion; renderer.render(skydome.scene, skydome.camera); //first render skydome renderer.render(mainscene, maincamera);//then render rest on skydome }; renderer.autoclear = false; //otherwise main scene rendered.

javascript three.js