通过输入更改立方体旋转速度（threejs）

Question

我正在使用Threejs教程制作一个javascript多维数据集。 这很有效。 现在我想在我的页面上输入一个数字来改变立方体旋转的速度（X和Y轴），但我无法弄清楚如何。 有人能帮我这个吗？

我尝试过使用数字和文本输入，但我确定它与我的javascript有关（我不是很好）

HTML

<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>

这是我想要改变旋转的地方（颜色有效）

JS

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

这是将起始旋转添加到立方体的位置（如果我要将0.001更改为rotationCubeX，则立方体不会生成）

Main.JS

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

});

这是我调用函数的main.js

我在提供的Threejs代码的帮助下做到了这一点，但我现在被困住了。

Answer 1

此时，您的多维数据集使用render（）函数内的硬编码值0.001和0.005进行旋转。 为了能够更改这些值，您需要两个全局变量。

首先直接使用input元素的value属性确定初始速度：

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

创建两个全局变量并从input元素中获取值：

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

使用parseFloat（）是因为从属性返回的值是一个字符串。

单击提交按钮后立即更新变量：

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

最后使用render函数中全局变量的值：

function render() {
  requestAnimationFrame(render);
  cube.rotation.x += xSpeed; // spin cube
  cube.rotation.y += ySpeed; //spin cube
  renderer.render(scene, camera);
}

这是一个实例。 请确保在使用向上/向下箭头查看值后单击“ 提交” 。

 var camera, scene, renderer; var cube; var width = 400; var height = 300; var xSpeed = parseFloat(document.getElementById('rotationCubeX').value); var ySpeed = parseFloat(document.getElementById('rotationCubeY').value); function init() { camera = new THREE.PerspectiveCamera(70, width / height, 1, 1000); camera.position.z = 400; scene = new THREE.Scene(); var geometry = new THREE.BoxBufferGeometry(200, 200, 200); cube = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial()); scene.add(cube); renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(width, height); document.body.appendChild(renderer.domElement); } function animate() { requestAnimationFrame(animate); cube.rotation.x += xSpeed; cube.rotation.y += ySpeed; renderer.render(scene, camera); } init(); animate(); document.getElementById("submitColor").onclick = function() { xSpeed = parseFloat(document.getElementById('rotationCubeX').value); ySpeed = parseFloat(document.getElementById('rotationCubeY').value); }; 

 <script src="https://threejs.org/build/three.js"></script> <ul> <li>Color cube: <input type="text" id="colorCube" placeholder=""></li><br> <li>Rotation X: <input type="number" id="rotationCubeX" placeholder="" value="0.001" step="0.01"></li><br> <li>Rotation Y: <input type="number" id="rotationCubeY" placeholder="" value="0.005" step="0.01"></li><br> <li>Change: <input id="submitColor" value="Submit" type="button"></li> </ul>