问通过输入改变立方体旋转速度(threejs)

EN

<ul>
        <li>Color cube: <input type="text" id="colorCube" placeholder=""></li><br>
        <li>Rotation X: <input type="number" id="rotationCubeX" placeholder=""></li><br>
        <li>Rotation Y: <input type="number" id="rotationCubeY" placeholder=""></li><br>
        <li>Change: <input id="submitColor" value="Submit" type="button"></li>
</ul>

var cube = (function(){
  my = {};

  var cube;
  var xSpeed = parseFloat(document.getElementById('rotationCubeX').value);
  var ySpeed = parseFloat(document.getElementById('rotationCubeY').value);

  // Function to change color
  my.color = function(value){
    cube.material.color.set(value);
  }


  // Generate Cube

  my.generate = function(colorCube, rotationCubeX, rotationCubeY) {
    var scene = new THREE.Scene();
    var width = 1280;
    var height = 505;
    var camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
    var renderer = new THREE.WebGLRenderer();

    renderer.setSize(width, height);
    renderer.shadowMapEnabled = true; //Shadow
    renderer.shadowMapSoft = true; // Shadow
    renderer.shadowMapType = THREE.PCFShadowMap; //Shadow

    document.getElementById('projects').appendChild( renderer.domElement );

    // Define Shape Object
    geometry = new THREE.BoxGeometry(1, 1, 1);
    material = new THREE.MeshPhongMaterial({ // Required For Shadows
      color: colorCube,
      specular: 0x000000,
      shininess: 100
    });

    //Cube
    cube = new THREE.Mesh(geometry, material);
    cube.position.y = 0.8;
    cube.castShadow = true;
    cube.receiveShadow = true;
    scene.add(cube);
    camera.position.z = 3;
    camera.position.y = 1.8;
    camera.position.x = 0;

    // Floor
    var floorGeometry = new THREE.PlaneGeometry(100, 100, 20, 20);
    var floorMaterial = new THREE.MeshPhongMaterial({
      color: 0xecebec,
      specular: 0x000000,
      shininess: 0
    });

    var floor = new THREE.Mesh(floorGeometry, floorMaterial);
    floor.rotation.x = -0.5 * Math.PI;
    floor.receiveShadow = true;
    scene.add(floor);

    // Lights
    // Ambient light for general illumination
    var ambientLight = new THREE.AmbientLight(0x090909);
    scene.add(ambientLight);

    // Spotlight for specific illumination
    var spotLight = new THREE.SpotLight(0xAAAAAA);
    spotLight.position.set(2, 3, 3);
    spotLight.castShadow = true;
    spotLight.shadowBias = 0.0001;
    spotLight.shadowDarkness = 0.2;
    spotLight.shadowMapWidth = 2048; // Shadow Quality
    spotLight.shadowMapHeight = 2048; // Shadow Quality
    scene.add(spotLight);

    // Render Loop
    function render() {
      requestAnimationFrame(render);
      cube.rotation.x += xSpeed; // spin cube
      cube.rotation.y += ySpeed; //spin cube
      renderer.render(scene, camera);
    }
    //window.addEventListener('click', onDocumentMouseDown, false);
    render();
  }


//function onDocumentMouseDown(event) {

  // Welcome to the exciting world of raycasting !
  // First let's get some mouse coordinates:
  //mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  //mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  // This is basically converting 2d coordinates to 3d Space:
  //raycaster.setFromCamera(mouse, camera);
  // And checking if it intersects with an array object
  //var intersects = raycaster.intersectObjects([cube]);



  // And finally change the color:
  // if (intersects.length > 0) {
  //   intersects[0].object.material.color.setHex(Math.random() * 0xffffff);
  // }
//}

return my;
}());

document.addEventListener("DOMContentLoaded", function () {
  cube.generate('blue', 0.001, 0.005);

  document.getElementById("submitColor").onclick = function() {
    cube.color(document.getElementById('colorCube').value);
    // cube.color(document.getElementById('rotationCube').value);
    xSpeed = parseFloat(document.getElementById('rotationCubeX').value);
    ySpeed = parseFloat(document.getElementById('rotationCubeY').value);
  };

});