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

代码语言：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.updateGeometry(visualization.glassMeshes.innerSurface, visualization.generateInnerSurface());
      visualization.updateGeometry(visualization.glassMeshes.bottom, visualization.generateBottom());
    }).name('bottom radius');
    folder.add(glassConfig, 'thickness', .01, .6).step(.01).onChange(() => {
      visualization.updateGeometry(visualization.glassMeshes.innerSurface, visualization.generateInnerSurface());
      visualization.updateGeometry(visualization.glassMeshes.topRing, visualization.generateTopRing());
    });
    folder.add(glassConfig, 'topHeightPercentage', 0, .25).step(.01).onChange(() => {
      visualization.updateGeometry(visualization.glassMeshes.topCylinder, visualization.generateOuterTopCylinder());
      visualization.updateGeometry(visualization.glassMeshes.outerFaces, visualization.generateOuterFacedCylinder());
    }).name('top, height %');
    folder.add(glassConfig, 'bottomHeightPercentage', 0, .25).step(.01).onChange(() => {
      visualization.updateGeometry(visualization.glassMeshes.outerFaces, visualization.generateOuterFacedCylinder());
      visualization.updateGeometry(visualization.glassMeshes.bottom, visualization.generateBottom());
    }).name('bottom, height %');
    folder.add(glassConfig, 'outerFaceNumber', 7, 20).step(1).onChange(() => {
      visualization.updateGeometry(visualization.glassMeshes.outerFaces, visualization.generateOuterFacedCylinder());
    }).name('number of faces');
    folder.add(glassConfig, 'bottomNotchDepth', .01, .25).step(.01).onChange(() => {
      visualization.updateGeometry(visualization.glassMeshes.bottom, visualization.generateBottom());
    }).name('bottom notch depth');


    folder = gui.addFolder('Material');
    folder.close();
    folder.add(glassConfig, 'metalness', 0, .3).step(.01).onChange(v => {
      visualization.materals.forEach(m => {
        m.metalness = v;
      });
    });
    folder.add(glassConfig, 'roughness', 0, .5).step(.01).onChange(v => {
      visualization.materals.forEach(m => {
        m.roughness = v;
      });
    });
    folder.add(glassConfig, 'transmission', .5, 1).step(.01).onChange(v => {
      visualization.materals.forEach(m => {
        m.transmission = v;
      });
    });
    folder.add(glassConfig, 'materialThickness', 1, 10).step(.01).onChange(v => {
      visualization.materals.forEach(m => {
        m.thickness = v;
      });
    }).name('thickness');
    folder.add(glassConfig, 'opacity', .2, .9).step(.01).o.........完整代码请登录后点击上方下载按钮下载查看