three.js scroll -
i have had problem every three.js scene i've created far, here 1 illustration (the 1 i'm working on). if set much html code, go under scene can't scroll downwards see it. how can allow page scrolling ? here 1 page illustration :
<!doctype html> <html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> <script src="lib/three.js" type="text/javascript"></script> <script src="lib/detector.js"></script> <script src="lib/stats.min.js" type="text/javascript"></script> <script src="lib/threex/threex.windowresize.js"></script> <script src="lib/threex/threex.fullscreen.js"></script> <script src="lib/trackballcontrols.js"></script> <style type="text/css"> body { color: #ffffff; text-align:center; background-color: gray; margin: 0px; overflow: hidden; } #center { color: #fff; position: absolute; top: 50px; width: 100%; padding: 5px; z-index:100; } #center h1 { font-size:60px; } #container { position:absolute; bottom:0; } </style> </head> <body> <div id="container"></div> </body> <script> // main console.log("main.js"); if ( ! detector.webgl ) detector.addgetwebglmessage(); // global variables var container, scene, camera, renderer, stats, controls; // custom variables var t = three; var cube; // maintain track of mouse position var projector, intersected, mouse = { x: 0, y: 0 }, // array store our particles in particles = []; init(); animate(); function init() { // scene scene = new three.scene(); // photographic camera var screen_width = window.innerwidth, screen_height = window.innerheight; var view_angle = 45, aspect = screen_width / screen_height, near = 0.1, far = 20000; photographic camera = new three.perspectivecamera( view_angle, aspect, near, far); scene.add(camera); camera.position.set(0,0,800); camera.lookat(scene.position); // renderer renderer = new three.canvasrenderer(); renderer.setsize( window.innerwidth, window.innerheight ); // container container = document.getelementbyid('container'); container.appendchild( renderer.domelement ); // stats stats = new stats(); stats.domelement.style.position = 'absolute'; stats.domelement.style.bottom = '0px'; stats.domelement.style.zindex = 100; container.appendchild( stats.domelement ); // events threex.windowresize(renderer, camera); threex.fullscreen.bindkey({ charcode : 'm'.charcodeat(0) }); // initialize object perform world/screen calculations projector = new three.projector(); // custom // cubes x = window.innerwidth / 5; y = window.innerheight / 10; console.log(window.innerwidth); console.log(window.innerheight); var geometry = new t.cubegeometry(125,125,125); var material = new t.meshbasicmaterial({color:0xcccccc}); cube = new t.mesh(geometry, material); cube.name = "cube"; scene.add(cube); cube.position.set(-x,-y,0); x = window.innerwidth; y = window.innerheight / 10; var geometry2 = new t.cubegeometry(125,125,125); var material2 = new t.meshbasicmaterial({color:0xcccccc}); cube2 = new t.mesh(geometry2, material2); scene.add(cube2); cube2.name = "cube2"; cube2.position.set(0,-y,0); x = window.innerwidth / 5; y = window.innerheight / 10; var geometry3 = new t.cubegeometry(125,125,125); var material3 = new t.meshbasicmaterial({color:0xcccccc}); cube3 = new t.mesh(geometry3, material3); cube3.name = "cube3"; scene.add(cube3); cube3.position.set(x,-y,0); // particles makeparticles(); // mouse events document.addeventlistener( 'mousemove', onmousemove, false ); document.addeventlistener( 'mousedown', onmousedown, false ); } // called when mouse moves function onmousemove( event ) { // store mousex , mousey position mouse.x = ( event.clientx / window.innerwidth ) * 2 - 1; mouse.y = - ( event.clienty / window.innerheight ) * 2 + 1; } function onmousedown( event ) { event.preventdefault(); var vector = new three.vector3( mouse.x, mouse.y, 1 ); projector.unprojectvector( vector, photographic camera ); var ray = new three.ray( camera.position, vector.subself( camera.position ).normalize() ); var intersects = ray.intersectobjects( scene.children ); if ( intersects.length > 0 ) { console.log(intersected.name); if(intersected.name == "cube") { page("real"); } } } function animate() { cube.rotation.y +=0.005; cube.rotation.x -=0.005; cube2.rotation.y +=0.005; cube2.rotation.x -=0.005; cube3.rotation.y +=0.005; cube3.rotation.x -=0.005; //textmesh.rotation.y +=0.005; requestanimationframe( animate ); render(); update(); } // creates random field of particle objects function makeparticles() { var particle, material; // we're gonna move z position -1000 (far away) // 1000 (where photographic camera is) , add together random particle @ every pos. ( var zpos= -1000; zpos < 1000; zpos+=20 ) { // create particle material , pass through // colour , custom particle render function defined. material = new three.particlecanvasmaterial( { program: particlerender } ); // create particle particle = new three.particle(material); // give random x , y position between -500 , 500 particle.position.x = math.random() * 1000 - 500; particle.position.y = math.random() * 1000 - 500; // set z position particle.position.z = zpos; // scale bit particle.scale.x = particle.scale.y = 10; // add together scene scene.add( particle ); // , array of particles. particles.push(particle); } } // there isn't built in circle particle renderer // have define our own. function particlerender( context ) { // passed reference canvas context context.beginpath(); // , have draw our shape @ 0,0 - in // case arc 0 2pi radians or 360ยบ - total circle! context.arc( 0, 0, 0.2, 2, math.pi * 4, true ); context.fillstyle = "white"; context.fill(); }; // moves particles dependent on mouse position function updateparticles() { // iterate through every particle for(var i=0; i<particles.length; i++) { particle = particles[i]; // , move forwards dependent on mousey position. particle.position.z += 250 * 0.02; // if particle close move if(particle.position.z>1000) particle.position.z-=2000; } } function render() { renderer.render( scene, photographic camera ); } function update() { updateparticles(); stats.update(); // find intersections // create ray origin @ mouse position // , direction scene (camera direction) var vector = new three.vector3( mouse.x, mouse.y, 1 ); projector.unprojectvector( vector, photographic camera ); var ray = new three.ray( camera.position, vector.subself( camera.position ).normalize() ); // create array containing objects in scene ray intersects var intersects = ray.intersectobjects( scene.children ); // intersected = object in scene closest photographic camera // , intersected ray projected mouse position // if there 1 (or more) intersections if ( intersects.length > 0 ) { // if closest object intersected not stored intersection object if ( intersects[ 0 ].object != intersected) { // restore previous intersection object (if exists) original scale if ( intersected ) { intersected.scale.x = intersected.currentscale.x; intersected.scale.y = intersected.currentscale.y; intersected.scale.z = intersected.currentscale.z; } // store reference closest object current intersection object intersected = intersects[ 0 ].object; // store scale of closest object (for later restoration) scalex = intersected.scale.x; scaley = intersected.scale.y; scalez = intersected.scale.z; intersected.currentscale = { x : scalex , y : scaley, z : scalez }; // set new scale closest object intersected.scale.x = intersected.scale.y = intersected.scale.z = 1.5; } } else // there no intersections { // restore previous intersection object (if exists) original scale if ( intersected ) { intersected.scale.x = intersected.currentscale.x; intersected.scale.y = intersected.currentscale.y; intersected.scale.z = intersected.currentscale.z; } // remove previous intersection object reference // setting current intersection object "nothing" intersected = null; } } // pour charger une page dynamiquement function page(page){ $("body").animate({opacity:0},1000, function(){ $("body").empty(); $("body").load(page +'.html'); $("body").animate({opacity:1},1000, function(){ }); }); } </script> </html>
you have
body { overflow: hidden; } that @ to the lowest degree 1 part of problem, specifies page contents should not scroll truncated. may need alter other parts of css layout want, needs removed.
scroll three.js
No comments:
Post a Comment