Babylon.js环境、材质与动画：打造交互式3D体验

使用HDR环境

创建环境贴图

将六个面（上、下、前、后、左、右）的图像组合成一个立方体贴图。

六个面的贴图命名为（_px，_py，_pz，_nx，_ny，_nz）

var skybox = BABYLON.Mesh.CreateBox("skyBox", 100.0, scene);  
var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);  
skyboxMaterial.backFaceCulling = false;  
skyboxMaterial.disableLighting = true;  
skybox.material = skyboxMaterial;  
skybox.infiniteDistance = true;  
skyboxMaterial.disableLighting = true;  
skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("文件路径", scene);  
skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;  
skybox.renderingGroupId = 0;  

 加载环境贴图

加载.env贴图

scene.environmentTexture = new BABYLON.CubeTexture("textures/country.env", scene);  
scene.createDefaultSkybox(scene.environmentTexture, false, 1000, 0, false); 

 

 加载.hdr贴图 

scene.environmentTexture = new BABYLON.HDRCubeTexture("/textures/industrial.hdr", scene, 512);    
scene.createDefaultSkybox(scene.environmentTexture, false, 1000, 0, false)  

材质

使用.hdr材质 

var hdrTexture = new BABYLON.HDRCubeTexture("textures/country.hdr", scene, 512);   
// Our built-in 'sphere' shape. Params: name, subdivs, size, scene  
var sphere = BABYLON.Mesh.CreateSphere("sphere1", 32, 4, scene);  
var sphereMtl = new BABYLON.PBRMaterial("sphereMtl", scene);  
sphereMtl.reflectionTexture = hdrTexture;  
sphere.material= sphereMtl;  

颜色材质

var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2, segments: 32}, scene);  
material = new BABYLON.StandardMaterial("bab5", scene);  
material.emissiveColor = new BABYLON.Color3(0, 0.4, 0);    
sphere.material = material;  

 

玻璃材质

// 创建球体  
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 2 }, scene);  

// 创建PBR材质并设置属性  
var material = new BABYLON.PBRMaterial("material", scene);  
material.reflectionTexture = new BABYLON.CubeTexture("textures/environment.dds", scene); // 设置环境贴图  
material.refractionTexture = new BABYLON.CubeTexture("textures/environment.dds", scene); // 设置折射贴图  
material.indexOfRefraction = 0.3; // 设置折射率  
material.alpha = 0.4; // 设置透明度  
material.albedoColor = new BABYLON.Color3(0, 0, 1); // 设置蓝色  
material.metallic = 0; // 设置金属度为0，使其呈现非金属外观  
material.roughness = 0.2; // 设置粗糙度  

// 将材质应用于球体  
sphere.material = material; 

 

 路径动画

// 创建路径  
var path = [  
    new BABYLON.Vector3(0, 0, 0),  
    new BABYLON.Vector3(3, 0, 3),  
    new BABYLON.Vector3(-3, 0, 6),  
    new BABYLON.Vector3(0, 0, 9)  
];  
  
// 创建路径动画  
var animationPath = new BABYLON.Path3D(path);  
var animation = new BABYLON.Animation("pathAnimation", "position", 30,  BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);  
  
// 设置路径动画的关键帧  
var keys = [];  
for (var i = 0; i < path.length; i++) {  
    keys.push({  
        frame: i * 30,  
        value: path[i]  
    });  
}  
animation.setKeys(keys);  
// 创建动画目标对象  
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { size: 1 }, scene);    
material = new BABYLON.StandardMaterial("bab5", scene);    
material.emissiveColor = new BABYLON.Color3(0, 0.4, 0);      
sphere.material = material;   
  
// 设置起始位置  
sphere.position = path[0];   
  
// 应用动画  
sphere.animations.push(animation);  
scene.beginAnimation(sphere, 0, path.length * 30, true);