Scroll 3.js卷轴
到目前为止，我创建的每一个three.js场景都有这个问题，但这里有一个示例（我目前正在处理的示例）。如果你放了太多的html代码，它会出现在场景下，但我无法向下滚动查看它。如何允许页面滚动？以下是一个页面示例：Scroll 3.js卷轴,scroll,three.js,Scroll,Three.js,到目前为止，我创建的每一个three.js场景都有这个问题，但这里有一个示例（我目前正在处理的示例）。如果你放了太多的html代码，它会出现在场景下，但我无法向下滚动查看它。如何允许页面滚动？以下是一个页面示例： <!DOCTYPE html> <html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="https://ajax.g
<!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>
身体
{
颜色：#ffffff；
文本对齐：居中；
背景颜色：灰色；
边际：0px；
溢出：隐藏；
}
#居中
{
颜色：#fff；
位置：绝对位置；
顶部：50px；宽度：100%；
填充物：5px；
z指数：100；
}
#中心h1
{
字体大小：60px；
}
#容器
{
位置：绝对位置；
底部：0；
}
//主要
log（“Main.js”）；
如果（！Detector.webgl）Detector.addGetWebGLMessage（）；
//全局变量
var容器、场景、摄影机、渲染器、统计信息、控件；
//自定义变量
var t=3；
var立方；
//跟踪鼠标位置的步骤
变量投影仪，相交，鼠标={x:0，y:0}，
//存储粒子的数组
粒子=[]；
init（）；
制作动画（）；
函数init（）
{
//场面
场景=新的三个。场景（）；
//摄像机
变量SCREEN\u WIDTH=window.innerWidth，SCREEN\u HEIGHT=window.innerHeight；
可变视角=45，纵横比=屏幕宽度/屏幕高度，近=0.1，远=20000；
摄像机=新的三个透视摄像机（视角、方向、近距离、远距离）；
场景。添加（摄影机）；
摄像机位置设置（0,0800）；
摄像机。注视（场景。位置）；
//渲染器
renderer=new THREE.CanvasRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
//容器
container=document.getElementById（'container'）；
container.appendChild（renderer.doElement）；
//统计数据
统计数据=新统计数据（）；
stats.domElement.style.position='绝对'；
stats.domeElement.style.bottom='0px'；
stats.domElement.style.zIndex=100；
container.appendChild（stats.domeElement）；
//事件
三倍。窗口大小调整（渲染器、相机）；
THREEx.FullScreen.bindKey（{charCode:'m'.charCodeAt（0）}）；
//初始化对象以执行世界/屏幕计算
投影仪=新的三个投影仪（）；
//习俗
//立方体
x=窗宽/5；
y=窗内高度/10；
console.log（window.innerWidth）；
控制台.日志（窗口.内部高度）；
var几何=新的t.立方计量法（125125）；
var material=新的t.MeshBasicMaterial（{color:0xCCCC}）；
立方体=新的t形网格（几何体、材质）；
cube.name=“cube”；
场景.添加（立方体）；
立方体位置集（-x，-y，0）；
x=窗宽；
y=窗内高度/10；
var geometry2=新的t.CubeGeometry（125125）；
var material2=新的t.MeshBasicMaterial（{color:0xCCCC}）；
cube2=新t.Mesh（几何量2，材料2）；
场景。添加（立方体2）；
cube2.name=“cube2”；
立方位置集（0，-y，0）；
x=窗宽/5；
y=窗内高度/10；
var geometry3=新的t.CubeGeometry（125125）；
var material3=新的t.MeshBasicMaterial（{color:0xCCCC}）；
cube3=新t.Mesh（几何3，材料3）；
cube3.name=“cube3”；
场景。添加（立方体3）；
立方位置集（x，-y，0）；
//粒子
makeParticles（）；
//鼠标事件
document.addEventListener（'mousemove'，onMouseMove，false）；
document.addEventListener（'mousedown'，onMouseDown，false）；
}
//当鼠标移动时调用
mouseMove函数（事件）
{
//存储mouseX和mouseY位置
mouse.x=（event.clientX/window.innerWidth）*2-1；
mouse.y=-（event.clientY/window.innerHeight）*2+1；
}
函数onMouseDown（事件）
{
event.preventDefault（）；
var vector=新的三个向量3（mouse.x，mouse.y，1）；
投影仪。未投影向量（向量，相机）；
var-ray=new THREE.ray（camera.position，vector.subSelf（camera.position.normalize（））；
var intersects=光线.intersectObjects（scene.children）；
如果（相交长度>0）
{
console.log（INTERSECTED.name）；
if（INTERSECTED.name==“多维数据集”）
{
第页（“真实”）；
}
}
}
函数animate（）
{
立方体旋转y+=0.005；
立方体旋转.x-=0.005；
立方2.旋转.y+=0.005；
立方2.旋转.x-=0.005；
立方3.旋转y+=0.005；
立方3.旋转.x-=0.005；
//textMesh.rotation.y+=0.005；
请求动画帧（动画）；
render（）；
更新（）；
}
//创建粒子对象的随机场
函数makeParticles（）
{
var粒子、材料；
//我们将从z位置移动到-1000（很远）
//到1000（相机所在的位置），并在每个位置添加一个随机粒子。
对于（变量zpos=-1000；zpos<1000；zpos+=20）
{
//我们制造一种粒子材料并通过
//我们定义的颜色和自定义粒子渲染功能。
material=新的三个.ParticleCanvasMaterial（{program:particleRender}）；
//制造粒子
粒子=新的三个。粒子（材料）；
//给它一个在-500和500之间的随机x和y位置
particle.position.x=Math.random（）*1000-500；
particle.position.y=Math.random（）*1000-500；
//设置其z位置
粒子位置z=zpos；
//放大一点
particle.scale.x=particle.scale.y=10；
//将其添加到场景中
场景。添加（粒子）；
//以及粒子阵列。
粒子。推（粒子）；
}
}
//没有内置的圆形粒子渲染器
//所以我们必须定义我们自己的。
函数particleRender（上下文）
{
//我们得到了对画布上下文的引用
context.beginPath（）；
//我们只需要在0，0-处画出我们的形状
//案例一个从0到2Pi弧度或360º的圆弧-一个完整的圆！
弧（0,0,0.2,2，Math.PI*4，true）；
context.fillStyle=“白色”；
context.fill（）；
};
//根据鼠标位置移动所有粒子
函数updateParticles（）
{
//遍历每个粒子
对于（VarI=0；i1000）粒子位置z-=2000；
}
}
函数render（）
{
渲染器.render（sc
body { overflow: hidden; }