OnDocumentMouseMove three.js 不工作

Question

我对 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;
}   

（顺便说一句，我不想​​使用轨道控制） 提前致谢

下面是完整的代码

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

Answer 1

变量windowHalfX 和windowHalfY 未在您的代码中定义。

如果相机的位置应该取决于鼠标的位置，那么你必须通过鼠标位置的改变来操纵相机的位置。这意味着您必须计算当前鼠标位置和之前鼠标位置的差值。

如果你想计算位置的操作，取决于鼠标相对于画布中心的位置，那么代码应该看起来像这样：

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

查看sn-p：

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>