这是我的代码:
<!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>
答案 0 :(得分:0)
您在错误的地方宣布trackballControls
的domElement。它必须作为构造函数的第二个参数传递。另外,请确保您传递与renderer
相同的domElement,这样您就不会遇到z-indexing问题。
<强>错误强>
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
<强>正确:强>
var trackballControls = new THREE.TrackballControls(camera, document.querySelector('#airport'));
...
document.getElementById("airport").appendChild(renderer.domElement); // Same element as trackball
<强>另外强>
确保您在stats.update();
循环之外调用for()
,否则每帧会运行4次,导致错误的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>