Babylonjs学习笔记(八)——网格行为

最新推荐文章于 2024-09-02 18:32:09 发布

原创

最新推荐文章于 2024-09-02 18:32:09 发布 · 403 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #3d

本文介绍了如何在Three.js中搭建基础场景，包括创建天空盒、网格和相机，然后详细展示了如何使用MeshAction为网格添加交互行为，如放大、材质颜色变化和物体旋转。

书接上回，这里讨论MeshAction网格行为！！！

一、搭建基础场景

let box:AbstractMesh;
let cube:AbstractMesh;
let sphere:AbstractMesh;
let cylinder:AbstractMesh;
let mat:PBRMaterial;

// 创建天空盒
const createSkyBox = (scene:Scene):void=>{
  const envTex = CubeTexture.CreateFromPrefilteredData('./env/environment.env',scene)
  scene.environmentTexture = envTex;
  scene.createDefaultSkybox(envTex,true,1000,0.2,true)
  scene.environmentIntensity = 1.5
}

// 创建网格
const creatMeshes=(scene:Scene):void=>{
  mat = new PBRMaterial('pbr')
  mat.albedoColor = new Color3(1,0,0);
  mat.roughness =1

  cube = MeshBuilder.CreateBox('cube',{size:2})
  cube.material = mat
  cube.position = new Vector3(-4,0,0)

  sphere = MeshBuilder.CreateSphere('sphere',{diameter:2})
  sphere.material = mat
  sphere.position = new Vector3(0,0,0)

  cylinder = MeshBuilder.CreateCylinder('cylinder',{diameter:2})
  cylinder.material = mat
  cylinder.position = new Vector3(4,0,0)

  // 创建行为