旋转对象随机矩阵(Three.js)

Rotate object with random matrix (Three.js)

本文关键字：Three js 对象 随机 旋转      更新时间：2023-09-26

我试图在Three.js中创建一个骰子，它将在点击时随机旋转，但是我在点击时无法获得轴值更新。这就是我目前所做的。

<style type="text/css" media="screen">
    html, body, canvas {
        margin: 0;
        padding: 0;
        background: #4e6171;
        color: black;
    }
    canvas {
        width: 100%;
        height: 100%;
    }
</style>
<body onload="animateScene();">
  <div id="container"></div>
  <script type="text/javascript" src="js/three.min.js"></script>
  <script type="text/javascript" src="js/Detector.js"></script>
  <script type="text/javascript">
    if (!Detector.webgl) Detector.addGetWebGLMessage();
  </script>
  <script type="text/javascript" src="js/TrackballControls.js"></script>
  <script type="text/javascript" src="js/setup.js"></script>

<script type="text/javascript">
function animateScene() {
    var objectX = Math.floor(Math.random() * 20);
    var objectY = Math.floor(Math.random() * 20);
    var objectZ = Math.floor(Math.random() * 20);

    var radius = 30;
    radius *= 1;
    var material = new THREE.MeshBasicMaterial({
        color: 0xe2e2e2,
        transparent: true,
        opacity: 1
    });
    var geometry = new THREE.IcosahedronGeometry(radius, 0);
    var object = new THREE.Mesh(geometry, material);
    var edges = new THREE.EdgesHelper(object, 0xffffff);
    edges.material.linewidth = 2;
    scene.add(object);
    scene.add(edges);
    scene.add(new THREE.AxisHelper(100));
    object.rotation.x = objectX;
    object.rotation.y = objectY;
    object.rotation.z = objectZ;
    controls.enabled = false;
};
</script>
<button class="button" onclick="object.updateMatrix();">Generate</button>
</body>

我希望能够点击对象，并有它动画旋转与新更新的随机轴坐标。目前我得到一个"对象是未定义"的错误。

我无法得到一个小提琴工作，但这里有一个链接。

任何帮助都很感激，谢谢。

我看到这里有两个问题:

  1. 你的"object"变量是在animateScene()函数的范围内定义的，这就是为什么你会得到"object is undefined"错误。你可以在函数之外定义object(使用"var object")，然后它将在全局作用域中，或者你可以在animateScene函数中附加onClick回调。
  2. 即使你修复了作用域问题，对象也不会旋转，因为你只在animateScene()中设置了一次旋转。相反，您需要为X, Y和Z生成新的随机值，然后调用object. updatemmatrix()。

希望有帮助!

UPDATE

所以我昨晚有了一个突破，能够得到我正在寻找的东西。我最终在场景中创建了另一个函数，生成新的x和y值，然后更新矩阵。我用tween.js处理动画。此外，我将点击事件绑定在animateScene函数内部，而不是外部的onClick。

非常感谢Tim在这个问题上的指导。

<body onload="animateScene();">
<div id="container"></div>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/three.min.js"></script>
<script type="text/javascript" src="js/tween.min.js"></script>
<script type="text/javascript" src="js/Detector.js"></script>
<script type="text/javascript">
    if (!Detector.webgl) Detector.addGetWebGLMessage();
</script>
<script type="text/javascript" src="js/TrackballControls.js"></script>
<script type="text/javascript" src="js/setup.js"></script>
<script type="text/javascript">
    var object
    function animateScene() {

        var radius = 30;
        radius *= 1;
        var material = new THREE.MeshBasicMaterial({
            color: 0xe2e2e2,
            transparent: true,
            opacity: 1
        });
        var geometry = new THREE.IcosahedronGeometry(radius, 0);
        var object = new THREE.Mesh(geometry, material);
        var edges = new THREE.EdgesHelper(object, 0xffffff);
        edges.material.linewidth = 2;
        scene.add(object);
        scene.add(edges);
        scene.add(new THREE.AxisHelper(100));
        controls.enabled = false;

        function rollDice() {
            var x = Math.floor(Math.random() * (14 - 7) + 7);
            var y = Math.floor(Math.random() * (14 - 7) + 7);

           var tween = new TWEEN.Tween(object.rotation)
              .to({ x, y }, 500)
              .start();
           animate();
           function animate() {
              requestAnimationFrame(animate);
              TWEEN.update();
           }
        }
        $( "#click" ).click(rollDice);
    }

</script>
<button class="button" id="click">Generate</button>
</body>
相关文章：