Javascript 如何点击并滑入三个js立方体？
我有这个代码，它工作得很好，我想添加一个情况，当我点击红色立方体时，所有页面都“跳转”到立方体附近。（也许是照相机？）。 我不知道，我希望你能帮助我 一般来说，我想学习如何在三个js中单击一个对象，然后移动到页面中的第二个对象 这是我的代码：Javascript 如何点击并滑入三个js立方体？,javascript,jquery,three.js,Javascript,Jquery,Three.js,我有这个代码，它工作得很好，我想添加一个情况，当我点击红色立方体时，所有页面都“跳转”到立方体附近。（也许是照相机？）。 我不知道，我希望你能帮助我 一般来说，我想学习如何在三个js中单击一个对象，然后移动到页面中的第二个对象 这是我的代码： <html> <head> <script src="js/three.js"></script> </head> <body> <script>
<html>
<head>
<script src="js/three.js"></script>
</head>
<body>
<script>
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(document.body.clientWidth, document.body.clientHeight);
document.body.appendChild(renderer.domElement);
renderer.setClearColorHex(0xEEEEEE, 1.0);
renderer.clear();
renderer.shadowCameraFov = 50;
renderer.shadowMapWidth = 1024;;
renderer.shadowMapHeight = 1024;
var fov = 45; // camera field-of-view in degrees
var width = renderer.domElement.width;
var height = renderer.domElement.height;
var aspect = width / height; // view aspect ratio
var near = 1; // near clip plane
var far = 10000; // far clip plane
var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.z = -400;
camera.position.x = 200;
camera.position.y = 350;
var scene = new THREE.Scene();
var cube = new THREE.Mesh(
new THREE.CubeGeometry(50, 50, 50),
new THREE.MeshLambertMaterial({ color: 0xff0000 })
);
scene.add(cube);
cube.castShadow = true;
cube.receiveShadow = true;
var plane = new THREE.Mesh(
new THREE.PlaneGeometry(400, 200, 10, 10),
new THREE.MeshLambertMaterial({ color: 0xffffff }));
plane.rotation.x = -Math.PI / 2;
plane.position.y = -25.1;
plane.receiveShadow = true;
scene.add(plane);
var light = new THREE.SpotLight();
light.castShadow = true;
light.position.set(170, 330, -160);
scene.add(light);
var litCube = new THREE.Mesh(
new THREE.CubeGeometry(50, 50, 50),
new THREE.MeshLambertMaterial({ color: 0xffffff }));
litCube.position.y = 50;
litCube.castShadow = true;
scene.add(litCube);
renderer.shadowMapEnabled = true;
renderer.render(scene, camera);
var paused = false;
var last = new Date().getTime();
var down = false;
var sx = 0, sy = 0;
window.onmousedown = function (ev) {
down = true; sx = ev.clientX; sy = ev.clientY;
};
window.onmouseup = function () { down = false; };
window.onmousemove = function (ev) {
if (down) {
var dx = ev.clientX - sx;
var dy = ev.clientY - sy;
camera.position.x += dx;
camera.position.y += dy;
sx += dx;
sy += dy;
}
}
function animate(t) {
if (!paused) {
last = t;
litCube.position.y = 60 - Math.sin(t / 900) * 25;
litCube.position.x = Math.cos(t / 600) * 85;
litCube.position.z = Math.sin(t / 600) * 85;
litCube.rotation.x = t / 500;
litCube.rotation.y = t / 800;
renderer.clear();
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
window.requestAnimationFrame(animate, renderer.domElement);
};
animate(new Date().getTime());
onmessage = function (ev) {
paused = (ev.data == 'pause');
};
</script>
</body>
</html>
var renderer=new THREE.WebGLRenderer（{antialas:true}）；
renderer.setSize（document.body.clientWidth、document.body.clientHeight）；
document.body.appendChild（renderer.doElement）；
setClearColorHex（0xEEEE，1.0）；
.clear（）；
renderer.shadowCameraFov=50；
renderer.shadowMapWidth=1024；；
renderer.shadowmapeight=1024；
变量fov=45；//摄像机视野（度）
var width=renderer.domeElement.width；
var height=renderer.domeElement.height；
变量纵横比=宽度/高度；//视图纵横比
var near=1；//近剪裁平面
var far=10000；//远剪裁平面
var摄像机=新的三个透视摄像机（视野、方位、近距离、远距离）；
camera.position.z=-400；
摄像机位置x=200；
摄像机位置y=350；
var scene=new THREE.scene（）；
var cube=新的三个网格(
新三.容积法（50,50,50），
新的3.MeshLambertMaterial（{color:0xff0000}）
);
场景.添加（立方体）；
cube.castShadow=true；
cube.receiveShadow=true；
var平面=新的三点网格(
新的三个平面几何体（400、200、10、10），
新的3.MeshLambertMaterial（{color:0xffffff}））；
plane.rotation.x=-Math.PI/2；
平面位置y=-25.1；
plane.receiveShadow=true；
场景。添加（平面）；
var light=新的三个聚光灯（）；
light.castShadow=true；
光。位置。设置（170330，-160）；
场景。添加（灯光）；
var litCube=new THREE.Mesh(
新三.容积法（50,50,50），
新的3.MeshLambertMaterial（{color:0xffffff}））；
litCube.position.y=50；
litCube.castShadow=true；
添加（litCube）；
renderer.shadowMapEnabled=true；
渲染器。渲染（场景、摄影机）；
var=false；
var last=new Date（）.getTime（）；
var-down=false；
var-sx=0，sy=0；
window.onmousedown=功能（ev）{
down=true；sx=ev.clientX；sy=ev.clientY；
};
window.onmouseup=function（）{down=false；}；
window.onmousemove=功能（ev）{
如果（向下）{
var dx=ev.clientX-sx；
var dy=ev.clientY-sy；
摄像机.position.x+=dx；
摄像机位置y+=dy；
sx+=dx；
sy+=dy；
}
}
函数动画（t）{
如果（！暂停）{
last=t；
litCube.position.y=60-数学sin（t/900）*25；
litCube.position.x=数学cos（t/600）*85；
litCube.position.z=数学sin（t/600）*85；
litCube.旋转x=t/500；
litCube.rotation.y=t/800；
.clear（）；
摄像机。注视（场景。位置）；
渲染器。渲染（场景、摄影机）；
}
requestAnimationFrame（动画，渲染器.doElement）；
};
动画（newdate（）.getTime（））；
onmessage=函数（ev）{
暂停=（ev.data==“暂停”）；
};
谢谢：）要做到这一点，您需要实现不同的独立部分：
- 选择一个对象可以通过使用来完成，您可以在这里的SO和三个.js示例中找到许多示例，例如
- 定向摄影机-查看-和缩放可以通过多种方式完成，但您可能希望使用某种控件来简化摄影机的放置过程，例如。举个例子似乎是恰当的
- 最后一点，正如你的标题所说的“滑动”，是“相机跳跃”是如何完成的。如果您想要平滑缩放，则需要一种缓和功能。看看这个
- 文森特写了一个极好的答案。我只想添加一个例子来帮助理解
<script>
var container, stats;
var camera, scene, projector, raycaster, renderer, selected;
var target, zoom=false;
var mouse = new THREE.Vector2(), INTERSECTED;
var radius = 100, theta = 0;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
scene = new THREE.Scene();
var light = new THREE.DirectionalLight( 0xffffff, 2 );
light.position.set( 1, 1, 1 ).normalize();
scene.add( light );
var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( -1, -1, -1 ).normalize();
scene.add( light );
var geometry = new THREE.CubeGeometry( 20, 20, 20 );
var cube = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: '#F3B557' } ) );
cube.rotation = new THREE.Euler(0,Math.PI/4,0);
cube.position = new THREE.Vector3(-20,0,0);
scene.add(cube);
cube = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: '#F05B47' } ) );
cube.rotation = new THREE.Euler(0,Math.PI/4,0);
cube.position = new THREE.Vector3(20,0,0);
scene.add(cube);
projector = new THREE.Projector();
raycaster = new THREE.Raycaster();
renderer = new THREE.WebGLRenderer();
renderer.setClearColor( 0xf0f0f0 );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.sortObjects = false;
container.appendChild(renderer.domElement);
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
window.addEventListener( 'resize', onWindowResize, false );
renderer.domElement.addEventListener( 'mousedown', onCanvasMouseDown, false);
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
// set lookAt position according to target position
if(target){
camera.lookAt( target.position );
}else{
camera.lookAt(new THREE.Vector3(0,0,0));
}
//zoom in and out
if(zoom && camera.fov>10){
camera.fov-=1;
camera.updateProjectionMatrix();
}else if(!zoom && camera.fov<70){
camera.fov+=1;
camera.updateProjectionMatrix();
}
camera.position = new THREE.Vector3(0,100,100);
// find intersections
var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
projector.unprojectVector( vector, camera );
raycaster.set( camera.position, vector.sub( camera.position ).normalize() );
var intersects = raycaster.intersectObjects( scene.children );
if ( intersects.length > 0 ) {
if ( INTERSECTED != intersects[ 0 ].object ) {
if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
INTERSECTED = intersects[ 0 ].object;
INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
INTERSECTED.material.emissive.setHex( 0xff0000 );
}
} else {
if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
INTERSECTED = null;
}
renderer.render( scene, camera );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseMove( event ) {
event.preventDefault();
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}
//detect selected cube
function onCanvasMouseDown( event ){
if(INTERSECTED){
target = INTERSECTED;
zoom = true;
}else{
zoom = false;
}
}
</script>
var容器，stats；
var摄影机、场景、投影仪、光线投射器、渲染器，已选定；
var目标，缩放=假；
var mouse=new THREE.Vector2（），相交；
var半径=100，θ=0；
init（）；
制作动画（）；
函数init（）{
container=document.createElement（'div'）；
文件.正文.附件（容器）；
摄像头=新的三个透视摄像头（70，window.innerWidth/window.innerHeight，11000）；
场景=新的三个。场景（）；
var灯=新的三方向灯（0xffffff，2）；
light.position.set（1,1,1）.normalize（）；
场景。添加（灯光）；
var灯=新的三方向灯（0xffffff）；
light.position.set（-1，-1，-1）.normalize（）；
场景。添加（灯光）；
var几何=新的三立方测量法（20,20,20）；
var cube=new THREE.Mesh（几何体，new THREE.MeshLambertMaterial（{color:'#F3B557'}））；
cube.rotation=new THREE.Euler（0，Math.PI/4,0）；
cube.position=新的三个向量3（-20,0,0）；
场景.添加（立方体）；
cube=new THREE.Mesh（几何体，new THREE.MeshLambertMaterial（{color:'#F05B47'}））；
cube.rotation=new THREE.Euler（0，Math.PI/4,0）；
立方体位置=新的三个向量3（20,0,0）；
场景.添加（立方体）；
投影仪=新的三个投影仪（）；
raycaster=new-THREE.raycaster（）；
renderer=new THREE.WebGLRende