three实现可调节参数的三维玻璃杯透光效果代码-html代码-BFW代码库

three实现可调节参数的三维玻璃杯透光效果代码

代码语言：html

所属分类：三维

代码描述：three实现可调节参数的三维玻璃杯透光效果代码，玻璃透光、可调节玻璃杯形态、厚度、开口大笑、折边数量、玻璃材质、明暗度等参数。

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

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
body {
    overflow: hidden;
    padding: 0;
    margin: 0;
}
canvas {
    display: block;
}
</style>



</head>

<body  >


<div class="container">
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.133.js"></script>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.133.js"></script>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
      <script >



const container = document.querySelector('.container');

let glassConfig = {
  showTexture: false,

  // glass geometry parameters to customize via controls
  topRadius: 3.65,
  bottomRadius: 2.5,
  topHeightPercentage: .14,
  bottomHeightPercentage: .05,
  thickness: .3,
  outerFaceNumber: 12,
  bottomNotchDepth: .1,

  // other glass geometry parameters
  glassFullHeight: 10.5,
  bottomExtraThickness: 3,
  circleSegments: 30,
  glassPosition: .5,

  // material parameters (all customizable)
  metalness: .1,
  roughness: .15,
  transmission: .8,
  materialThickness: 3,
  opacity: .7 };


class Controls {
  constructor() {
    const gui = new dat.GUI();
    if (window.innerWidth < 600) gui.close();

    let folder;

    folder = gui.addFolder('Background');
    folder.close();
    folder.add(glassConfig, 'showTexture').onChange(v => {
      visualization.backPlaneMesh.material = visualization.createBackgroundMaterial();
      visualization.bottomPlaneMesh.visible = !v;
    }).name('show background');

    folder = gui.addFolder('Geometry');
    folder.add(glassConfig, 'topRadius', 1, 6).step(.01).onChange(() => {
      visualization.updateGeometry(visualization.glassMeshes.topCylinder, visualization.generateOuterTopCylinder());
      visualization.updateGeometry(visualization.glassMeshes.outerFaces, visualization.generateOuterFacedCylinder());
      visualization.updateGeometry(visualization.glassMeshes.innerSurface, visualization.generateInnerSurface());
      visualization.updateGeometry(visualization.glassMeshes.topRing, visualization.generateTopRing());
    }).name('top radius');
    folder.add(glassConfig, 'bottomRadius', 1, 6).step(.01).onChange(() => {
      visualization.updateGeometry(visualization.glassMeshes.outerFaces, visualization.generateOuterFacedCylinder());
      visualization.updateGeomet.........完整代码请登录后点击上方下载按钮下载查看