- 初始化项目:
- 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();
}
})