• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

162
Views
Cómo configurar la rotación horizontal y vertical inicial de una cámara que luego usa OrbitControls (ángulos azimutales y polares)

Me gustaría establecer la rotación horizontal y vertical inicial de una PerspectiveCamera que luego usa OrbitControl . Intenté llamar a .rotateX(X) .rotateY(Y) en PerspectiveCamera pero parece que no funciona.

En los documentos de threejs en el ejemplo de OrbitControl, dicen

 //controls.update() must be called after any manual changes to the camera's transform camera.position.set( 0, 20, 100 ); controls.update();

https://tresjs.org/docs/#examples/en/controls/OrbitControls

Me gustaría hacer lo mismo pero con la rotación horizontal y vertical.

Aquí está el código relevante:

cámara.js

 import { PerspectiveCamera } from 'three' import { tweakParams } from 'src/World/utils/twekParams' function createCamera () { const camera = new PerspectiveCamera( 35, 1, 0.1, 100 ) camera.userData.setInitialTransform = () => { // Grab the initial position and rotation values from a Singleton (tweakParams) const cameraPosition = tweakParams.camera.transform.position const cameraRotation = tweakParams.camera.transform.rotation camera.position.set(cameraPosition.x, cameraPosition.y, cameraPosition.z) camera.rotateX(cameraRotation.x) camera.rotateY(cameraRotation.y) } return camera } export { createCamera }

controles.js

 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' function createControls (camera, canvas, { enablePan = true, autoRotate = false } = {}) { const controls = new OrbitControls(camera, canvas) controls.enableDamping = true controls.enablePan = enablePan controls.autoRotate = false controls.autoRotateSpeed = 0.25 controls.maxDistance = 30 camera.userData.setInitialTransform() controls.update() // This function gets called in the animation Loop. controls.tick = () => controls.update() return controls } export { createControls }

Y aquí está el singleton que contiene los valores de transformación iniciales de la cámara.

 export const tweakParams = { camera: { transform: { position: { x: 6.83487313982359, y: 9.164636749995928, z: 13.384934657461855 }, rotation: { x: Math.PI * 0.5, y: Math.PI * 0.5 } } } }

Este singleton tiene valores ficticios por ahora, pero en el futuro debería completarse con los últimos atributos de transformación que tenía la cámara antes de salir de la página actual.

De todos modos, la posición inicial de la cámara funciona bien, pero no la rotación. Alguna idea de como resolver esto?

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

La rotación de PerspectiveCamera no funciona con OrbitControls. Esto se debe a que OrbitControls sobrescribe la rotación de la cámara .

Para resolver esto, utilicé OrbitControls.target , que hace que la cámara en perspectiva orbite alrededor de las coordenadas de este objetivo.

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error