Babylon实现光影反射效果-html代码-BFW代码库

Babylon实现光影反射效果

代码语言：html

所属分类：三维

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title> PBR Reflection</title>

<style>
      canvas {
  width: 100%;
  height: 100vh;
  display: block;
}
a {
  position: fixed;
  top: 0;
  left: 0;
  color: hsl(0, 0%, 100%);
  padding: 5vmin;
  font: 1em/1 monospace;
}

    </style>

</head>
<body translate="no">
<base target="_blank" />
<canvas id="elCanvas"></canvas>


<script src='http://repo.bfw.wiki/bfwrepo/js/babylon.js'></script>
<script>
      const engine = new BABYLON.Engine(elCanvas, true);
const scene = (() => {
  const scene = new BABYLON.Scene(engine);
  scene.clearColor = new BABYLON.Color4(0, 0, 0, 1);
  scene.autoClear = true;

  // 
  // gold mat
  //

  const mat0 = new BABYLON.PBRMetallicRoughnessMaterial('mat0', scene);
  mat0.metallic = 1;
  mat0.roughness = 0.2;
  mat0.baseColor = new BABYLON.Color3(0.9, 0.2, 0);

  //
  // torusknot
  //

  const mesh0 = BABYLON.MeshBuilder.CreateTorusKnot('mesh0', { p: 1, q: 2, radius: 2, radialSegments: 300, tubularSegments: 100 }, scene);
  mesh0.material = mat0;
  mesh0.position = new BABYLON.Vector3(0, 5, -5);
  mesh0.rotation.x = Math.PI / 4;

  // 
  // plate
  // 
  const mesh1 = BABYLON.MeshBuilder.CreateCylinder('mesh1', {
    diameterTop: 6,
    diameterBottom: 2,
    height: 2,
    tessellation: 100 },
  scene);
  mesh1.material = mat0;
  mesh1.position = new BABYLON.Vector3(0, 1, -5);

  //
  // ground
  //
  const ground = BABYLON.MeshBuilder.CreateGround('ground', { width: 1000, height: 1000 }, scene);
  const mat1 = new BABYLON.PBRMaterial('mat1', scene);
  mat1.reflectionTexture = new BABYLON.MirrorTexture('tex1', 2 ** 10, scene, true);
  mat1.reflectionTexture.mirrorPlane = new BABYLON.Plane(0, -1, 0, 0);
  // mirrorplane normal is pointing towards "mirror image" 
  //
  //   O       <--mirror faces to human |
  //  /|\                               |--> mirrorplane normal
  //   |\                               |
  //
  mat1.reflectionTexture.level = 0.5;
  mat1.reflectivityColor = new BABYLON.Color3(0.2, 0.2, 0.2);
  mat1.albedoColor = new BABYLON.Color3(0, 0.2, 0.9);
  ground.material = mat1;

  //
  // mirror
  // 
  const plane0 = BABYLON.MeshBuilder.CreatePlane('plane0', { width: 20, height: 20,
    sideOrientation: BABYLON.Mesh.DOUBLESIDE }, scene);
  plane0.rotation.x = Math.PI / 180 * -15;
  let mat2;
  {
    // transform normal {
    plane0.computeWorldMatrix(true); // <------- == apply transformation NOW
    const [nx, ny, nz] = plane0.........完整代码请登录后点击上方下载按钮下载查看