Three.js 在点击时改变旋转答案

【问题标题】：Three.js change rotation on clickThree.js 在点击时改变旋转
【发布时间】：2017-02-20 07:35:27
【问题描述】：

我想在单击按钮时更改/启动对象的动画旋转。我知道渲染功能是一个无限循环，而 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>

【问题讨论】：

标签： javascript three.js rotation

【解决方案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();
};

这完全出乎我的意料，并且可能有其自身的缺点。

【讨论】：

【解决方案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.
};
...

【讨论】：