Babylonjs学习笔记(二)——创建基本材质

书接上回,这里讨论给网格添加材质!!!

准备好材质

1、创建材质球
javascript 复制代码
/**
 * 创建网格材质
 * @param scene 场景对象
 * @returns 材质对象
 */
const createGroundMaterial=(scene:Scene):StandardMaterial=>{
  const texArray:Texture[] =[]

  // 材质uv缩放
  const uvScale = 4;

  const groundMaterial = new StandardMaterial('groundMaterial',scene)

  // diffuse 漫射纹理
  const diffuseTex = new Texture('./textures/random_bricks_thick_diff_4k.jpg',scene);
  groundMaterial.diffuseTexture  = diffuseTex
  texArray.push(diffuseTex)

  // normal 法线纹理
  const normalTex = new Texture('./textures/random_bricks_thick_nor_gl_4k.jpg',scene)
  groundMaterial.bumpTexture = normalTex;
  texArray.push(normalTex)

  // AO环境遮挡
  const aoTex = new Texture('./textures/random_bricks_thick_ao_4k.jpg',scene)
  groundMaterial.ambientTexture = aoTex;
  texArray.push(aoTex)

  // spec 镜面纹理
  const speTex = new Texture('./textures/random_bricks_thick_spec_4k.jpg',scene)
  groundMaterial.specularTexture = speTex;
  texArray.push(speTex)

  texArray.forEach((tex)=>{
    tex.uScale = uvScale;
    tex.vScale = uvScale;
  })
  return groundMaterial
}



/**
 * 创建盒子网格材质
 * @param scene 场景对象
 * @returns 材质对象
 */
const createBoxMaterial = (scene:Scene):StandardMaterial=>{
  const boxMat = new StandardMaterial('boxMat',scene)
  const aoTex = new Texture('./textures/aerial_beach_02_ao_4k.jpg',scene)
  boxMat.ambientTexture = aoTex;

  const normalTex = new Texture('./textures/aerial_beach_02_nor_gl_4k.jpg',scene)
  boxMat.bumpTexture = normalTex;

  const diffuseTex = new Texture('./textures/aerial_beach_02_diff_4k.jpg',scene)
  boxMat.diffuseTexture = diffuseTex

  return boxMat
}
2、应用材质球
javascript 复制代码
  // 创建box
  box = MeshBuilder.CreateBox('box',{size:2},scene)
  // 赋予材质
  box.material = createBoxMaterial(scene)
  box.position.y= 1;

  // 相机目标
  camera.setTarget(box)

  const ground = MeshBuilder.CreateGround('ground',{width:10,height:10},scene)
  // 赋予材质
  ground.material =  createGroundMaterial(scene)
3、演示
相关推荐
策码1 分钟前
MutationObserver监听网页二次渲染和子节点变化
前端·javascript
前端大白话5 分钟前
React 必知!useLayoutEffect Hook 与 useEffect 的终极对决,DOM 操作和动画的秘密武器
前端·javascript·react.js
海底火旺5 分钟前
JavaScript 原型探秘:深入理解 .constructor 属性
前端·javascript·深度学习
前端大白话5 分钟前
Vue中provide/inject与Vuex数据共享大比拼:一文教你选对方案
前端·javascript·vue.js
海底火旺6 分钟前
"神奇!不用除法,如何算出数组中每个元素'邻居'的乘积?"
前端·javascript·面试
fury_1239 分钟前
删除elementplus的li标签中的一个class属性?
前端·javascript·vue.js
前端Hardy17 分钟前
第8课:JavaScript实战-简易计算器——入门阶段成果验收
前端·javascript
前端Hardy18 分钟前
第7课:JavaScript事件处理——JS的“感官系统”
前端·javascript
独立开阀者_FwtCoder21 分钟前
Trae + 设计 MCP :实现 UI 到网页自动化
前端·javascript·人工智能
拖孩27 分钟前
【Nova UI】十二、打造组件库之按钮组件(上):迈向功能构建的关键一步
前端·javascript·vue.js