XIA.CH
Reputation: 13
Trackballcontrols and gui can't work together
The gui change together when I click on them and I've seen other answer, but don't know where should I put the listener, I've tried to put the listener in render(), but still don't so how can I fix my code? This coding relates to my graduation.
Here is my code:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>map draw</title>
<!-- Original:
<script type="text/javascript" src="../build/three.js"></script>
<script type="text/javascript" src="../examples/js/libs/dat.gui.js"></script>
<script type="text/javascript" src="../examples/js/libs/stats.min.js"></script>
<script type="text/javascript" src="../examples/js/controls/TrackballControls.js"></script>
-->
<!-- Added by TheJim01 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.js"></script>
<script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
<script src="https://threejs.org/examples/js/controls/TrackballControls.js"></script>
<!-- End TheJim01 additions -->
</head>
<body>
<div id="Stats-output"></div>
<div id="camera"></div>
<div id="airport"></div>
<script type="text/javascript">
function init() {
var controls = new Array(cube_number);
console.log(controls);
var cubes = new Array(cube_number);
var guicube = new Array(cube_number);
var cube_number = 4; //change this word,you can change the number of cubes
var stats = initStats()
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.x = 10;
camera.position.y = 10;
camera.position.z = 30;
camera.lookAt(scene.position);
var trackballControls = new THREE.TrackballControls(camera); //配置控制器
var clock = new THREE.Clock();
trackballControls.rotateSpeed = 1.0;
trackballControls.zoomSpeed = 1.0;
trackballControls.panSpeed = 1.0;
trackballControls.domElement = document.querySelector('#camera')
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0x000000)); //背景颜色设置
renderer.setSize(window.innerWidth, window.innerHeight);
var axes = new THREE.AxisHelper(60);
scene.add(axes);
for (var i = 0; i < cube_number; i++) {
controls[i] = new function() {
this.PositionX = 0;
this.PositionY = 0;
this.PositionZ = 0;
this.ScaleX = 1;
this.ScaleY = 1;
this.ScaleZ = 1;
this.RotationX = 0;
this.RotationY = 0;
this.RotationZ = 0;
}
}
var planeGeometry = new THREE.PlaneGeometry(65, 65);
var planeMaterial = new THREE.MeshBasicMaterial({
color: 0x808080
});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 0;
plane.position.y = 0;
plane.position.z = 0;
scene.add(plane);
for (var i = 0; i < cube_number; i++) {
var cubeGeometry = new THREE.BoxGeometry(6, 6, 6);
var cubeMaterial = new THREE.MeshBasicMaterial({
color: Math.random() * 0xFFFFFF,
wireframe: false
});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.x = 2 * i;
cube.position.y = 0;
cube.position.z = 0;
cube.scale.set(1, 1, 1);
cube.name = "cube-" + i;
scene.add(cube);
}
//render the scene
render();
document.getElementById("airport").appendChild(renderer.domElement);
function render() {
for (i = 0; i < cube_number; i++) {
stats.update();
cubes[i] = scene.getObjectByName("cube-" + i);
cubes[i].position.x = controls[i].PositionX;
cubes[i].position.y = controls[i].PositionY;
cubes[i].position.z = controls[i].PositionZ;
cubes[i].scale.set(controls[i].ScaleX, controls[i].ScaleY, controls[i].ScaleZ);
cubes[i].rotation.x = controls[i].RotationX;
cubes[i].rotation.y = controls[i].RotationY;
cubes[i].rotation.z = controls[i].RotationZ;
}
requestAnimationFrame(render);
renderer.render(scene, camera);
var delta = clock.getDelta();
trackballControls.update(delta);
}
//here is the biggest problem
var gui = new dat.GUI();
for (i = 0; i < cube_number; i++) {
guicube[i] = gui.addFolder(cubes[i].name);
guicube[i].add(controls[i], 'PositionX', -20, 20);
guicube[i].add(controls[i], 'PositionY', -8, 40);
guicube[i].add(controls[i], 'PositionZ', -20, 20);
guicube[i].add(controls[i], 'ScaleX', 1, 8);
guicube[i].add(controls[i], 'ScaleY', 1, 8);
guicube[i].add(controls[i], 'ScaleZ', 1, 8);
guicube[i].add(controls[i], 'RotationX', -4, 4);
guicube[i].add(controls[i], 'RotationY', -4, 4);
guicube[i].add(controls[i], 'RotationZ', -4, 4);
}
}
function initStats() {
var stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.getElementById("Stats-output").appendChild(stats.domElement);
return stats;
}
window.onload = init();
</script>
//改动cube_number参数，可以改变添加立方体的个数
</body>
</html>Upvotes: 1
Views: 135
Answers (1)
M -
Reputation: 28452
You're declaring the domElement of trackballControls in the wrong place. It has to be passed as the second parameter of the constructor. Additionally, make sure you're passing the same domElement as the renderer so you won't run into z-indexing issues.
Wrong
var trackballControls = new THREE.TrackballControls(camera);
trackballControls.domElement = document.querySelector('#camera'); // too late to declare here
...
document.getElementById("airport").appendChild(renderer.domElement); // Will lead to stacking issues
Correct:
var trackballControls = new THREE.TrackballControls(camera, document.querySelector('#airport'));
...
document.getElementById("airport").appendChild(renderer.domElement); // Same element as trackball
Additionally
Make sure you're calling stats.update(); outside the for() loop, otherwise it'll run 4 times per frame, leading to an incorrect 240 FPS.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>map draw</title>
<!-- Added by TheJim01 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.js"></script>
<script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
<script src="https://threejs.org/examples/js/controls/TrackballControls.js"></script>
<!-- End TheJim01 additions -->
</head>
<body>
<div id="Stats-output"></div>
<div id="airport"></div>
<script type="text/javascript">
function init() {
var controls = new Array(cube_number);
console.log(controls);
var cubes = new Array(cube_number);
var guicube = new Array(cube_number);
var cube_number = 4; //change this word,you can change the number of cubes
var stats = initStats()
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.x = 10;
camera.position.y = 10;
camera.position.z = 30;
camera.lookAt(scene.position);
var trackballControls = new THREE.TrackballControls(camera, document.querySelector('#airport')); // pass the #airport DIV as its second parameter.
var clock = new THREE.Clock();
trackballControls.rotateSpeed = 1.0;
trackballControls.zoomSpeed = 1.0;
trackballControls.panSpeed = 1.0;
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0x000000)); //背景颜色设置
renderer.setSize(window.innerWidth, window.innerHeight);
var axes = new THREE.AxisHelper(60);
scene.add(axes);
for (var i = 0; i < cube_number; i++) {
controls[i] = new function() {
this.PositionX = 0;
this.PositionY = 0;
this.PositionZ = 0;
this.ScaleX = 1;
this.ScaleY = 1;
this.ScaleZ = 1;
this.RotationX = 0;
this.RotationY = 0;
this.RotationZ = 0;
}
}
var planeGeometry = new THREE.PlaneGeometry(65, 65);
var planeMaterial = new THREE.MeshBasicMaterial({
color: 0x808080
});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 0;
plane.position.y = 0;
plane.position.z = 0;
scene.add(plane);
for (var i = 0; i < cube_number; i++) {
var cubeGeometry = new THREE.BoxGeometry(6, 6, 6);
var cubeMaterial = new THREE.MeshBasicMaterial({
color: Math.random() * 0xFFFFFF,
wireframe: false
});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.x = 2 * i;
cube.position.y = 0;
cube.position.z = 0;
cube.scale.set(1, 1, 1);
cube.name = "cube-" + i;
scene.add(cube);
}
//render the scene
render();
document.getElementById("airport").appendChild(renderer.domElement);
function render() {
stats.update();
for (i = 0; i < cube_number; i++) {
cubes[i] = scene.getObjectByName("cube-" + i);
cubes[i].position.x = controls[i].PositionX;
cubes[i].position.y = controls[i].PositionY;
cubes[i].position.z = controls[i].PositionZ;
cubes[i].scale.set(controls[i].ScaleX, controls[i].ScaleY, controls[i].ScaleZ);
cubes[i].rotation.x = controls[i].RotationX;
cubes[i].rotation.y = controls[i].RotationY;
cubes[i].rotation.z = controls[i].RotationZ;
}
requestAnimationFrame(render);
renderer.render(scene, camera);
var delta = clock.getDelta();
trackballControls.update(delta);
}
//here is the biggest problem
var gui = new dat.GUI();
for (i = 0; i < cube_number; i++) {
guicube[i] = gui.addFolder(cubes[i].name);
guicube[i].add(controls[i], 'PositionX', -20, 20);
guicube[i].add(controls[i], 'PositionY', -8, 40);
guicube[i].add(controls[i], 'PositionZ', -20, 20);
guicube[i].add(controls[i], 'ScaleX', 1, 8);
guicube[i].add(controls[i], 'ScaleY', 1, 8);
guicube[i].add(controls[i], 'ScaleZ', 1, 8);
guicube[i].add(controls[i], 'RotationX', -4, 4);
guicube[i].add(controls[i], 'RotationY', -4, 4);
guicube[i].add(controls[i], 'RotationZ', -4, 4);
}
}
function initStats() {
var stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.getElementById("Stats-output").appendChild(stats.domElement);
return stats;
}
window.onload = init();
</script>
//改动cube_number参数，可以改变添加立方体的个数
</body>
</html>Upvotes: 1
Related Questions
- Peculiar behavior of TrackballControls.target in Three.js
- Trackball controls doesn't work in new build of three.js
- Can't get Three.js TrackballControl zoom to work
- conflict between dat.gui.js and trackballControl.js in three.js
- Can't create a TrackballControls object
- TrackballControls change events
- How to update Trackball controls at three js
- How can I apply TrackballControls to a moving target?
- TrackballControls in three.js
- Trackball controls behaving oddly