i want create skybox in three.js, found few tipps how create it, doesnt work. tried of them nothing works. filepaths , imagepaths right.
can explain whats wrong code , why skybox doesnt appear?
<!doctype html> <html lang="en"> <head> <title>earth</title> <meta charset="utf-8"> <style> body { margin: 0px; background-color: #000000; overflow: hidden; } </style> </head> <body> <script src="../js/three.min.js"></script> <script> var camera, scene, renderer; var mirrorcube, mirrorcubecamera; // mirror material var mirrorsphere, mirrorspherecamera; // mirror material init(); animate(); function init() { renderer = new three.webglrenderer(); renderer.setpixelratio( window.devicepixelratio ); renderer.setsize( window.innerwidth, window.innerheight ); document.body.appendchild( renderer.domelement ); scene = new three.scene(); camera = new three.perspectivecamera( 70, window.innerwidth / window.innerheight, 1, 1000 ); scene.add(camera); camera.position.set(0,150,400); camera.lookat(scene.position); var sides = ['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']; var sccube = three.imageutils.loadtexture(sides); sccube.format = three.rgbformat; var skyshader = three.shaderlib["cube"]; skyshader.uniform["tcube"].value = sccube; var skymaterial = new three.shadermaterial( { fragmentshader: skyshader.fragmentshader, vertexshader: skyshader.vertexshader, uniforms: skyshader.uniforms, depthwrite: false, side: three.backside }); var skybox = new three.mesh(new three.cubegeometry(500, 500, 500), skymaterial); skymaterial.needsupdate = true; scene.add(skybox); } function render() { mirrorsphere.visible = false; mirrorspherecamera.updatecubemap( renderer, scene ); mirrorsphere.visible = true; renderer.render( scene, camera ); } function onwindowresize() { camera.aspect = window.innerwidth / window.innerheight; camera.updateprojectionmatrix(); renderer.setsize( window.innerwidth, window.innerheight ); } function animate() { requestanimationframe( animate ); render(); renderer.render( scene, camera ); } </script> </body> </html>
you seem missing camera wich renders environment map , sphere environement map.
// create enviroment map camera mirrorspherecamera = new three.cubecamera( 0.1, 150000, 512 ); mirrorspherecamera.rendertarget.minfilter = three.linearmipmaplinearfilter; scene.add( mirrorspherecamera ); // sphere material var mirrorspherematerial = new three.meshbasicmaterial({ envmap: mirrorspherecamera.rendertarget }); // sphere geometry mirrorsphere = new three.mesh( spheregeom, mirrorspherematerial ); mirrorsphere.position.set( 1000, 1000, 0 ); mirrorspherecamera.position = mirrorsphere.position; scene.add(mirrorsphere); 
Comments
Post a Comment