关于OribitControl和lookAt的困惑 #55

gy1016 · 2022-05-30T09:21:59Z

gy1016
May 30, 2022

前辈你好，我的疑惑是：
在我使用OrbitControl，但是没有人为调用lookAt时，此时我相机的transform状态记为A，
但是在绘制的第二帧（看源码OrbitControl有调用lookAt），相机的transform状态记为B，
但是我同步获得的相机状态是A，虽然可以通过一开始就指定lookAt解决，但是总感觉这样有些不妥，
我就是好奇这种问题该归结于使用者，还是归于引擎，所以来提个issue看看，
来自oasis-engine的铁粉

import { OrbitControl } from "@oasis-engine/controls";
import {
  BlinnPhongMaterial,
  Camera,
  Color,
  DirectLight,
  MeshRenderer,
  PrimitiveMesh,
  Vector3,
  WebGLEngine
} from "oasis-engine";

// Init Engine
const engine = new WebGLEngine("gy");
// Adapter to screen
engine.canvas.resizeByClientSize();

// Get root entity of current scene
const scene = engine.sceneManager.activeScene;
const rootEntity = scene.createRootEntity("root");

// Init Camera
let cameraEntity = rootEntity.createChild("camera_entity");
cameraEntity.addComponent(OrbitControl);
cameraEntity.transform.position = new Vector3(1, 1, 7);
//cameraEntity.transform.lookAt(new Vector3(0, 0, 0));
const a = cameraEntity.addComponent(Camera);
scene.background.solidColor.setValue(1, 1, 1, 1);

// Create a entity to add light component
let lightEntity = rootEntity.createChild("light");

// Create light component
let directLight = lightEntity.addComponent(DirectLight);
directLight.color = new Color(1.0, 1.0, 1.0);
directLight.intensity = 0.5;

// Control light direction by entity's transform
lightEntity.transform.rotation = new Vector3(45, 45, 45);

// Create Cube
let cubeEntity = rootEntity.createChild("cube");
console.log(cubeEntity.transform.worldMatrix);
let cube = cubeEntity.addComponent(MeshRenderer);
cube.mesh = PrimitiveMesh.createCuboid(engine, 2, 2, 2);
cube.setMaterial(new BlinnPhongMaterial(engine));

// Run Engine
engine.run();

console.log(cameraEntity.transform.rotationQuaternion)

const gui = document.getElementById('gui');
gui.innerHTML = `
<p>camera.position:${cameraEntity.transform.position.x},${cameraEntity.transform.position.y},${cameraEntity.transform.position.z};</p>
<p>camera.rotation:${cameraEntity.transform.rotation.x},${cameraEntity.transform.rotation.y},${cameraEntity.transform.rotation.z};</p>
<p>camera.rotationQuaternion:${cameraEntity.transform.rotationQuaternion.x},${cameraEntity.transform.rotationQuaternion.y},${cameraEntity.transform.rotationQuaternion.z},${cameraEntity.transform.rotationQuaternion.w};</p>
<p>camera.worldRotationQuaternion:${cameraEntity.transform.worldRotationQuaternion.x},${cameraEntity.transform.worldRotationQuaternion.y},${cameraEntity.transform.worldRotationQuaternion.z},${cameraEntity.transform.worldRotationQuaternion.w};</p>
<p>camera.viewMatrix:${a.viewMatrix.elements};</p>
<p>camera.projectionMatrix:${a.projectionMatrix.elements};</p>
`

console.log(cameraEntity.transform.rotation.x, cameraEntity.transform.rotation.y, cameraEntity.transform.rotation.z);

// setInterval(() => {
//   console.log(cameraEntity.transform.rotation.x, cameraEntity.transform.rotation.y, cameraEntity.transform.rotation.z);
// }, 2000)

let flag = false;

function open(event) {
  if (event.button === 0) {
    flag = true
  }
}

function close() {
  flag = false;
}

function handle() {
  if (flag) {
    gui.innerHTML = `
    <p>camera.position:${cameraEntity.transform.position.x},${cameraEntity.transform.position.y},${cameraEntity.transform.position.z};</p>
    <p>camera.rotation:${cameraEntity.transform.rotation.x},${cameraEntity.transform.rotation.y},${cameraEntity.transform.rotation.z};</p>
    <p>camera.rotationQuaternion:${cameraEntity.transform.rotationQuaternion.x},${cameraEntity.transform.rotationQuaternion.y},${cameraEntity.transform.rotationQuaternion.z},${cameraEntity.transform.rotationQuaternion.w};</p>
    <p>camera.worldRotationQuaternion:${cameraEntity.transform.worldRotationQuaternion.x},${cameraEntity.transform.worldRotationQuaternion.y},${cameraEntity.transform.worldRotationQuaternion.z},${cameraEntity.transform.worldRotationQuaternion.w};</p>
    <p>camera.viewMatrix:${a.viewMatrix.elements};</p>
    <p>camera.projectionMatrix:${a.projectionMatrix.elements};</p>
    `
  }
}

window.addEventListener('mousedown', open)
window.addEventListener('mousemove', handle)
window.addEventListener('mouseup', close)