Как мне заставить камеру сфокусироваться на объекте и удерживать его в центре внимания с помощью Babylonjs?

#reactjs #camera #mesh #babylonjs

#reactjs #камера #сетка #babylonjs

Вопрос:

Чего я действительно хочу, так это поместить сетку на объект и сфокусировать камеру на этой сетке. Я думаю, что они делают это с помощью функции LookAt, но я не знаю, как правильно ее использовать.

Я получил помощь с этой страницы: https://www.babylonjs-playground.com/#1CSVHO#12

Я попробовал несколько демонстраций функций.

  setCamera_Mesh = () => {
        let { currentWidth, currentDepth, rowCount } = this.currentConfig;
        let sphere = Mesh.CreateSphere("sphere", 1, this.scene);
        let referenceBox = Mesh.CreateBox("referenceBox", { width: 1, height: 1, depth: 1, updatable: true });


        sphere.scaling = new Vector3(0.1, 0.1, 0.1);
        sphere.position = this.scene.cameras[0].position;
        sphere.parent = this.scene.cameras[0];

        this.referenceBox amp;amp; this.referenceBox.dispose()

        referenceBox.position = new Vector3(0, 0, 0.08);

        referenceBox.enableEdgesRendering();
        referenceBox.edgesWidth = 1;
        referenceBox.edgesColor = new Color4(0, 0, 1, 0.05);
        referenceBox.visibility = 0.5;
        referenceBox.scaling = new Vector3(currentDepth / 40, rowCount / 3, currentWidth / 100);


        this.referenceBox = referenceBox;
        sphere.lookAt(referenceBox.position);
    }
  

Ответ №1:

Мне пришлось использовать SetParent () вместо .parent, где я добавил камеру в качестве родительской.

Когда я редактирую код, как показано ниже, он работает правильно.

 setCameraToMesh = () => {
        let { currentWidth, currentDepth, rowCount } = this.currentConfig;
        let sphere = MeshBuilder.CreateSphere("referenceSphere", this.scene);
        let referenceBox = MeshBuilder.CreateBox("referenceBox", { width: 0.1, height: 0.1, depth: 0.1, updatable: true });

        sphere.scaling = new Vector3(0.1, 0.1, 0.1);
        sphere.position = this.scene.cameras[0].position;
        sphere.setParent(this.scene.cameras[0]);
        this.referenceBox amp;amp; this.referenceBox.dispose()

        referenceBox.position = new Vector3(0, rowCount / 500, 0.08);
        referenceBox.enableEdgesRendering();
        referenceBox.edgesWidth = 1;
        referenceBox.edgesColor = new Color4(0, 0, 1, 0.05);
        referenceBox.visibility = 0.05;
        referenceBox.scaling = new Vector3(currentDepth / 40, rowCount / 3, currentWidth / 100);

        this.referenceBox = referenceBox;

        sphere.lookAt(referenceBox.absolutePosition);    
        this.scene.cameras[0].focusOn([referenceBox], true);
    }