VUE3+BABYLON,For the imported model, the model does not move after moving the position, but the following camera moves

Questions
1

I’m a novice. I’m writing a small game using Babylon and Vue. Then I import the model and set the camera to follow. I set it to move. You can see that the data changes, and then the lens will follow the data, but the model in the page will not move.How to solve this problem?

The following is the JS file:

import * as BABYLON from "babylonjs";

const createScene = async (canvas) => {
  
  const engine = new BABYLON.Engine(canvas, true);
  
  const scene = new BABYLON.Scene(engine);


    var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
    light.intensity = 0.6;
    light.specular = BABYLON.Color3.Black();

    var light2 = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(0, -0.5, -1.0), scene);
    light2.position = new BABYLON.Vector3(0, 5, 5);


    var camera1 = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 4, 45, new BABYLON.Vector3(0, -5, 0), scene);
    scene.activeCamera = camera1;
    scene.activeCamera.attachControl(canvas, true);
    camera1.lowerRadiusLimit = 2;
    camera1.upperRadiusLimit = 50;
    camera1.wheelDeltaPercentage = 0.01;
    camera1.upperBetaLimit = Math.PI / 2.2;


    var ground = BABYLON.MeshBuilder.CreateGround("ground", { height: 500, width: 500, subdivisions: 4 }, scene);
    var groundMaterial = new BABYLON.StandardMaterial("groundMaterial", scene);
    groundMaterial.diffuseTexture = new BABYLON.Texture("http://localhost:8000/textures/ground.jpg", scene);
    groundMaterial.diffuseTexture.uScale = 30;
    groundMaterial.diffuseTexture.vScale = 30;
    groundMaterial.specularColor = new BABYLON.Color3(.1, .1, .1);
    ground.material = groundMaterial;

    console.log(groundMaterial.diffuseTexture)



    BABYLON.SceneLoader.ImportMesh("", "http://localhost:8000/model/", "wheelRR.babylon", scene, function (newMeshes) {
      var wheelRR = newMeshes[0]
      camera1.target = wheelRR;
    })
    var car;
    BABYLON.SceneLoader.ImportMesh("", "http://localhost:8000/model/", "sportcar.babylon", scene, function (newMeshes) {
        car = newMeshes[0];
       
        car.scaling.scaleInPlace(0.01);
        
        camera1.target = car;
        console.log(car.position)

        let i = 0;
        setInterval(()=>{
          car.position = new BABYLON.Vector3(0+(i++), 0, 0);
          console.log(car.position)
        },500)
    })

   
    engine.runRenderLoop(function () {
      scene.render();

    });


  window.addEventListener("resize", function () {
    engine.resize();
  });
};

export { createScene };

Then, in this Vue file:

<template>
  <canvas id="renderCanvas" ref="renderCanvas"></canvas>
</template>

<script>
import { ref,onMounted } from "vue";
// import * as BABYLON from "babylonjs";
import  {createScene}  from "../../hooks/createScene";



export default {
  name: "Game",
  setup() {

    const renderCanvas = ref(null)
    onMounted(() => {
      if (renderCanvas.value) {
        createScene(renderCanvas.value);
      }
    });
    return {
      renderCanvas
    };
  },
};
</script>
2

Try turning off your scale setting of .01 there? Also, try turning on the inspector and play around with your scene that way.
–Andy

3

Thank you! I turned off the scale setting and can move.What is the principle?