javascript - 正弦波动画未出现在预期的原点-6ren

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

转载作者：行者123 更新时间：2023-11-29 21:37:58

我正在玩弄 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/

最佳答案

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

因此旋转后的 x、y 和 z 坐标并不一定意味着您凭直觉认为这些方向只是通过观察它(而且它们绝对不是指与您从用户点击中捕获的 x 和 y 方向相同)。发生的事情是您的 y 和 z 坐标被实现为引用旧方向。

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

事实证明，当您将点分配给 checkMousePos 底部的波浪时，看起来像是“y”(“向前-向后”)的方向由“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();

关于javascript - 正弦波动画未出现在预期的原点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34301992/

文章推荐： javascript - 在 Meteor 中获取表单数据的更好方法是什么？

文章推荐： mysql - 用于使用 mysql 查询进行分组

文章推荐： mysql - MySQL 中的添加和删除时间

文章推荐： javascript - 使用用户帐户设置页面标题 :flow-router

Javascript 正弦/余弦泰勒展开
我写的函数有问题。想法是使用 taylor 展开而不是 js 数学对象来计算 sin 和 cosin 值(在 radians 上运行) .这些是方程式: sin(x) = (x^1)/1! - (x^
python - FFT显示频谱中的(正弦)正弦波
我不知道这是编程还是数学问题，但我整理了一些FFT的简短示例。我加载了440hz的波并在顶部添加了一些正弦波，但是由于某种原因，频谱中存在一个我不理解的“波”。据我了解，频谱应该具有相同的| Y(f
c++ - 正弦、余弦、弧度和旋转
这个问题在这里已经有了答案: Java Math.cos(Math.toRadians()) returns weird values (4 个答案) 关闭 10 年前。我正在编写一个程序，我必须
ios4 - 正弦 180 的值是 1.22465e-16
我想在 ios4 中实现一个正弦和余弦计算器: if([operation isEqual:@"sin"]){ operand = (operand*M_PI/180.0); oper
midi - 正弦 LUT VHDL 不会在 800 hz 以下模拟
我使用 256 个元素为 VHDL 制作了一个正弦 LUT。我使用 MIDI 输入，因此值范围为 8.17Hz(注 #0)到 12543.85z(注 #127)。我有另一个 LUT 计算必须发送到
objective-c - 正弦 180 的值为 1.22465e-16
我想在ios4中实现一个正弦和余弦计算器: if([operation isEqual:@"sin"]){ operand = (operand*M_PI/180.0); operan

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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