Javascript Three.js单击即可更改旋转_Javascript_Three.js_Rotation

Javascript Three.js单击即可更改旋转

javascript three.js

Javascript Three.js单击即可更改旋转,javascript,three.js,rotation,Javascript,Three.js,Rotation,我想在单击按钮时更改/启动对象的动画旋转。我知道渲染函数是一个无限循环，圆柱体.rotation.x+=0.1将角度相加，使物体旋转。我想用一个按钮来改变这个参数。到目前为止，我只设法添加到旋转一次，而按钮是点击。也许工作示例可以更好地解释： <html> <head> <title>3D Cube</title> <style> canvas { width: 100%

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


三维立方体
帆布{宽度：100%；
身高：100%}
var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（75，window.innerWidth/window.innerHeight，0.11000）；
var renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
var cylindergeometry=新的三个圆柱体几何体（0.1,0.1,2,50，false）；
var cylindermaterial=new THREE.MeshLambertMaterial（{线框：true，颜色：0x000000}）；
var圆柱体=新的三网格（圆柱体几何体、圆柱体材质）；
气缸位置设置（0,0,0）；
场景.添加（圆柱体）；
摄像机位置z=5；
var render=函数（）{
请求动画帧（渲染）；
圆柱旋转x=0.1；
渲染器。渲染（场景、摄影机）；
};
render（）；
var btn=document.createElement（“按钮”）；
var t=document.createTextNode（“单击我”）；
附肢儿童（t）；
文件.正文.附件（btn）；
btn.onclick=函数（）{
//启动动画
//将cylinder.rotation.x=0.1更改为cylinder.rotation.x+=0.1；
};

只需在

onclick

内移动

render（）

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();
};

这完全出乎我的意料，可能有它自己的缺点。

在变量中设置“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.
};
...