如何通过three.js上的addEventListener动态更新set.position.x?

问题描述 投票:0回答:1

我有一个带有addEventListener的按钮,带有要传递的参数。如果我console.log(被引用的按钮元素),它可以很好地进行控制台。结果我得到了Vector3 {x:15,y:0,z:0}并且在控制台上没有显示错误。问题是我无法/尚未确认如何/通过dom /控制台动态更新更改,以便设置每当显示(按下)带参数的按钮时要重新渲染多维数据集X的位置。我的代码片段:

        var button = document.getElementById("increment");
        button.addEventListener("click", function() { onButtonClick (15)}, false);

        function onButtonClick(customX) {
            var webGLcontext = document.getElementById("WebGL-output");
            webGLcontext = cube.position;
            webGLcontext.set(customX, 0, 0);
            scene.add(webGLcontext);}

       // all the rest stuff of three.js skeleton presented
        }
       // THREE.Object3D.add: object not an instance of THREE.Object3D. Vector3 {x: 15, y: 0, z: 0}

对本主题文章的任何帮助或参考,将不胜感激。

three.js
1个回答
0
投票

您可以使用此选项进行操作(这只是一个概念,而不是最终的解决方案:]

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 100);
camera.position.set(0, 8, 13);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

scene.add(new THREE.GridHelper(10, 10));

var box = new THREE.Mesh(new THREE.BoxBufferGeometry(), new THREE.MeshNormalMaterial());
scene.add(box);

[{
    id: 'btnUp',
    move: new THREE.Vector3(0, 0, -1)
  },
  {
    id: 'btnRight',
    move: new THREE.Vector3(1, 0, 0)
  },
  {
    id: 'btnDown',
    move: new THREE.Vector3(0, 0, 1)
  },
  {
    id: 'btnLeft',
    move: new THREE.Vector3(-1, 0, 0)
  }
].forEach(a => {
  let btn = document.getElementById(a.id);
  btn.addEventListener("click", event => {
    box.position.add(a.move); // move the cube in the desired direction
  });
});

renderer.setAnimationLoop(() => { // animation loop
  renderer.render(scene, camera);
});
body {
  overflow: hidden;
  margin: 0;
}

#btnButtons {
  position: absolute;
}

button {
  width: 32px;
  height: 32px;
  margin: 10px;
}
<script src="https://threejs.org/build/three.min.js"></script>
<div id="btnButtons">
  <button id="btnUp">&uarr;</button>
  <button id="btnRight">&rarr;</button>
  <button id="btnDown">&darr;</button>
  <button id="btnLeft">&larr;</button>
</div>

当移动多维数据集时,您将看到其位置如何自动改变,因为场景将以特定帧率在动画循环中呈现。

© www.soinside.com 2019 - 2024. All rights reserved.