初学babylonjs

1.babylonjs官方文档

Home | Babylon.js DocumentationThe homepage of Babylon.js' documentation page. Start here and get to know the best 3D framework on the web.https://doc.babylonjs.com/

2.新建一个容器来存放3D页面

3.页面样式style.css

*{margin: 0;padding: 0;
}
canvas {position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;
}

4.编写js文件加载3D页面

import './style.css'
//导入babylonjs
import * as BABYLON from "babylonjs"//创建canvas
const canvas = document.createElement("canvas");
//设置canvas的宽高
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
//将canvas添加到body中
document.body.appendChild(canvas);// 创建引擎————进行场景渲染
// 第一个参数代表引擎要绘制到哪个canvas上，第二个参数代表是否开启抗锯齿（让界面更加清晰，减少锯齿效果）
const engine = new BABYLON.Engine(canvas, true);// 创建场景，即容器 里面转载3D物体 光源等等
const scene = new BABYLON.Scene(engine);// 创建相机 进行场景观察
const camera = new BABYLON.ArcRotateCamera("camera",                      // 相机的名称0,                             // alpha: 相机的水平旋转角度0,                             // beta: 相机的垂直旋转角度10,                            // radius: 相机的半径，控制相机距离目标点的远近BABYLON.Vector3.Zero(),        // target: 相机的目标点, 相机围绕这个点旋转scene                          //相机所在场景
);// 设置相机的位置
camera.setPosition(new BABYLON.Vector3(0, 5, -10));// 把相机附加到画布上
camera.attachControl(canvas);    // 第二个参数默认false// 渲染场景
engine.runRenderLoop(() => {scene.render();
});// 监听窗口大小改变
window.addEventListener("resize", () => {engine.resize();
});

5.光源（平行光、点光源和聚光灯）

// 创建平行光
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;// 创建点光源
const pointLight = new BABYLON.PointLight("pointLight",                  // 点光源名称new BABYLON.Vector3(-2, 0, 0), // 点光源的位置scene                          // 点光源所在的场景
);
// 设置点光源的颜色
pointLight.diffuse = new BABYLON.Color3(1, 0, 0);
// 设置点光源的高光颜色
pointLight.specular = new BABYLON.Color3(1, 1, 0);
// 设置点光源的强度
pointLight.intensity = 0.5;// 创建聚光灯
const spotLight = new BABYLON.SpotLight("spotLight",                   // 聚光灯名称new BABYLON.Vector3(0, 5, 5),  // 聚光的位置new BABYLON.Vector3(0, -1, -1), // 聚光灯的方向Math.PI / 3,                   // 聚光灯的角度2,                             // 聚光灯的衰减值 值越大衰减越快scene                          // 聚光灯所在的场景
);
spotLight.diffuse = new BABYLON.Color3(1, 0, 1);
spotLight.specular = new BABYLON.Color3(1, 1, 1);
spotLight.intensity = 1;

6.地面

// 创建地面
const ground = BABYLON.MeshBuilder.CreateGround("ground",                      // 地面名称{ width: 5, height: 5 },       //地面的宽高scene                          //地面所在的场景
);
// 设置地面的位置
// ground.position.y = -1;
ground.position.set(0, -1, 0);
// 地面接收阴影
//ground.receiveShadows = true;
// 创建地面材质
const groundMaterial = new BABYLON.StandardMaterial("groundMat", scene);
ground.material = groundMaterial;// 设置地面材质的漫反射颜色
// groundMaterial.diffuseColor = new BABYLON.Color3(1, 1, 1);// 设置地面高光
// groundMaterial.specularColor = new BABYLON.Color3(1, 0, 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("textures/watercover/020a3a27be5517d2ee72a1efd503376d.jpeg",scene
);
// 设置纹理是透明纹理
groundMaterial.diffuseTexture.hasAlpha = true;

7.几何体

（1）球体

// 创建球
const sphere = BABYLON.MeshBuilder.CreateSphere("sphere",                      // 球的名称{ diameter: 2 },                // 球的直径scene                          // 球所在的场景
);

（2）平面

// 创建平面
const plane = BABYLON.MeshBuilder.CreatePlane("plane",                          //平面名称{ size: 6 },                      //平面的大小scene                             //平面所在的场景
);

（3）立方体

// 创建立方体
const box = BABYLON.MeshBuilder.CreateBox("box",                               // 立方体名称{ size: 2 },                         // 立方体的大小scene                                // 立方体所在的场景
);
// 设置立方体的位置
box.position.set(4, 0, 0);
// 缩小立方体
box.scaling.set(0.5, 0.5, 0.5);
// 旋转立方体
//box.rotation.set(0, Math.PI / 4, 0);
box.rotation.y = Math.PI / 4;
// 绕着某个点旋转
box.rotateAround(new BABYLON.Vector3(0, 0, 0),     // 旋转的中心点new BABYLON.Vector3(0, 1, 0),     // 旋转的轴Math.PI / 4                       // 旋转的角度
)

（4）圆柱体

// 创建圆柱体
const cylinder = BABYLON.MeshBuilder.CreateCylinder("cylinder",                             // 圆柱体名称{ height: 2, diameter: 2 },             // 圆柱体的高度和至今scene                                   // 圆柱体所在的场景
);
// 设置圆柱体的位置
cylinder.position.set(0, 0, 4);
// 缩小圆柱高度
cylinder.scaling.set(1, 0.5, 1);

（5）圆锥体

// 创建圆锥体
const cone = BABYLON.MeshBuilder.CreateCylinder("cone",                                    // 圆锥体名称{ height: 2,diameterTop: 0, diameterBottom: 3,tessellation: 96                         //多边形边数 边数越多越圆}, // 圆锥的高度 圆锥顶部直径 圆锥底部直径scene                                      // 圆锥体所在的场景
);  

（6）圆环

// 创建圆环
const torus = BABYLON.MeshBuilder.CreateTorus("tours",                                      // 圆环名称{ diameter: 3, thickness: 1, tessellation: 32                            // 圆环的细分数 数值越大越圆},              // 圆环的直径和厚度scene
);
// 设置圆环的位置
torus.position.set(-4, -0.5, 0);
// 缩小圆环
torus.scaling.set(0.5, 0.5, 0.5);

8.阴影

// 生成阴影
var shadowGenerator = new BABYLON.ShadowGenerator(1024, spotLight);
// 几何体投射阴影
shadowGenerator.addShadowCaster(几何体对象名称，例如sphere上面创建的球体);

9.加载模型

//导入gltf加载器
import "babylonjs-loaders";let animation;
// 加载gltf模型
BABYLON.SceneLoader.Append("model/",                         //模型所在的文件夹，放在public文件夹下"Dog.glb",                        //模型的文件名scene,                            //模型所在的场景 (gltf)=>{// 加载完成后的回调函数console.log(gltf);// 获取模型动画animation = gltf.animationGroups[0];// 控制动画的播放速度//animation.speedRatio = 0.5;}
);

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！