我有一个带有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}
对本主题文章的任何帮助或参考,将不胜感激。
您可以使用此选项进行操作(这只是一个概念,而不是最终的解决方案:]
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">↑</button>
<button id="btnRight">→</button>
<button id="btnDown">↓</button>
<button id="btnLeft">←</button>
</div>
当移动多维数据集时,您将看到其位置如何自动改变,因为场景将以特定帧率在动画循环中呈现。