0
215
VistasCálculo de Three.js Orbitcontrols para configurar la cámara para que gire hacia arriba para una vista de pájaro
Parece que no puedo encontrar la forma correcta de hacer que mi cámara threejs, que inicialmente mira hacia mi objeto, gire hacia arriba para que mire hacia abajo a mi objeto. Tomé un ejemplo simple de tablero de ajedrez y no entiendo muy bien lo que está pasando. Puedo modificar la rotación de la cámara con números crecientes aleatorios hasta que obtenga la vista de arriba hacia abajo, pero estoy tratando de entender la forma correcta de hacerlo.
var scene, camera, renderer, cube, controls, board; function init() { scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); const square = new THREE.BoxGeometry(1, 0.1, 1); const lightsquare = new THREE.MeshBasicMaterial({ color: 0xE0C4A8 }); const darksquare = new THREE.MeshBasicMaterial({ color: 0x6A4236 }); board = new THREE.Group(); let squareNumber = 1; for (let x = 0; x < 10; x++) { for (let z = 0; z < 10; z++) { let cube; if (z % 2 == 0) { cube = new THREE.Mesh(square, x % 2 == 0 ? lightsquare : darksquare); if (x % 2 != 0) { cube.userData.squareNumber = squareNumber; squareNumber++; } } else { cube = new THREE.Mesh(square, x % 2 == 0 ? darksquare : lightsquare); if (x % 2 == 0) { cube.userData.squareNumber = squareNumber; squareNumber++; } } cube.position.set(x, 0, z); board.add(cube); } } scene.add(board); camera.position.y = 1; camera.position.z = 3; controls = new THREE.OrbitControls(camera, renderer.domElement); controls.target.set(4.5, 0, 4.5); controls.enablePan = false; controls.maxPolarAngle = Math.PI / 2; controls.enableDamping = true; window.requestAnimationFrame(animate); } function animate() { controls.update(); renderer.render(scene, camera); window.requestAnimationFrame(animate); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } window.addEventListener('resize', onWindowResize); window.onload = init; <script src="https://threejs.org/build/three.min.js"></script> <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script> La vista que estoy tratando de lograr es esta: 
·
Juan Pablo Isaza
Responde la pregunta