[Babtlon.js] 컴포넌트

● @babylonjs/core

   - Scene

    https://doc.babylonjs.com/typedoc/classes/BABYLON.Scene
    const OnSceneReady = (이름명:scene: Scene)⇒{}

 

   - FreeCamera

    https://doc.babylonjs.com/typedoc/classes/BABYLON.FreeCamera
    new FreeCamera(이름명:”camera”, 위치: new Vector3(0,1,-5),scene); 

 

   - Vector3

    https://doc.babylonjs.com/typedoc/classes/BABYLON.Vector3
    new Vector3(_*x,_*y,_z);

 

   - HemisphericLight :
    https://doc.babylonjs.com/typedoc/classes/BABYLON.HemisphericLight

const hemiLight = new HemisphericLight(
"hemiLight",
new Vector3(0, 1, 0),
scene
);

 hemiLight.intensity = 0.5;

    
   - MeshBuilder : 객체 생성

const ball = MeshBuilder.CreateSphere("ball", { diameter: 1 }, scene);

ball.position = new Vector3(0, 1, 0);

const ground = MeshBuilder.CreateGround(
"ground",
{ width: 10, height: 10 },
scene
);

     
   - Engine :
    씬 설정할 때 같이 쓰는 필수 요소 같이 보임.   
    https://doc.babylonjs.com/typedoc/classes/BABYLON.Engine

const { current: canvas } = reactCanvas;
    if (!canvas) return;

    const engine = new Engine(
      canvas,
      antialias,
      engineOptions,
      adaptToDeviceRatio
    );
    const scene = new Scene(engine, sceneOptions);
// scene이 준비되면
    if (scene.isReady()) {
      onSceneReady(scene, engine);
    } else {
      // onReadyObservable을 이용하여 scene을 관찰하고 있다가 준비되면 callback 실행
      scene.onReadyObservable.addOnce((scene: Scene) =>
        onSceneReady(scene, engine)
      );
    }

    engine.runRenderLoop(() => {
      if (typeof onRender === "function") onRender(scene, engine);
      scene.render();
    });

     
      - Texture
        + diffuseTexture
        + bumpTexture
        + ambientTexture
        + specularTexture

const diffTex = new Texture(
    "assets/textures/stone/cobblestone_diff.jpg",
    scene
  );
  groundMat.diffuseTexture = diffTex;

const normalTex = new Texture(
    "assets/textures/stone/cobblestone_nor.jpg",
    scene
  );
  groundMat.bumpTexture = normalTex;

const aoTex = new Texture("assets/textures/stone/cobblestone_ao.jpg", scene);
  groundMat.ambientTexture = aoTex;

const specTex = new Texture(
    "assets/textures/stone/cobblestone_spec.jpg",
    scene
  );
  groundMat.specularTexture = specTex;

  
    
   - StandardMaterial
    https://doc.babylonjs.com/typedoc/classes/BABYLON.StandardMaterial

ground.material = createGroundMaterial(scene);
  ball.material = createBallMaterial(scene);

const createGroundMaterial = (scene: Scene) => {
  const groundMat = new StandardMaterial("ground", scene);
  const uvScale = 4;
	const textureArray: Texture[] = [];

textureArray.forEach((t) => {
    t.uScale = uvScale;
    t.vScale = uvScale;
  });

return ballMat;
}

export default function StandardMaterials() {
  return (
    <SceneComponent antialias onSceneReady={onSceneReady} onRender={onRender} />
  );
}

 

   
   - SceneLoader : 모델링 import,

const createBarrel = async (scene: Scene) => {
  await SceneLoader.ImportMeshAsync("", "assets/models/", "barrel.glb", scene);
};

const createCamp = async (scene: Scene) => {
  const models = await SceneLoader.ImportMeshAsync(
    "",
    "assets/models/",
    "camp.glb",
    scene
  );
  models.meshes[0].position = new Vector3(-3, 0, 0);
};

   - CubeTexture : 스카이박스

const envTex = CubeTexture.CreateFromPrefilteredData(
    "assets/environment/roof.env",
    scene
  );

  scene.environmentTexture = envTex; // 환경 텍스처 설정
  scene.createDefaultSkybox(envTex, true);

  scene.environmentIntensity = 0.5;