Question

我想在单击按钮时更改/启动对象的动画旋转。据我所知，渲染函数是一个无限循环，而cylinder.rotation.x + = 0.1会使角度加起来并使事物变得圆润。我想使用按钮更改启动此参数。到目前为止，我只设法在点击按钮时添加一次旋转。也许工作示例会更好地解释：

<html>
    <head>
        <title>3D Cube</title>
        <style>

            canvas { width: 100%; 
            height: 100% }
            </style>
    </head>
    <body>
        <script src="three.js"></script>
        <script>

            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

            var renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            var cylindergeometry = new THREE.CylinderGeometry(0.1, 0.1, 2, 50, false);
            var cylindermaterial = new THREE.MeshLambertMaterial({wireframe: true, color: 0x000000});
            var cylinder = new THREE.Mesh(cylindergeometry, cylindermaterial);
            cylinder.position.set(0,0,0);
            scene.add(cylinder);

            camera.position.z = 5;

            var render = function () {
                requestAnimationFrame(render);

                cylinder.rotation.x = 0.1;

                renderer.render(scene, camera);
            };

            render();
            var btn = document.createElement("BUTTON");
            var t = document.createTextNode("CLICK ME");     
            btn.appendChild(t);    
            document.body.appendChild(btn);


            btn.onclick=function(){
                // start animation
                // change cylinder.rotation.x = 0.1; to cylinder.rotation.x += 0.1;
            };
        </script>

    </body>
</html>

Answer 1

在render()内移动onclick。

var render = function () {
  requestAnimationFrame(render);

  cylinder.rotation.x += 0.1;

  renderer.render(scene, camera);
};

btn.onclick = function() {
  render();
};

这适用于您的特定问题，但如果您想要执行更复杂的逻辑，则可能不是一个好的解决方案。相反，您可以将渲染和柱面逻辑分成如下：

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

/* cylinder rotation logic */
var rotateCylinder = function() {
  requestAnimationFrame(rotateCylinder);
  cylinder.rotation.x += 0.1;
};

/* start the rotation */
btn.onclick = function() {
  rotateCylinder();
};

这完全脱离了我的头脑，可能有其自身的缺点。

Answer 2

将变量内的值设为“0.1”，并在onclick回调中更改该变量。实际上，让变量从零开始。然后在按钮的回调中增加到0.1。

...
camera.position.z = 5;

var rotationAmount = 0.0; // initial value is zero so it starts not rotating.

var render = function () {
    requestAnimationFrame(render);

    // make 0.1 a variable and increment the rotation, by that variable, between every frame.
    cylinder.rotation.x += rotationAmount; // starts without any rotation. even though "+=" is there.
    // without "+=" your object won't rotate as frames change. it would stand still in a 0.1 angle, frame after frame.

    renderer.render(scene, camera);
};
...

你的onclick回调。首次点击按钮后，动画将开始。

...
btn.onclick=function(){
    // start animation
    // change cylinder.rotation.x = 0.1; to cylinder.rotation.x += 0.1;

    // changing variable inside onclick callback.
    rotationAmount += 0.1 // every click on that button will make rotation faster. it started at zero, first click will put it to 0.1.
    // or add any other logic you can imagine using this button.
    if (rotationAtmount > 0.1) 
        rotationAtmount = 0 // 1 click starts, 1 click stops.
};
...

Three.js在点击时改变旋转

2 个答案: