个人中心
gpt4 book ai didi

scroll - 三.js 滚动

转载 作者：行者123 更新时间：2023-12-04 05:10:09 25 4
gpt4 key购买 nike

到目前为止，我创建的每一个 Three.js 场景都遇到了这个问题，但这里有一个例子(我目前正在研究的那个)。如果你放了太多的 html 代码，它会在场景下，但我无法向下滚动查看。我怎样才能允许页面滚动？这是一页示例:

<!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;

// to keep track of the mouse position
var projector, INTERSECTED, mouse = { x: 0, y: 0 },

// an array to store our particles in
particles = [];

init();
animate();

function init()
{


    // scene
    scene = new THREE.Scene();

    // camera
    var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
    var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
    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 to 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 the mouse moves
function onMouseMove( event ) 
{
// store the mouseX and 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, 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 a random field of Particle objects

function makeParticles() 
{ 

var particle, material; 

    // we're gonna move from z position -1000 (far away) 
    // to 1000 (where the camera is) and add a random particle at every pos. 
    for ( var zpos= -1000; zpos < 1000; zpos+=20 ) 
    {

    // we make a particle material and pass through the 
    // colour and custom particle render function we defined. 
    material = new THREE.ParticleCanvasMaterial( {  program: particleRender } );
    // make the particle
    particle = new THREE.Particle(material);

    // give it a random x and y position between -500 and 500
    particle.position.x = Math.random() * 1000 - 500;
    particle.position.y = Math.random() * 1000 - 500;

    // set its z position
    particle.position.z = zpos;

    // scale it up a bit
    particle.scale.x = particle.scale.y = 10;

    // add it to the scene
    scene.add( particle );

    // and to the array of particles. 
    particles.push(particle); 
    }
}

// there isn't a built in circle particle renderer 
// so we have to define our own. 

function particleRender( context ) 
{

// we get passed a reference to the canvas context
context.beginPath();
// and we just have to draw our shape at 0,0 - in this
// case an arc from 0 to 2Pi radians or 360º - a full circle!
context.arc( 0, 0, 0.2, 2,  Math.PI * 4, true );
context.fillStyle = "white";
context.fill();
};

    // moves all the particles dependent on mouse position

function updateParticles() 
{ 

    // iterate through every particle
    for(var i=0; i<particles.length; i++) 
    {

    particle = particles[i]; 

    // and move it forward dependent on the mouseY position. 
    particle.position.z +=  250 * 0.02;

    // if the particle is too close move it to the back
    if(particle.position.z>1000) particle.position.z-=2000; 

    }

}

function render()
{
renderer.render( scene, camera );
}

function update()
{
updateParticles();
stats.update();


    // find intersections

    // create a Ray with origin at the mouse position
    //   and direction into the scene (camera direction)
    var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
    projector.unprojectVector( vector, camera );
    var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );

    // create an array containing all objects in the scene with which the ray intersects
    var intersects = ray.intersectObjects( scene.children );

    // INTERSECTED = the object in the scene currently closest to the camera 
    //      and intersected by the Ray projected from the mouse position    

    // if there is one (or more) intersections
    if ( intersects.length > 0 )
    {
        // if the closest object intersected is not the currently stored intersection object
        if ( intersects[ 0 ].object != INTERSECTED) 
        {
            // restore previous intersection object (if it exists) to its original scale
            if ( INTERSECTED )  
            {
                INTERSECTED.scale.x = INTERSECTED.currentscale.x;
                INTERSECTED.scale.y = INTERSECTED.currentscale.y;
                INTERSECTED.scale.z = INTERSECTED.currentscale.z;
            }
            // store reference to closest object as 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 a new scale for closest object
            INTERSECTED.scale.x = INTERSECTED.scale.y = INTERSECTED.scale.z = 1.5;


        }
    } 

    else // there are no intersections
    {
        // restore previous intersection object (if it exists) to its 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
        //     by setting current intersection object to "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>

最佳答案

你有

body { overflow: hidden; }

这至少是您的问题的一部分，因为它指定页面内容不应滚动而应被截断。您可能需要更改 CSS 的其他部分以获得您想要的布局，但这当然需要删除。

关于scroll - 三.js 滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14993058/

25 4 0
文章推荐： railo - 我的查询是否被缓存？
文章推荐： fiware-orion - Orion CB 所需的 Fiware-Service HTTP header
文章推荐： unit-testing - 为什么不能从其他程序集继承测试方法
文章推荐： vb.net - 如何在没有 Linq 的情况下查询 DataGridView
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com