Question

我正在尝试在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>

我希望能够单击该对象并使用新更新的随机轴坐标为其设置动画。目前我收到“对象未定义”错误。

我无法得到小提琴，但这里是link。

感谢任何帮助。

Answer 1

我看到有两个问题：

您的“object”变量是在animateScene（）函数的范围内定义的，这就是您收到“object is undefined”错误的原因。您可以在函数外定义对象（带有“var object”），然后它将在全局范围内，或者您可以在animateScene函数中附加onClick回调。
即使您修复了范围问题，对象也不会旋转，因为您只在animateScene（）中设置了一次旋转。您需要为X，Y和Z生成新的随机值，然后调用object.updateMatrix（）。

希望有所帮助！

Answer 2

<强>更新

所以我昨晚取得了突破，并且能够得到我正在寻找的东西。我最终在场景中创建另一个函数，生成新的x和y值，然后更新矩阵。我用tween.js处理动画。此外，我将animateScene函数中的click事件绑定到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>

用随机矩阵（Three.js）

2 个答案: