正弦波动画未出现在预期的原点

Question

我正在尝试 three.js 并尝试创建正弦波动画，该动画从用鼠标单击平面的位置发出。问题是波纹的起源并不完全是你点击它的地方——它似乎总是来自平面的中间，尽管点击平面的最远范围似乎确实以某种方式改变了波浪。

数学从来都不是我的强项，所以我确定这是某种逻辑问题！

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
    </head>
    <body>
    </body>
    <script src="three.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 10000);
        var renderer = new THREE.WebGLRenderer();
        renderer.setClearColor(0x17293a);
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        var mouse = new THREE.Vector3();

        var planeGeometry = new THREE.PlaneGeometry(200, 100, 50, 50);
        var planeMaterial = new THREE.MeshLambertMaterial({color: 0xEF3523, wireframe: true});
        var plane = new THREE.Mesh(planeGeometry, planeMaterial);
        plane.geometry.dynamic = true;
        plane.position.set(0, 0, 0);
        plane.rotation.x = -0.5 * Math.PI;
        scene.add(plane);
        camera.position.set(0, 90, 100);
        camera.lookAt(scene.position);

        var raycaster = new THREE.Raycaster();

        var checkMousePos = function() {
            mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
            mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
            raycaster.setFromCamera( mouse, camera );   
            var intersects = raycaster.intersectObjects( scene.children );
                console.log(intersects.length);
                if (intersects.length > 0) {
                    var wave = {};
                    wave.x = intersects[0].point.x;
                    wave.y = intersects[0].point.y;
                    wave.z = intersects[0].point.z;
                    drawWave(wave);
                }
        };

        drawWave = function(wave){
            var center = new THREE.Vector3(wave.x, wave.y, wave.z);
            var anim = function(ts) {
                requestAnimationFrame(anim);
                var vLength = plane.geometry.vertices.length;
                for (var i = 0; i < vLength; i++) {
                    var v = plane.geometry.vertices[i];
                    var dist = new THREE.Vector3(v.x, v.y, v.z).sub(center);
                    var size = 5.0;
                    var magnitude = 4;
                    v.z = Math.sin(dist.length()/-size + (ts/500)) * magnitude;
                }
                plane.geometry.verticesNeedUpdate = true;
                renderer.render(scene, camera);             
            }
            anim();
        };

        $(document).on('click', function(e) {
            checkMousePos();
        });


        var render = function() {
            requestAnimationFrame(render);
            renderer.render(scene, camera);
        };
        render();
    </script>
</html>

JSfiddle：https://jsfiddle.net/dwo3kvLp/

Answer 1

创建中心向量时似乎需要交换 y 轴和 z 轴：

var center = new THREE.Vector3(wave.x, -wave.z, wave.y);

这里好像是因为飞机旋转了:

plane.rotation.x = -0.5 * Math.PI;

https://jsfiddle.net/dwo3kvLp/3/

Answer 2

如果您删除旋转平面的线 (plane.rotation.x = -0.5 * Math.PI;)，您会发现它工作得很好。

所以旋转后的 x、y 和 z 坐标并不一定意味着您直觉上认为这些方向只是通过观察它（而且它们肯定不要引用与您从用户点击中捕获的 x 和 y 相同的方向）。发生的事情是您的 y 和 z 坐标被实现为参考旧方向。

如果您添加一个 console.log 语句来打印出您的 wave.x、wave.y 和 wave.z 值，就在它们被赋值之后和调用 [= 之前18=]，然后打开控制台，稍微点一下，应该就可以看到问题了。（您可以直接在 JSFiddle 页面上执行此操作）

事实证明，当您将点分配给 checkMousePos 底部的波浪时，看起来的方向将是 "y"（"forward-backward" ) 由 "z" 控制并且基本上保持恒定加上或减去波浪的高度。这就是为什么波浪原点总是在中心（向前-向后）但左右移动就好了。

因此，您需要做的就是更改这些行来修复它：

wave.y = intersects[0].point.y;
wave.z = intersects[0].point.z;

至

wave.y = intersects[0].point.z * -1;
wave.z = intersects[0].point.y;

它应该可以工作。

完整更新代码：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75,
    window.innerWidth/window.innerHeight, 0.1, 10000);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x17293a);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var mouse = new THREE.Vector3();

var planeGeometry = new THREE.PlaneGeometry(200, 100, 50, 50);
var planeMaterial = new THREE.MeshLambertMaterial({color: 0xEF3523, wireframe: true});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.geometry.dynamic = true;
plane.position.set(0, 0, 0);
plane.rotation.x = -0.5 * Math.PI;
scene.add(plane);
camera.position.set(0, 90, 100);
camera.lookAt(scene.position);

var raycaster = new THREE.Raycaster();

var checkMousePos = function() {
  mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
  mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
  raycaster.setFromCamera( mouse, camera ); 
  var intersects = raycaster.intersectObjects( scene.children );
  console.log(intersects.length);
  if (intersects.length > 0) {
    var wave = {};
    wave.x = intersects[0].point.x;
    wave.y = intersects[0].point.z * -1;
    wave.z = intersects[0].point.y;
    drawWave(wave);
  }
};

drawWave = function(wave){
  var center = new THREE.Vector3(wave.x, wave.y, wave.z);
  var anim = function(ts) {
    requestAnimationFrame(anim);
    var vLength = plane.geometry.vertices.length;
    for (var i = 0; i < vLength; i++) {
      var v = plane.geometry.vertices[i];
      var dist = new THREE.Vector3(v.x, v.y, v.z).sub(center);
      var size = 5.0;
      var magnitude = 4;
      v.z = Math.sin(dist.length()/-size + (ts/500)) * magnitude;
    }
    plane.geometry.verticesNeedUpdate = true;
    renderer.render(scene, camera);             
  }
  anim();
};

$(document).on('click', function(e) {
  checkMousePos();
});


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

正弦波动画未出现在预期的原点

Sine wave animation not occurring at expected origin

javascript

math

logic

animation

three.js