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 硬编码值旋转。为了能够更改这些值，您需要两个全局变量。

首先直接使用输入元素的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>

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

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>

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

1 个答案: