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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (112)

我正在使用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代码的帮助下做到了这一点,但我现在被困住了。

提问于
用户回答回答于

此时,您的多维数据集使用render()函数内的硬编码值0.0010.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>

扫码关注云+社区

领取腾讯云代金券