基于VUE+TS，使用babylonJs搭建三维场景

• 安装babylon依赖包

npm i @babylonjs/core

npm install @babylonjs/loaders

• 基础场景

创建文件目录结构,并制作除基本的小球

1、App.vue

 App.vue

<template>

  <BabylonExamples />

</template>

<script lang="ts">

import { defineComponent } from 'vue';

import BabylonExamples from './components/BabylonExamples.vue';

export default defineComponent({

  name: 'App',

  components: {

    BabylonExamples

  }

});

</script>

<style>

#app {

  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;

}

</style>

2、BabylonExamples.vue

  BabylonExamples.vue

<template>

  <div>

    <h3>Babylon Examples</h3>

    <canvas></canvas>

  </div>

</template>

<script lang="ts">

import { defineComponent } from 'vue';

import { BasicScene } from '@/BabylonExamples/BasicScene';

export default defineComponent({

  name: 'BabylonExamples',

  mounted(){

    const canvas = document.querySelector("canvas")!;

    new BasicScene(canvas);

  }

});

</script>

<style scoped>

canvas{

  width: 70%;

  height: 70%;

}

</style>

import {

    Scene,

    Engine,

    FreeCamera,

    Vector3,

    HemisphericLight,

    MeshBuilder,

} from "@babylonjs/core";

export class BasicScene{

    scene:Scene;

    engine:Engine;

    constructor(private canvas:HTMLCanvasElement){

        this.engine = new Engine(this.canvas,true);

        this.scene = this.CreateScene();

        this.engine.runRenderLoop(() => {

            this.scene.render();

        });

    }

    CreateScene():Scene {

        const scene = new Scene(this.engine);

        const camera = new FreeCamera("camera",new Vector3(0,1,-5),this.scene);

        camera.attachControl();

        const hemiLight = new HemisphericLight(

            "hemiLight",

            new Vector3(0,1,0),

            this.scene

        );

        hemiLight.intensity = 0.5;

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

        this.scene

        );

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

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

 

        return scene;

    }

}

3、BasicScene.ts

BasicScene.ts

mport {

    Scene,

    Engine,

    FreeCamera,

    Vector3,

    HemisphericLight,

    MeshBuilder,

} from "@babylonjs/core";

export class BasicScene{

    scene:Scene;

    engine:Engine;

    constructor(private canvas:HTMLCanvasElement){

        this.engine = new Engine(this.canvas,true);

        this.scene = this.CreateScene();

        this.engine.runRenderLoop(() => {

            this.scene.render();

        });

    }

    CreateScene():Scene {

        const scene = new Scene(this.engine);

        const camera = new FreeCamera("camera",new Vector3(0,1,-5),this.scene);

        camera.attachControl();

        const hemiLight = new HemisphericLight(

            "hemiLight",

            new Vector3(0,1,0),

            this.scene

        );

        hemiLight.intensity = 0.5;

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

        this.scene

        );

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

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

 

        return scene;

    }

}

1. 效果

• 标准材料

  StandardMaterials.ts

import {

    Scene,

    Engine,

    FreeCamera,

    Vector3,

    HemisphericLight,

    MeshBuilder,

    StandardMaterial,

    Texture

} from "@babylonjs/core";

export class StandardMaterials{

    scene:Scene;

    engine:Engine;

    constructor(private canvas:HTMLCanvasElement){

        this.engine = new Engine(this.canvas,true);

        this.scene = this.CreateScene();

        this.engine.runRenderLoop(() => {

            this.scene.render();

        });

    }

    CreateScene():Scene {

        const scene = new Scene(this.engine);

        const camera = new FreeCamera("camera",new Vector3(0,1,-5),this.scene);

        camera.attachControl();

        camera.speed = 0.25

        const hemiLight = new HemisphericLight(

            "hemiLight",

            new Vector3(0,1,0),

            this.scene

        );

        hemiLight.intensity = 1;

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

        this.scene

        );

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

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

 

        ground.material = this.CreateGroundMateria();

        ball.material = this.CreateBallMateria();

        return scene;

    }

 CreateGroundMateria():StandardMaterial{

        const groundMat = new StandardMaterial("groundMat", this.scene);

        const uvScale = 4;

        const diffuseTex = new Texture(

            "./textures/stone/stone_diff.jpg",

            this.scene

        );

       

        // diffuseTex.uScale = 4;

        // diffuseTex.vScale = 4;

        groundMat.diffuseTexture = diffuseTex;

        return groundMat;

 }

 CreateBallMateria():StandardMaterial{

    const ballMat = new StandardMaterial("ballMat", this.scene);

    const uvScale = 4;

    const diffuseTex = new Texture(

        "./textures/metal/metal_diff.jpg",

        this.scene

    );

    ballMat.diffuseTexture = diffuseTex;

    return ballMat;

 }

}

效果图

• 导入模型

 CustomModels.ts

import {

    Scene,

    Engine,

    FreeCamera,

    Vector3,

    MeshBuilder,

    CubeTexture,

    Texture,

    HemisphericLight,

    PBRMaterial,

    SceneLoader

} from "@babylonjs/core";

import "@babylonjs/loaders"

export class CustomModels{

    scene:Scene;

    engine:Engine;

    constructor(private canvas:HTMLCanvasElement){

        this.engine = new Engine(this.canvas,true);

        this.scene = this.CreateScene();

        this.CreateBarrel();

        this.engine.runRenderLoop(() => {

            this.scene.render();

        });

    }

    CreateScene():Scene {

        const scene = new Scene(this.engine);

        const camera = new FreeCamera("camera",new Vector3(-10,0,-38),this.scene);

        camera.attachControl();

        const hemiLight = new HemisphericLight(

            "hemiLight",

            new Vector3(0,1,0),

            this.scene

        );

        hemiLight.intensity =1.2;

        const envTex = CubeTexture.CreateFromPrefilteredData(

            "./environment/sky.env",

            scene

        )

        scene.environmentTexture = envTex;

        scene.createDefaultSkybox(envTex,true)

         

        //创建平台

        // const ground = MeshBuilder.CreateGround("ground",{width:10,height:10},

        // this.scene

        // );

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

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

 

        return scene;

    }

    //方法一：

    CreateBarrel():void {

        SceneLoader.ImportMesh(

            "",

            "./models/",

            "water_house.glb",

            this.scene,

            (meshes) =>{

            console.log("meshes",meshes);

            meshes[0].position = new Vector3(-13,0,10)

        })

    }

    // async CreateBarrel(): Promise<void> {

    //     const models = await SceneLoader.ImportAnimationsAsync(

    //         "",

    //         "./models/",

    //         "water_house.glb"

    //     );

    //     console.log("models",models);

    // }

}