babylonJs三维引擎入门

​​​​​​​初始化项目：

1. main.js

import Vue from 'vue'

import App from './App.vue'

import router from './router'

import store from './store'

import './assets/font/iconfont.css'   //字体图标

import './assets/css/index.css'   //全局样式

import * as BABYLON from 'babylonjs'

import 'babylonjs-loaders'

Vue.config.productionTip = false

new Vue({

  router,

  store,

  render: h => h(App)

}).$mount('#app')

2、App.vue

<template>

  <div id="app">

    <!-- <img src="@/assets/images/model.png" /> -->

    <!-- <nav>

      <router-link to="/">Home</router-link> |

      <router-link to="/about">About</router-link>

    </nav>

    <router-view/> -->

    <MyBaby/>

  </div>

</template>

<script>

import MyBaby from '@/views/MyBaby.vue';

export default {

  data() {

    return {

    }

  },

  methods: {

  },

  components: {

    MyBaby

}

}

</script>

<style>

body {

  width: 100%;

  height: 100%;

  /* background: url("~@/assets/images/bg.jpg") no-repeat; */

}

#app {

  width: 100%;

  height: 100%;

  text-align: center;

}

/* @import './assets/css/index.css' */

</style>

3、MyBabylon.vue

<template>

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

</template>

 

<script>

// import * as BABYLON from "babylonjs"

window.addEventListener('DOMContentLoaded', function () {

    //创建canvas

    const canvas = document.getElementById('renderCanvas');

    //设置canvas得宽高

    canvas.width = this.window.innerWidth;

    canvas.height = this.window.innerHeight;

    //将canvas添加到body中

    document.body.appendChild(canvas);

    //canvas元素创建babylon渲染引擎,第二个参数是否开启抗锯齿

    const engine = new BABYLON.Engine(canvas, true);

    //创建场景

    const scene = new BABYLON.Scene(engine);

    //创建一个旋转相机

    const camera = new BABYLON.ArcRotateCamera(

        "camera",  //相机名称

        0,         //相机水平旋转角度

        0,         //相机垂直旋转角度

        -10,        //相机的半径（相机离目标点的距离）

        BABYLON.Vector3.Zero(), //相机的目标点（原点）

        scene      //相机所在场景

    );

    //设置相机的位置

    camera.setPosition(new BABYLON.Vector3(0, 5, -10));

    //把相机附加到画布上，通过鼠标控制相机的移动旋转

    camera.attachControl(canvas);

    //创建球体

    const sphere = BABYLON.MeshBuilder.CreateSphere(

        "sphere",     //球的名称

        { diameter: 2 }, //球的直径

        scene         //球所在的场景

    );

    //设置球体的位置

    sphere.position.set(0, 0, -4);  //x,y,z坐标位置

    //缩小球体

    sphere.scaling.set(0.5, 0.5, 0.5);

    //创建光源(平行光)

    const light = new BABYLON.DirectionalLight(

        "light",    //光源名称

        new BABYLON.Vector3(-1, -1, 0),  //光源的方向（从上照射）

        scene       //光源所在的场景

    );

    //设置平行光的颜色

    light.diffuse = new BABYLON.Color3(0,1,0);  //绿色

    //设置平行光的高光颜色

    light.specular = new BABYLON.Color3(1,1,1);   //白色

    //设置平行光的强度

    light.intensity = 0.5;

    //创建点光源

    const pointLight = new BABYLON.PointLight(

        "pointLight",    //光源名称

        new BABYLON.Vector3(-2, 0, 0),  //点光源的位置

        scene       //光源所在的场景

    );

    //设置点光源的颜色

    pointLight.diffuse = new BABYLON.Color3(1,0,0);  //rgb数值

    //设置点光源的高光颜色

    pointLight.specular = new BABYLON.Color3(1,1,0);   //黄色

    //设置点光源的强度

    pointLight.intensity = 0.5;

    //创建聚光灯

    const spotLight = new BABYLON.SpotLight(

        "spotLight",    //光源名称

        new BABYLON.Vector3(0, 0, 5),  //聚光灯的位置

        new BABYLON.Vector3(0, 0, -1),  //聚光灯的方向

        Math.PI/3,   //聚光灯的角度

        2,           //聚光灯的强度

        scene       //聚光灯所在的场景

    );

    //设置点光源的颜色

    spotLight.diffuse = new BABYLON.Color3(1,0,1);  //rgb数值

    //设置点光源的高光颜色

    spotLight.specular = new BABYLON.Color3(1,1,1);   //黄色

    //设置点光源的强度

    spotLight.intensity = 1;

    // //创建地面

    const ground = BABYLON.MeshBuilder.CreateGround(

        "ground",  //地面名称

        { width: 12, height: 12 },  //地面的宽高

        scene  //地面所在的场景

    );

    //设置地面的位置

    ground.position.set(0, -1, 0);  //x,y,z坐标位置

    //创建平面

    // const plane = BABYLON.MeshBuilder.CreatePlane(

    //     "plane",  //平面名称

    //     { width: 6, height: 6 },  //地面的宽高

    //     scene  //平面所在的场景

    // );

    //创建圆锥体

    const cone = BABYLON.MeshBuilder.CreateCylinder(

        "cone",     //圆锥体的名称

        {

            height: 2,         //圆锥体的高度

            diameterTop: 0,   //圆锥体的顶部直径

            diameterBottom: 3,   //圆锥体的底部直径

            tessellation: 64,    //圆锥体的细分数

        },

        scene               //圆锥体所在的场景

    );

    //设置圆锥体的位置

    // torus.position.set(-4, -0.5, 0);  //x,y,z坐标位置

    //创建圆环

    const torus = BABYLON.MeshBuilder.CreateTorus(

        "torus",     //圆环的名称

        {

            diameter: 3,   //圆环的直径

            thickness: 1,  //圆环的厚度

            tessellation: 32, ///圆环的细分数

        },

        scene               //圆环所在的场景

    );

    //设置圆环的位置

    torus.position.set(-4, -0.5, 0);  //x,y,z坐标位置

    //缩小圆环

    torus.scaling.set(0.5, 0.5, 0.5);

    //创建立方体

    const box = BABYLON.MeshBuilder.CreateBox(

        "box",     //立方体的名称

        { size: 2 },  //立方体的大小

        scene         //立方体所在的场景

    );

    //设置立方体的位置

    box.position.set(4, 0, 0);  //x,y,z坐标位置

    //缩小立方体

    box.scaling.set(0.5, 0.5, 0.5);

    //旋转立方体

    box.rotation.set(0, Math.PI / 4, 0);  //绕y轴旋转45度

    //绕着某个点旋转

    box.rotateAround(

        new BABYLON.Vector3(0, 0, 0),  //旋转的中心点

        new BABYLON.Vector3(0, 1, 0),   //旋转的轴

        Math.PI / 4    //旋转的角度

    )

    //创建圆柱体

    const cylinder = BABYLON.MeshBuilder.CreateCylinder(

        "cylinder",     //圆柱体的名称

        {

            height: 2,  //圆柱体的高度

            diameter: 2,  //圆柱体的直径

        },

        scene         //圆柱体所在的场景

    );

    //设置圆柱体的位置

    cylinder.position.set(0, 0, 4);  //x,y,z坐标位置

    //缩小圆柱

    cylinder.scaling.set(1, 0.5, 1);

    //渲染场景

    engine.runRenderLoop(function () {

        scene.render();

    });

    // 监听窗口大小改变，使场景始终填满整个窗口

    window.addEventListener("resize", function () {

        engine.resize();

    });

});

export default {

}

</script>

 

<style>

* {

    padding: 0;

    margin: 0;

}

#renderCanvas {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    width: 100vh;

    height: 100vh;

    touch-action: none;

}

</style>

Web3D的基本构架：

<template>

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

</template>

 

<script>

// import * as BABYLON from "babylonjs"

window.addEventListener('DOMContentLoaded', function () {

    //1、创建canvas

    const canvas = document.getElementById('renderCanvas');

    //设置canvas得宽高

    canvas.width = this.window.innerWidth;

    canvas.height = this.window.innerHeight;

    //2、将canvas添加到body中

    document.body.appendChild(canvas);

    //canvas元素创建babylon渲染引擎,第二个参数是否开启抗锯齿

    const engine = new BABYLON.Engine(canvas, true);

    //创建场景

    const scene = new BABYLON.Scene(engine);

    //3、创建一个旋转相机

    const camera = new BABYLON.ArcRotateCamera(

        "camera",  //相机名称

        0,         //相机水平旋转角度

        0,         //相机垂直旋转角度

        -10,        //相机的半径（相机离目标点的距离）

        BABYLON.Vector3.Zero(), //相机的目标点（原点）

        scene      //相机所在场景

    );

    //设置相机的位置

    camera.setPosition(new BABYLON.Vector3(0, 5, -10));

    //把相机附加到画布上，通过鼠标控制相机的移动旋转

    camera.attachControl(canvas);

    //4、创建光源(平行光)

    const light = new BABYLON.DirectionalLight(

        "light",    //光源名称

        new BABYLON.Vector3(-1, -1, 0),  //光源的方向（从上照射）

        scene       //光源所在的场景

    );

    //设置平行光的颜色

    light.diffuse = new BABYLON.Color3(1,1,1);  //白色

    //设置平行光的高光颜色

    light.specular = new BABYLON.Color3(1,1,1);   //白色

    //设置平行光的强度

    light.intensity = 1;

    //4、创建地面

    const ground = BABYLON.MeshBuilder.CreateGround(

        "ground",  //地面名称

        { width: 12, height: 12 },  //地面的宽高

        scene  //地面所在的场景

    );

    //设置地面的位置

ground.position.set(0, -1, 0);  //x,y,z坐标位置

    //5、创建球体

    const sphere = BABYLON.MeshBuilder.CreateSphere(

        "sphere",     //球的名称

        { diameter: 2 }, //球的直径

        scene         //球所在的场景

    );

    //设置球体的位置

    sphere.position.set(0, 0, -4);  //x,y,z坐标位置

    //缩小球体

    sphere.scaling.set(0.5, 0.5, 0.5);

    //6、渲染场景

     engine.runRenderLoop(function () {

        scene.render();

    });

    // 7、监听窗口大小改变，使场景始终填满整个窗口

    window.addEventListener("resize", function () {

        engine.resize();

    });

});

export default {

}

</script>

 

<style>

* {

    padding: 0;

    margin: 0;

}

#renderCanvas {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    width: 100vh;

    height: 100vh;

    touch-action: none;

}

</style>

• 物体的创建、位置、缩放、旋转

 

//创建球体

    const sphere = BABYLON.MeshBuilder.CreateSphere(

        "sphere",     //球的名称

        { diameter: 2 }, //球的直径

        scene         //球所在的场景

    );

    //设置球体的位置

    sphere.position.set(0, 0, -4);  //x,y,z坐标位置

    //缩小球体

    sphere.scaling.set(0.5,0.5,0.5);

//创建圆锥体

    const cone = BABYLON.MeshBuilder.CreateCylinder(

        "cone",     //圆锥体的名称

        {

            height: 2,         //圆锥体的高度

            diameterTop: 0,   //圆锥体的顶部直径

            diameterBottom: 3,   //圆锥体的底部直径

            tessellation: 64,    //圆锥体的细分数

        },

        scene               //圆锥体所在的场景

    );

    //设置圆锥体的位置

// torus.position.set(-4, -0.5, 0);  //x,y,z坐标位置

   

//创建圆环

    const torus = BABYLON.MeshBuilder.CreateTorus(

        "torus",     //圆环的名称

        {

            diameter: 3,   //圆环的直径

            thickness: 1,  //圆环的厚度

            tessellation: 32, ///圆环的细分数

        },

        scene               //圆环所在的场景

    );

    //设置圆环的位置

    torus.position.set(-4, -0.5, 0);  //x,y,z坐标位置

    //缩小圆环

torus.scaling.set(0.5,0.5,0.5);

 //创建立方体

    const box = BABYLON.MeshBuilder.CreateBox(

        "box",     //立方体的名称

        { size: 2 },  //立方体的大小

        scene         //立方体所在的场景

    );

    //设置立方体的位置

    box.position.set(4, 0, 0);  //x,y,z坐标位置

    //缩小立方体

box.scaling.set(0.5,0.5,0.5);

 //旋转立方体

    box.rotation.set(0,Math.PI/4,0);  //绕y轴旋转45度

    //绕着某个点旋转

    box.rotateAround(

        new BABYLON.Vector3(0,0,0),  //旋转的中心点

        new BABYLON.Vector3(0,1,0),   //旋转的轴

        Math.PI/4    //旋转的角度

)

 //创建圆柱体

    const cylinder = BABYLON.MeshBuilder.CreateCylinder(

        "cylinder",     //圆柱体的名称

        {

            height: 2 ,  //圆柱体的高度

            diameter:2,  //圆柱体的直径

        },  

        scene         //圆柱体所在的场景

    );

    //设置圆柱体的位置

    cylinder.position.set(0, 0, 4);  //x,y,z坐标位置

    //缩小圆柱

    cylinder.scaling.set(1,0.5,1);

三、灯光

//创建光源(平行光)

    const light = new BABYLON.DirectionalLight(

        "light",    //光源名称

        new BABYLON.Vector3(-1, -1, 0),  //光源的方向（从上照射）

        scene       //光源所在的场景

    );

    //设置平行光的颜色

    light.diffuse = new BABYLON.Color3(0,1,0);  //绿色

    //设置平行光的高光颜色

    light.specular = new BABYLON.Color3(1,1,1);   //白色

    //设置平行光的强度

    light.intensity = 0.5;

    //创建点光源

    const pointLight = new BABYLON.PointLight(

        "pointLight",    //光源名称

        new BABYLON.Vector3(-2, 0, 0),  //点光源的位置

        scene       //光源所在的场景

    );

    //设置点光源的颜色

    pointLight.diffuse = new BABYLON.Color3(1,0,0);  //rgb数值

    //设置点光源的高光颜色

    pointLight.specular = new BABYLON.Color3(1,1,0);   //黄色

    //设置点光源的强度

    pointLight.intensity = 0.5;

   

 //创建聚光灯

    const spotLight = new BABYLON.SpotLight(

        "spotLight",    //光源名称

        new BABYLON.Vector3(0, 0, 5),  //聚光灯的位置

        new BABYLON.Vector3(0, 0, -1),  //聚光灯的方向

        Math.PI/3,   //聚光灯的角度

        2,           //聚光灯的强度

        scene       //聚光灯所在的场景

    );

    //设置点光源的颜色

    spotLight.diffuse = new BABYLON.Color3(1,0,1);  //rgb数值

    //设置点光源的高光颜色

    spotLight.specular = new BABYLON.Color3(1,1,1);   //黄色

    //设置点光源的强度

    spotLight.intensity = 1;

四、阴影

    //生成阴影

    //球体生成阴影

    var shadowGenerator = new BABYLON.ShadowGenerator(1920,spotLight);  //1024阴影贴图大小，spotLight聚光灯

    //球体投射阴影

    shadowGenerator.addShadowCaster(sphere);

    //地面接收阴影

    ground.receiveShadows = true;

以上小结案例代码（创建、位置、缩放、旋转、灯光、阴影）：

<template>

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

</template>

 

<script>

// import * as BABYLON from "babylonjs"

window.addEventListener('DOMContentLoaded', function () {

    //创建canvas

    const canvas = document.getElementById('renderCanvas');

    //设置canvas得宽高

    canvas.width = this.window.innerWidth;

    canvas.height = this.window.innerHeight;

    //将canvas添加到body中

    document.body.appendChild(canvas);

    //canvas元素创建babylon渲染引擎,第二个参数是否开启抗锯齿

    const engine = new BABYLON.Engine(canvas, true);

    //创建场景

    const scene = new BABYLON.Scene(engine);

    //创建一个旋转相机

    const camera = new BABYLON.ArcRotateCamera(

        "camera",  //相机名称

        0,         //相机水平旋转角度

        0,         //相机垂直旋转角度

        -10,        //相机的半径（相机离目标点的距离）

        BABYLON.Vector3.Zero(), //相机的目标点（原点）

        scene      //相机所在场景

    );

    //设置相机的位置

    camera.setPosition(new BABYLON.Vector3(0, 5, -10));

    //把相机附加到画布上，通过鼠标控制相机的移动旋转

    camera.attachControl(canvas);

    //创建球体

    const sphere = BABYLON.MeshBuilder.CreateSphere(

        "sphere",     //球的名称

        { diameter: 2 }, //球的直径

        scene         //球所在的场景

    );

    //设置球体的位置

    sphere.position.set(0, 0, -4);  //x,y,z坐标位置

    //缩小球体

    sphere.scaling.set(0.5, 0.5, 0.5);

    // //创建光源(平行光)

    // const light = new BABYLON.DirectionalLight(

    //     "light",    //光源名称

    //     new BABYLON.Vector3(-1, -1, 0),  //光源的方向（从上照射）

    //     scene       //光源所在的场景

    // );

    // //设置平行光的颜色

    // light.diffuse = new BABYLON.Color3(0,1,0);  //绿色

    // //设置平行光的高光颜色

    // light.specular = new BABYLON.Color3(1,1,1);   //白色

    // //设置平行光的强度

    // light.intensity = 0.5;

    // //创建点光源

    // const pointLight = new BABYLON.PointLight(

    //     "pointLight",    //光源名称

    //     new BABYLON.Vector3(-2, 0, 0),  //点光源的位置

    //     scene       //光源所在的场景

    // );

    // //设置点光源的颜色

    // pointLight.diffuse = new BABYLON.Color3(1,0,0);  //rgb数值

    // //设置点光源的高光颜色

    // pointLight.specular = new BABYLON.Color3(1,1,0);   //黄色

    // //设置点光源的强度

    // pointLight.intensity = 0.5;

    //创建聚光灯

    const spotLight = new BABYLON.SpotLight(

        "spotLight",    //光源名称

        new BABYLON.Vector3(0, 0, 5),  //聚光灯的位置

        new BABYLON.Vector3(0, 0, -1),  //聚光灯的方向

        Math.PI/3,   //聚光灯的角度

        2,           //聚光灯的强度

        scene       //聚光灯所在的场景

    );

    //设置聚光灯的颜色

    spotLight.diffuse = new BABYLON.Color3(1,0,1);  //rgb数值

    //设置聚光灯的高光颜色

    spotLight.specular = new BABYLON.Color3(1,1,1);   //黄色

    //设置聚光灯的强度

    spotLight.intensity = 1;

    //生成阴影

    //球体生成阴影

    var shadowGenerator = new BABYLON.ShadowGenerator(1024,spotLight);  //1024阴影贴图大小，spotLight聚光灯

    //球体投射阴影

    shadowGenerator.addShadowCaster(sphere);

    // //创建地面

    const ground = BABYLON.MeshBuilder.CreateGround(

        "ground",  //地面名称

        { width: 12, height: 12 },  //地面的宽高

        scene  //地面所在的场景

    );

    //设置地面的位置

    ground.position.set(0, -1, 0);  //x,y,z坐标位置

   

    //地面接收阴影

     ground.receiveShadows = true;

    //创建平面

    // const plane = BABYLON.MeshBuilder.CreatePlane(

    //     "plane",  //平面名称

    //     { width: 6, height: 6 },  //地面的宽高

    //     scene  //平面所在的场景

    // );

    //创建圆锥体

    const cone = BABYLON.MeshBuilder.CreateCylinder(

        "cone",     //圆锥体的名称

        {

            height: 2,         //圆锥体的高度

            diameterTop: 0,   //圆锥体的顶部直径

            diameterBottom: 3,   //圆锥体的底部直径

            tessellation: 64,    //圆锥体的细分数

        },

        scene               //圆锥体所在的场景

    );

    //设置圆锥体的位置

    // torus.position.set(-4, -0.5, 0);  //x,y,z坐标位置

    //创建圆环

    const torus = BABYLON.MeshBuilder.CreateTorus(

        "torus",     //圆环的名称

        {

            diameter: 3,   //圆环的直径

            thickness: 1,  //圆环的厚度

            tessellation: 32, ///圆环的细分数

        },

        scene               //圆环所在的场景

    );

    //设置圆环的位置

    torus.position.set(-4, -0.5, 0);  //x,y,z坐标位置

    //缩小圆环

    torus.scaling.set(0.5, 0.5, 0.5);

    //创建立方体

    const box = BABYLON.MeshBuilder.CreateBox(

        "box",     //立方体的名称

        { size: 2 },  //立方体的大小

        scene         //立方体所在的场景

    );

    //设置立方体的位置

    box.position.set(4, 0, 0);  //x,y,z坐标位置

    //缩小立方体

    box.scaling.set(0.5, 0.5, 0.5);

    //旋转立方体

    box.rotation.set(0, Math.PI / 4, 0);  //绕y轴旋转45度

    //绕着某个点旋转

    box.rotateAround(

        new BABYLON.Vector3(0, 0, 0),  //旋转的中心点

        new BABYLON.Vector3(0, 1, 0),   //旋转的轴

        Math.PI / 4    //旋转的角度

    )

    //创建圆柱体

    const cylinder = BABYLON.MeshBuilder.CreateCylinder(

        "cylinder",     //圆柱体的名称

        {

            height: 2,  //圆柱体的高度

            diameter: 2,  //圆柱体的直径

        },

        scene         //圆柱体所在的场景

    );

    //设置圆柱体的位置

    cylinder.position.set(0, 0, 4);  //x,y,z坐标位置

    //缩小圆柱

    cylinder.scaling.set(1, 0.5, 1);

    //渲染场景

    engine.runRenderLoop(function () {

        scene.render();

    });

    // 监听窗口大小改变，使场景始终填满整个窗口

    window.addEventListener("resize", function () {

        engine.resize();

    });

});

export default {

}

</script>

 

<style>

* {

    padding: 0;

    margin: 0;

}

#renderCanvas {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    width: 100vh;

    height: 100vh;

    touch-action: none;

}

</style>

• 材质和纹理贴图

//创建地面材质

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

    ground.material = groundMaterial;

    // //设置地面材质的漫反射颜色

    // groundMaterial.diffuseColor = new BABYLON.Color3(1,0,0)  //Color3代表用rgb颜色

    // //修改灯光的颜色

    // light.diffuse = new BABYLON.Color3(0,1,0);  //白色

    // //设置地面高光

    // groundMaterial.specularColor = new BABYLON.Color3(1,0,0)  //Color3代表用rgb颜色

    // light.specular = new BABYLON.Color3(0,1,0);   //白色

    // //设置地面发光

    // groundMaterial.emissiveColor = new BABYLON.Color3(0,1,0);  //绿色

    //设置地面反射环境光

    // groundMaterial.ambientColor = new BABYLON.Color3(0,1,0);  //绿色

    // //需要设置场景环境光

    // scene.ambientColor = new BABYLON.Color3(1,1,1);

    // scene.clearColor = new BABYLON.Color3(0.5,1,0.5);

    //设置地面纹理贴图

     groundMaterial.diffuseTexture = new BABYLON.Texture(

        "models/tex/run.png",

        scene

     );

     //设置纹理是透明纹理

     groundMaterial.diffuseTexture.hasAlpha = true;

• 模型加载和动画控制

加载外部模型必须先安装整个插件，否则会报错。

 let animation;  //声明一个动画变量

    //加载gltf模型

    BABYLON.SceneLoader.Append(

        "models/",           //模型所在文件名

        "glab.glb",   //模型名称

        scene,                //模型要加载的场景

        (gltf) => {

            //加载完成后的回调函数

            console.log(gltf);

            //获取模型动画

            animation = gltf.animationGroups[0];

            animation.speedRatio = 1.5;

        }

    );

    window.addEventListener("click", () => {

        //控制停止和播放动画

        if(animation._isStarted){

            //停止动画

            animation.stop();

• 初始化项目：

1. main.js

import Vue from 'vue'

import App from './App.vue'

import router from './router'

import store from './store'

import './assets/font/iconfont.css'   //字体图标

import './assets/css/index.css'   //全局样式

import * as BABYLON from 'babylonjs'

import 'babylonjs-loaders'

Vue.config.productionTip = false

new Vue({

  router,

  store,

  render: h => h(App)

}).$mount('#app')

2、App.vue

<template>

  <div id="app">

    <!-- <img src="@/assets/images/model.png" /> -->

    <!-- <nav>

      <router-link to="/">Home</router-link> |

      <router-link to="/about">About</router-link>

    </nav>

    <router-view/> -->

    <MyBaby/>

  </div>

</template>

<script>

import MyBaby from '@/views/MyBaby.vue';

export default {

  data() {

    return {

    }

  },

  methods: {

  },

  components: {

    MyBaby

}

}

</script>

<style>

body {

  width: 100%;

  height: 100%;

  /* background: url("~@/assets/images/bg.jpg") no-repeat; */

}

#app {

  width: 100%;

  height: 100%;

  text-align: center;

}

/* @import './assets/css/index.css' */

</style>

3、MyBabylon.vue

<template>

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

</template>

 

<script>

// import * as BABYLON from "babylonjs"

window.addEventListener('DOMContentLoaded', function () {

    //创建canvas

    const canvas = document.getElementById('renderCanvas');

    //设置canvas得宽高

    canvas.width = this.window.innerWidth;

    canvas.height = this.window.innerHeight;

    //将canvas添加到body中

    document.body.appendChild(canvas);

    //canvas元素创建babylon渲染引擎,第二个参数是否开启抗锯齿

    const engine = new BABYLON.Engine(canvas, true);

    //创建场景

    const scene = new BABYLON.Scene(engine);

    //创建一个旋转相机

    const camera = new BABYLON.ArcRotateCamera(

        "camera",  //相机名称

        0,         //相机水平旋转角度

        0,         //相机垂直旋转角度

        -10,        //相机的半径（相机离目标点的距离）

        BABYLON.Vector3.Zero(), //相机的目标点（原点）

        scene      //相机所在场景

    );

    //设置相机的位置

    camera.setPosition(new BABYLON.Vector3(0, 5, -10));

    //把相机附加到画布上，通过鼠标控制相机的移动旋转

    camera.attachControl(canvas);

    //创建球体

    const sphere = BABYLON.MeshBuilder.CreateSphere(

        "sphere",     //球的名称

        { diameter: 2 }, //球的直径

        scene         //球所在的场景

    );

    //设置球体的位置

    sphere.position.set(0, 0, -4);  //x,y,z坐标位置

    //缩小球体

    sphere.scaling.set(0.5, 0.5, 0.5);

    //创建光源(平行光)

    const light = new BABYLON.DirectionalLight(

        "light",    //光源名称

        new BABYLON.Vector3(-1, -1, 0),  //光源的方向（从上照射）

        scene       //光源所在的场景

    );

    //设置平行光的颜色

    light.diffuse = new BABYLON.Color3(0,1,0);  //绿色

    //设置平行光的高光颜色

    light.specular = new BABYLON.Color3(1,1,1);   //白色

    //设置平行光的强度

    light.intensity = 0.5;

    //创建点光源

    const pointLight = new BABYLON.PointLight(

        "pointLight",    //光源名称

        new BABYLON.Vector3(-2, 0, 0),  //点光源的位置

        scene       //光源所在的场景

    );

    //设置点光源的颜色

    pointLight.diffuse = new BABYLON.Color3(1,0,0);  //rgb数值

    //设置点光源的高光颜色

    pointLight.specular = new BABYLON.Color3(1,1,0);   //黄色

    //设置点光源的强度

    pointLight.intensity = 0.5;

    //创建聚光灯

    const spotLight = new BABYLON.SpotLight(

        "spotLight",    //光源名称

        new BABYLON.Vector3(0, 0, 5),  //聚光灯的位置

        new BABYLON.Vector3(0, 0, -1),  //聚光灯的方向

        Math.PI/3,   //聚光灯的角度

        2,           //聚光灯的强度

        scene       //聚光灯所在的场景

    );

    //设置点光源的颜色

    spotLight.diffuse = new BABYLON.Color3(1,0,1);  //rgb数值

    //设置点光源的高光颜色

    spotLight.specular = new BABYLON.Color3(1,1,1);   //黄色

    //设置点光源的强度

    spotLight.intensity = 1;

    // //创建地面

    const ground = BABYLON.MeshBuilder.CreateGround(

        "ground",  //地面名称

        { width: 12, height: 12 },  //地面的宽高

        scene  //地面所在的场景

    );

    //设置地面的位置

    ground.position.set(0, -1, 0);  //x,y,z坐标位置

    //创建平面

    // const plane = BABYLON.MeshBuilder.CreatePlane(

    //     "plane",  //平面名称

    //     { width: 6, height: 6 },  //地面的宽高

    //     scene  //平面所在的场景

    // );

    //创建圆锥体

    const cone = BABYLON.MeshBuilder.CreateCylinder(

        "cone",     //圆锥体的名称

        {

            height: 2,         //圆锥体的高度

            diameterTop: 0,   //圆锥体的顶部直径

            diameterBottom: 3,   //圆锥体的底部直径

            tessellation: 64,    //圆锥体的细分数

        },

        scene               //圆锥体所在的场景

    );

    //设置圆锥体的位置

    // torus.position.set(-4, -0.5, 0);  //x,y,z坐标位置

    //创建圆环

    const torus = BABYLON.MeshBuilder.CreateTorus(

        "torus",     //圆环的名称

        {

            diameter: 3,   //圆环的直径

            thickness: 1,  //圆环的厚度

            tessellation: 32, ///圆环的细分数

        },

        scene               //圆环所在的场景

    );

    //设置圆环的位置

    torus.position.set(-4, -0.5, 0);  //x,y,z坐标位置

    //缩小圆环

    torus.scaling.set(0.5, 0.5, 0.5);

    //创建立方体

    const box = BABYLON.MeshBuilder.CreateBox(

        "box",     //立方体的名称

        { size: 2 },  //立方体的大小

        scene         //立方体所在的场景

    );

    //设置立方体的位置

    box.position.set(4, 0, 0);  //x,y,z坐标位置

    //缩小立方体

    box.scaling.set(0.5, 0.5, 0.5);

    //旋转立方体

    box.rotation.set(0, Math.PI / 4, 0);  //绕y轴旋转45度

    //绕着某个点旋转

    box.rotateAround(

        new BABYLON.Vector3(0, 0, 0),  //旋转的中心点

        new BABYLON.Vector3(0, 1, 0),   //旋转的轴

        Math.PI / 4    //旋转的角度

    )

    //创建圆柱体

    const cylinder = BABYLON.MeshBuilder.CreateCylinder(

        "cylinder",     //圆柱体的名称

        {

            height: 2,  //圆柱体的高度

            diameter: 2,  //圆柱体的直径

        },

        scene         //圆柱体所在的场景

    );

    //设置圆柱体的位置

    cylinder.position.set(0, 0, 4);  //x,y,z坐标位置

    //缩小圆柱

    cylinder.scaling.set(1, 0.5, 1);

    //渲染场景

    engine.runRenderLoop(function () {

        scene.render();

    });

    // 监听窗口大小改变，使场景始终填满整个窗口

    window.addEventListener("resize", function () {

        engine.resize();

    });

});

export default {

}

</script>

 

<style>

* {

    padding: 0;

    margin: 0;

}

#renderCanvas {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    width: 100vh;

    height: 100vh;

    touch-action: none;

}

</style>

Web3D的基本构架：

<template>

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

</template>

 

<script>

// import * as BABYLON from "babylonjs"

window.addEventListener('DOMContentLoaded', function () {

    //1、创建canvas

    const canvas = document.getElementById('renderCanvas');

    //设置canvas得宽高

    canvas.width = this.window.innerWidth;

    canvas.height = this.window.innerHeight;

    //2、将canvas添加到body中

    document.body.appendChild(canvas);

    //canvas元素创建babylon渲染引擎,第二个参数是否开启抗锯齿

    const engine = new BABYLON.Engine(canvas, true);

    //创建场景

    const scene = new BABYLON.Scene(engine);

    //3、创建一个旋转相机

    const camera = new BABYLON.ArcRotateCamera(

        "camera",  //相机名称

        0,         //相机水平旋转角度

        0,         //相机垂直旋转角度

        -10,        //相机的半径（相机离目标点的距离）

        BABYLON.Vector3.Zero(), //相机的目标点（原点）

        scene      //相机所在场景

    );

    //设置相机的位置

    camera.setPosition(new BABYLON.Vector3(0, 5, -10));

    //把相机附加到画布上，通过鼠标控制相机的移动旋转

    camera.attachControl(canvas);

    //4、创建光源(平行光)

    const light = new BABYLON.DirectionalLight(

        "light",    //光源名称

        new BABYLON.Vector3(-1, -1, 0),  //光源的方向（从上照射）

        scene       //光源所在的场景

    );

    //设置平行光的颜色

    light.diffuse = new BABYLON.Color3(1,1,1);  //白色

    //设置平行光的高光颜色

    light.specular = new BABYLON.Color3(1,1,1);   //白色

    //设置平行光的强度

    light.intensity = 1;

    //4、创建地面

    const ground = BABYLON.MeshBuilder.CreateGround(

        "ground",  //地面名称

        { width: 12, height: 12 },  //地面的宽高

        scene  //地面所在的场景

    );

    //设置地面的位置

ground.position.set(0, -1, 0);  //x,y,z坐标位置

    //5、创建球体

    const sphere = BABYLON.MeshBuilder.CreateSphere(

        "sphere",     //球的名称

        { diameter: 2 }, //球的直径

        scene         //球所在的场景

    );

    //设置球体的位置

    sphere.position.set(0, 0, -4);  //x,y,z坐标位置

    //缩小球体

    sphere.scaling.set(0.5, 0.5, 0.5);

    //6、渲染场景

     engine.runRenderLoop(function () {

        scene.render();

    });

    // 7、监听窗口大小改变，使场景始终填满整个窗口

    window.addEventListener("resize", function () {

        engine.resize();

    });

});

export default {

}

</script>

 

<style>

* {

    padding: 0;

    margin: 0;

}

#renderCanvas {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    width: 100vh;

    height: 100vh;

    touch-action: none;

}

</style>

• 物体的创建、位置、缩放、旋转

 

//创建球体

    const sphere = BABYLON.MeshBuilder.CreateSphere(

        "sphere",     //球的名称

        { diameter: 2 }, //球的直径

        scene         //球所在的场景

    );

    //设置球体的位置

    sphere.position.set(0, 0, -4);  //x,y,z坐标位置

    //缩小球体

    sphere.scaling.set(0.5,0.5,0.5);

//创建圆锥体

    const cone = BABYLON.MeshBuilder.CreateCylinder(

        "cone",     //圆锥体的名称

        {

            height: 2,         //圆锥体的高度

            diameterTop: 0,   //圆锥体的顶部直径

            diameterBottom: 3,   //圆锥体的底部直径

            tessellation: 64,    //圆锥体的细分数

        },

        scene               //圆锥体所在的场景

    );

    //设置圆锥体的位置

// torus.position.set(-4, -0.5, 0);  //x,y,z坐标位置

   

//创建圆环

    const torus = BABYLON.MeshBuilder.CreateTorus(

        "torus",     //圆环的名称

        {

            diameter: 3,   //圆环的直径

            thickness: 1,  //圆环的厚度

            tessellation: 32, ///圆环的细分数

        },

        scene               //圆环所在的场景

    );

    //设置圆环的位置

    torus.position.set(-4, -0.5, 0);  //x,y,z坐标位置

    //缩小圆环

torus.scaling.set(0.5,0.5,0.5);

 //创建立方体

    const box = BABYLON.MeshBuilder.CreateBox(

        "box",     //立方体的名称

        { size: 2 },  //立方体的大小

        scene         //立方体所在的场景

    );

    //设置立方体的位置

    box.position.set(4, 0, 0);  //x,y,z坐标位置

    //缩小立方体

box.scaling.set(0.5,0.5,0.5);

 //旋转立方体

    box.rotation.set(0,Math.PI/4,0);  //绕y轴旋转45度

    //绕着某个点旋转

    box.rotateAround(

        new BABYLON.Vector3(0,0,0),  //旋转的中心点

        new BABYLON.Vector3(0,1,0),   //旋转的轴

        Math.PI/4    //旋转的角度

)

 //创建圆柱体

    const cylinder = BABYLON.MeshBuilder.CreateCylinder(

        "cylinder",     //圆柱体的名称

        {

            height: 2 ,  //圆柱体的高度

            diameter:2,  //圆柱体的直径

        },  

        scene         //圆柱体所在的场景

    );

    //设置圆柱体的位置

    cylinder.position.set(0, 0, 4);  //x,y,z坐标位置

    //缩小圆柱

    cylinder.scaling.set(1,0.5,1);

三、灯光

//创建光源(平行光)

    const light = new BABYLON.DirectionalLight(

        "light",    //光源名称

        new BABYLON.Vector3(-1, -1, 0),  //光源的方向（从上照射）

        scene       //光源所在的场景

    );

    //设置平行光的颜色

    light.diffuse = new BABYLON.Color3(0,1,0);  //绿色

    //设置平行光的高光颜色

    light.specular = new BABYLON.Color3(1,1,1);   //白色

    //设置平行光的强度

    light.intensity = 0.5;

    //创建点光源

    const pointLight = new BABYLON.PointLight(

        "pointLight",    //光源名称

        new BABYLON.Vector3(-2, 0, 0),  //点光源的位置

        scene       //光源所在的场景

    );

    //设置点光源的颜色

    pointLight.diffuse = new BABYLON.Color3(1,0,0);  //rgb数值

    //设置点光源的高光颜色

    pointLight.specular = new BABYLON.Color3(1,1,0);   //黄色

    //设置点光源的强度

    pointLight.intensity = 0.5;

   

 //创建聚光灯

    const spotLight = new BABYLON.SpotLight(

        "spotLight",    //光源名称

        new BABYLON.Vector3(0, 0, 5),  //聚光灯的位置

        new BABYLON.Vector3(0, 0, -1),  //聚光灯的方向

        Math.PI/3,   //聚光灯的角度

        2,           //聚光灯的强度

        scene       //聚光灯所在的场景

    );

    //设置点光源的颜色

    spotLight.diffuse = new BABYLON.Color3(1,0,1);  //rgb数值

    //设置点光源的高光颜色

    spotLight.specular = new BABYLON.Color3(1,1,1);   //黄色

    //设置点光源的强度

    spotLight.intensity = 1;

四、阴影

    //生成阴影

    //球体生成阴影

    var shadowGenerator = new BABYLON.ShadowGenerator(1920,spotLight);  //1024阴影贴图大小，spotLight聚光灯

    //球体投射阴影

    shadowGenerator.addShadowCaster(sphere);

    //地面接收阴影

    ground.receiveShadows = true;

以上小结案例代码（创建、位置、缩放、旋转、灯光、阴影）：

<template>

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

</template>

 

<script>

// import * as BABYLON from "babylonjs"

window.addEventListener('DOMContentLoaded', function () {

    //创建canvas

    const canvas = document.getElementById('renderCanvas');

    //设置canvas得宽高

    canvas.width = this.window.innerWidth;

    canvas.height = this.window.innerHeight;

    //将canvas添加到body中

    document.body.appendChild(canvas);

    //canvas元素创建babylon渲染引擎,第二个参数是否开启抗锯齿

    const engine = new BABYLON.Engine(canvas, true);

    //创建场景

    const scene = new BABYLON.Scene(engine);

    //创建一个旋转相机

    const camera = new BABYLON.ArcRotateCamera(

        "camera",  //相机名称

        0,         //相机水平旋转角度

        0,         //相机垂直旋转角度

        -10,        //相机的半径（相机离目标点的距离）

        BABYLON.Vector3.Zero(), //相机的目标点（原点）

        scene      //相机所在场景

    );

    //设置相机的位置

    camera.setPosition(new BABYLON.Vector3(0, 5, -10));

    //把相机附加到画布上，通过鼠标控制相机的移动旋转

    camera.attachControl(canvas);

    //创建球体

    const sphere = BABYLON.MeshBuilder.CreateSphere(

        "sphere",     //球的名称

        { diameter: 2 }, //球的直径

        scene         //球所在的场景

    );

    //设置球体的位置

    sphere.position.set(0, 0, -4);  //x,y,z坐标位置

    //缩小球体

    sphere.scaling.set(0.5, 0.5, 0.5);

    // //创建光源(平行光)

    // const light = new BABYLON.DirectionalLight(

    //     "light",    //光源名称

    //     new BABYLON.Vector3(-1, -1, 0),  //光源的方向（从上照射）

    //     scene       //光源所在的场景

    // );

    // //设置平行光的颜色

    // light.diffuse = new BABYLON.Color3(0,1,0);  //绿色

    // //设置平行光的高光颜色

    // light.specular = new BABYLON.Color3(1,1,1);   //白色

    // //设置平行光的强度

    // light.intensity = 0.5;

    // //创建点光源

    // const pointLight = new BABYLON.PointLight(

    //     "pointLight",    //光源名称

    //     new BABYLON.Vector3(-2, 0, 0),  //点光源的位置

    //     scene       //光源所在的场景

    // );

    // //设置点光源的颜色

    // pointLight.diffuse = new BABYLON.Color3(1,0,0);  //rgb数值

    // //设置点光源的高光颜色

    // pointLight.specular = new BABYLON.Color3(1,1,0);   //黄色

    // //设置点光源的强度

    // pointLight.intensity = 0.5;

    //创建聚光灯

    const spotLight = new BABYLON.SpotLight(

        "spotLight",    //光源名称

        new BABYLON.Vector3(0, 0, 5),  //聚光灯的位置

        new BABYLON.Vector3(0, 0, -1),  //聚光灯的方向

        Math.PI/3,   //聚光灯的角度

        2,           //聚光灯的强度

        scene       //聚光灯所在的场景

    );

    //设置聚光灯的颜色

    spotLight.diffuse = new BABYLON.Color3(1,0,1);  //rgb数值

    //设置聚光灯的高光颜色

    spotLight.specular = new BABYLON.Color3(1,1,1);   //黄色

    //设置聚光灯的强度

    spotLight.intensity = 1;

    //生成阴影

    //球体生成阴影

    var shadowGenerator = new BABYLON.ShadowGenerator(1024,spotLight);  //1024阴影贴图大小，spotLight聚光灯

    //球体投射阴影

    shadowGenerator.addShadowCaster(sphere);

    // //创建地面

    const ground = BABYLON.MeshBuilder.CreateGround(

        "ground",  //地面名称

        { width: 12, height: 12 },  //地面的宽高

        scene  //地面所在的场景

    );

    //设置地面的位置

    ground.position.set(0, -1, 0);  //x,y,z坐标位置

   

    //地面接收阴影

     ground.receiveShadows = true;

    //创建平面

    // const plane = BABYLON.MeshBuilder.CreatePlane(

    //     "plane",  //平面名称

    //     { width: 6, height: 6 },  //地面的宽高

    //     scene  //平面所在的场景

    // );

    //创建圆锥体

    const cone = BABYLON.MeshBuilder.CreateCylinder(

        "cone",     //圆锥体的名称

        {

            height: 2,         //圆锥体的高度

            diameterTop: 0,   //圆锥体的顶部直径

            diameterBottom: 3,   //圆锥体的底部直径

            tessellation: 64,    //圆锥体的细分数

        },

        scene               //圆锥体所在的场景

    );

    //设置圆锥体的位置

    // torus.position.set(-4, -0.5, 0);  //x,y,z坐标位置

    //创建圆环

    const torus = BABYLON.MeshBuilder.CreateTorus(

        "torus",     //圆环的名称

        {

            diameter: 3,   //圆环的直径

            thickness: 1,  //圆环的厚度

            tessellation: 32, ///圆环的细分数

        },

        scene               //圆环所在的场景

    );

    //设置圆环的位置

    torus.position.set(-4, -0.5, 0);  //x,y,z坐标位置

    //缩小圆环

    torus.scaling.set(0.5, 0.5, 0.5);

    //创建立方体

    const box = BABYLON.MeshBuilder.CreateBox(

        "box",     //立方体的名称

        { size: 2 },  //立方体的大小

        scene         //立方体所在的场景

    );

    //设置立方体的位置

    box.position.set(4, 0, 0);  //x,y,z坐标位置

    //缩小立方体

    box.scaling.set(0.5, 0.5, 0.5);

    //旋转立方体

    box.rotation.set(0, Math.PI / 4, 0);  //绕y轴旋转45度

    //绕着某个点旋转

    box.rotateAround(

        new BABYLON.Vector3(0, 0, 0),  //旋转的中心点

        new BABYLON.Vector3(0, 1, 0),   //旋转的轴

        Math.PI / 4    //旋转的角度

    )

    //创建圆柱体

    const cylinder = BABYLON.MeshBuilder.CreateCylinder(

        "cylinder",     //圆柱体的名称

        {

            height: 2,  //圆柱体的高度

            diameter: 2,  //圆柱体的直径

        },

        scene         //圆柱体所在的场景

    );

    //设置圆柱体的位置

    cylinder.position.set(0, 0, 4);  //x,y,z坐标位置

    //缩小圆柱

    cylinder.scaling.set(1, 0.5, 1);

    //渲染场景

    engine.runRenderLoop(function () {

        scene.render();

    });

    // 监听窗口大小改变，使场景始终填满整个窗口

    window.addEventListener("resize", function () {

        engine.resize();

    });

});

export default {

}

</script>

 

<style>

* {

    padding: 0;

    margin: 0;

}

#renderCanvas {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    width: 100vh;

    height: 100vh;

    touch-action: none;

}

</style>

• 材质和纹理贴图

//创建地面材质

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

    ground.material = groundMaterial;

    // //设置地面材质的漫反射颜色

    // groundMaterial.diffuseColor = new BABYLON.Color3(1,0,0)  //Color3代表用rgb颜色

    // //修改灯光的颜色

    // light.diffuse = new BABYLON.Color3(0,1,0);  //白色

    // //设置地面高光

    // groundMaterial.specularColor = new BABYLON.Color3(1,0,0)  //Color3代表用rgb颜色

    // light.specular = new BABYLON.Color3(0,1,0);   //白色

    // //设置地面发光

    // groundMaterial.emissiveColor = new BABYLON.Color3(0,1,0);  //绿色

    //设置地面反射环境光

    // groundMaterial.ambientColor = new BABYLON.Color3(0,1,0);  //绿色

    // //需要设置场景环境光

    // scene.ambientColor = new BABYLON.Color3(1,1,1);

    // scene.clearColor = new BABYLON.Color3(0.5,1,0.5);

    //设置地面纹理贴图

     groundMaterial.diffuseTexture = new BABYLON.Texture(

        "models/tex/run.png",

        scene

     );

     //设置纹理是透明纹理

     groundMaterial.diffuseTexture.hasAlpha = true;

• 模型加载和动画控制

加载外部模型必须先安装整个插件，否则会报错。

 let animation;  //声明一个动画变量

    //加载gltf模型

    BABYLON.SceneLoader.Append(

        "models/",           //模型所在文件名

        "glab.glb",   //模型名称

        scene,                //模型要加载的场景

        (gltf) => {

            //加载完成后的回调函数

            console.log(gltf);

            //获取模型动画

            animation = gltf.animationGroups[0];

            animation.speedRatio = 1.5;

        }

    );

    window.addEventListener("click", () => {

        //控制停止和播放动画

        if(animation._isStarted){

            //停止动画

            animation.stop();

        }else{

            //播放动画，会重新开始

            animation.start();

        }

        //暂停和继续播放动画

        if(animation._isPaused){

            //停止动画

            animation.play();

        }else{

            //播放动画，会重新开始

            animation.pause();

        }

    })

        }else{

            //播放动画，会重新开始

            animation.start();

        }

        //暂停和继续播放动画

        if(animation._isPaused){

            //停止动画

            animation.play();

        }else{

            //播放动画，会重新开始

            animation.pause();

        }

    })