OnDocumentMouseMove three.js 不工作
OnDocumentMouseMove three.js not working
我完全没有使用 three.js 的经验,但我正在尝试创建与此相同的相机效果:https://threejs.org/examples/#webgl_geometry_colors
我试图使用以下代码来读取鼠标位置并应用它们(在示例中它们以相同的方式执行)。
为了试图找出问题出在哪里,我输入了 "camera.positon.x = 1000" 以查看它是否有效,但它没有。现在我不知道问题出在哪里,就是无法让鼠标工作。
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY );
camera.position.x = 10000;
}
(顺便说一句,我不想使用Orbit Controls)
提前致谢
下面是完整的代码
<script>
var renderer, camera, controls, scene, mesh1, mesh2;
function init(){
renderer = new THREE.WebGLRenderer({canvas: document.getElementById('myCanvas'), antialias: true});
renderer.setClearColor(0x000044);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(15, window.innerWidth/window.innerHeight, 0.1, 3000);
camera.position.set(0,0,750);
resize();
window.onresize = resize;
var light = new THREE.AmbientLight(0xFFFFFF, 0.9);
scene.add(light);
var light2 = new THREE.PointLight(0xFFFFFF, 1);
scene.add(light2);
light2.position.set(0,8,75);
var geometry = new THREE.BoxGeometry(30, 30, 1);
var material = new THREE.MeshPhongMaterial({
color: 0xFF1111,
});
mesh1 = new THREE.Mesh(geometry,material);
mesh1.rotation.x = -0.05;
scene.add(mesh1);
mesh1.position.set(0,0,50);
var geometry = new THREE.BoxGeometry(30, 30, 1);
var material = new THREE.MeshPhongMaterial({
color: 0x11FF11,
});
mesh2 = new THREE.Mesh(geometry,material);
mesh2.rotation.x = -0.05;
scene.add(mesh2);
mesh2.position.set(0,0,0);
var geometry = new THREE.BoxGeometry(30, 30, 1);
var material = new THREE.MeshPhongMaterial({
color: 0x1111FF,
});
mesh3 = new THREE.Mesh(geometry,material);
mesh3.rotation.x = -0.05;
scene.add(mesh3);
mesh3.position.set(0,0, -50);
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
}
function resize() {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY );
camera.position.x = 10000;
}
function render() {
requestAnimationFrame( render );
renderer.render( scene, camera );
camera.position.x += 0.5;
camera.lookAt(new THREE.Vector3(0, 0, 0));
}
init(); render();
</script>
您的代码中未定义变量 windowHalfX
和 windowHalfY
。
如果相机的位置应该取决于鼠标的位置,那么你必须通过鼠标位置的变化来操纵相机的位置。这意味着您必须计算当前鼠标位置与先前鼠标位置的差异。
如果你想根据鼠标相对于 canvas 中心的位置计算位置的操作,那么代码应该看起来像这样:
var prevDeltaX = 0, prevDeltaY = 0;
function onDocumentMouseMove( event ) {
var mouseX = event.clientX;
var mouseY = event.clientY;
var deltaX = (window.innerWidth / 2 - mouseX);
var deltaY = (mouseY - window.innerHeight / 2);
camera.position.x += deltaX - prevDeltaX;
camera.position.y += deltaY - prevDeltaY;
prevDeltaX = deltaX; prevDeltaY = deltaY;
}
查看代码段:
var renderer, camera, controls, scene, mesh1, mesh2;
function init(){
renderer = new THREE.WebGLRenderer({canvas: document.getElementById('myCanvas'), antialias: true});
renderer.setClearColor(0x000044);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(15, window.innerWidth/window.innerHeight, 0.1, 3000);
camera.position.set(0,0,750);
resize();
window.onresize = resize;
var light = new THREE.AmbientLight(0xFFFFFF, 0.9);
scene.add(light);
var light2 = new THREE.PointLight(0xFFFFFF, 1);
scene.add(light2);
light2.position.set(0,8,75);
var geometry = new THREE.BoxGeometry(30, 30, 1);
var material = new THREE.MeshPhongMaterial({
color: 0xFF1111,
});
mesh1 = new THREE.Mesh(geometry,material);
mesh1.rotation.x = -0.05;
scene.add(mesh1);
mesh1.position.set(0,0,50);
var geometry = new THREE.BoxGeometry(30, 30, 1);
var material = new THREE.MeshPhongMaterial({
color: 0x11FF11,
});
mesh2 = new THREE.Mesh(geometry,material);
mesh2.rotation.x = -0.05;
scene.add(mesh2);
mesh2.position.set(0,0,0);
var geometry = new THREE.BoxGeometry(30, 30, 1);
var material = new THREE.MeshPhongMaterial({
color: 0x1111FF,
});
mesh3 = new THREE.Mesh(geometry,material);
mesh3.rotation.x = -0.05;
scene.add(mesh3);
mesh3.position.set(0,0, -50);
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
}
function resize() {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
}
var prevDeltaX = 0, prevDeltaY = 0;
function onDocumentMouseMove( event ) {
var mouseX = event.clientX;
var mouseY = event.clientY;
var deltaX = (window.innerWidth / 2 - mouseX);
var deltaY = (mouseY - window.innerHeight / 2);
camera.position.x += deltaX - prevDeltaX;
camera.position.y += deltaY - prevDeltaY;
prevDeltaX = deltaX; prevDeltaY = deltaY;
}
function render() {
requestAnimationFrame( render );
renderer.render( scene, camera );
//camera.position.x += 0.5;
camera.lookAt(new THREE.Vector3(0, 0, 0));
}
init(); render();
<script src="https://threejs.org/build/three.min.js"></script>
<canvas id="myCanvas"></canvas>
我完全没有使用 three.js 的经验,但我正在尝试创建与此相同的相机效果:https://threejs.org/examples/#webgl_geometry_colors
我试图使用以下代码来读取鼠标位置并应用它们(在示例中它们以相同的方式执行)。 为了试图找出问题出在哪里,我输入了 "camera.positon.x = 1000" 以查看它是否有效,但它没有。现在我不知道问题出在哪里,就是无法让鼠标工作。
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY );
camera.position.x = 10000;
}
(顺便说一句,我不想使用Orbit Controls) 提前致谢
下面是完整的代码
<script>
var renderer, camera, controls, scene, mesh1, mesh2;
function init(){
renderer = new THREE.WebGLRenderer({canvas: document.getElementById('myCanvas'), antialias: true});
renderer.setClearColor(0x000044);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(15, window.innerWidth/window.innerHeight, 0.1, 3000);
camera.position.set(0,0,750);
resize();
window.onresize = resize;
var light = new THREE.AmbientLight(0xFFFFFF, 0.9);
scene.add(light);
var light2 = new THREE.PointLight(0xFFFFFF, 1);
scene.add(light2);
light2.position.set(0,8,75);
var geometry = new THREE.BoxGeometry(30, 30, 1);
var material = new THREE.MeshPhongMaterial({
color: 0xFF1111,
});
mesh1 = new THREE.Mesh(geometry,material);
mesh1.rotation.x = -0.05;
scene.add(mesh1);
mesh1.position.set(0,0,50);
var geometry = new THREE.BoxGeometry(30, 30, 1);
var material = new THREE.MeshPhongMaterial({
color: 0x11FF11,
});
mesh2 = new THREE.Mesh(geometry,material);
mesh2.rotation.x = -0.05;
scene.add(mesh2);
mesh2.position.set(0,0,0);
var geometry = new THREE.BoxGeometry(30, 30, 1);
var material = new THREE.MeshPhongMaterial({
color: 0x1111FF,
});
mesh3 = new THREE.Mesh(geometry,material);
mesh3.rotation.x = -0.05;
scene.add(mesh3);
mesh3.position.set(0,0, -50);
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
}
function resize() {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY );
camera.position.x = 10000;
}
function render() {
requestAnimationFrame( render );
renderer.render( scene, camera );
camera.position.x += 0.5;
camera.lookAt(new THREE.Vector3(0, 0, 0));
}
init(); render();
</script>
您的代码中未定义变量 windowHalfX
和 windowHalfY
。
如果相机的位置应该取决于鼠标的位置,那么你必须通过鼠标位置的变化来操纵相机的位置。这意味着您必须计算当前鼠标位置与先前鼠标位置的差异。
如果你想根据鼠标相对于 canvas 中心的位置计算位置的操作,那么代码应该看起来像这样:
var prevDeltaX = 0, prevDeltaY = 0;
function onDocumentMouseMove( event ) {
var mouseX = event.clientX;
var mouseY = event.clientY;
var deltaX = (window.innerWidth / 2 - mouseX);
var deltaY = (mouseY - window.innerHeight / 2);
camera.position.x += deltaX - prevDeltaX;
camera.position.y += deltaY - prevDeltaY;
prevDeltaX = deltaX; prevDeltaY = deltaY;
}
查看代码段:
var renderer, camera, controls, scene, mesh1, mesh2;
function init(){
renderer = new THREE.WebGLRenderer({canvas: document.getElementById('myCanvas'), antialias: true});
renderer.setClearColor(0x000044);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(15, window.innerWidth/window.innerHeight, 0.1, 3000);
camera.position.set(0,0,750);
resize();
window.onresize = resize;
var light = new THREE.AmbientLight(0xFFFFFF, 0.9);
scene.add(light);
var light2 = new THREE.PointLight(0xFFFFFF, 1);
scene.add(light2);
light2.position.set(0,8,75);
var geometry = new THREE.BoxGeometry(30, 30, 1);
var material = new THREE.MeshPhongMaterial({
color: 0xFF1111,
});
mesh1 = new THREE.Mesh(geometry,material);
mesh1.rotation.x = -0.05;
scene.add(mesh1);
mesh1.position.set(0,0,50);
var geometry = new THREE.BoxGeometry(30, 30, 1);
var material = new THREE.MeshPhongMaterial({
color: 0x11FF11,
});
mesh2 = new THREE.Mesh(geometry,material);
mesh2.rotation.x = -0.05;
scene.add(mesh2);
mesh2.position.set(0,0,0);
var geometry = new THREE.BoxGeometry(30, 30, 1);
var material = new THREE.MeshPhongMaterial({
color: 0x1111FF,
});
mesh3 = new THREE.Mesh(geometry,material);
mesh3.rotation.x = -0.05;
scene.add(mesh3);
mesh3.position.set(0,0, -50);
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
}
function resize() {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
}
var prevDeltaX = 0, prevDeltaY = 0;
function onDocumentMouseMove( event ) {
var mouseX = event.clientX;
var mouseY = event.clientY;
var deltaX = (window.innerWidth / 2 - mouseX);
var deltaY = (mouseY - window.innerHeight / 2);
camera.position.x += deltaX - prevDeltaX;
camera.position.y += deltaY - prevDeltaY;
prevDeltaX = deltaX; prevDeltaY = deltaY;
}
function render() {
requestAnimationFrame( render );
renderer.render( scene, camera );
//camera.position.x += 0.5;
camera.lookAt(new THREE.Vector3(0, 0, 0));
}
init(); render();
<script src="https://threejs.org/build/three.min.js"></script>
<canvas id="myCanvas"></canvas>