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).onChange(v => {
      visualization.materals.forEach(m => {
        m.opacity = v;
      });
    });
  }}


class Visualization {

  constructor() {
    this.renderer = new THREE.WebGLRenderer({ antialias: true });
    this.renderer.shadowMap.enabled = true;
    container.appendChild(this.renderer.domElement);

    this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
    this.fakeCamera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
    this.camera.position.z = this.fakeCamera.position.z = 33;

    this.glassGroup = new THREE.Group();

    this.orbit = new THREE.OrbitControls(this.fakeCamera, this.renderer.domElement);
    this.orbit.enableZoom = false;
    this.orbit.enableDamping = true;
    this.orbit.autoRotate = true;

    this.setupScene();
    this.createBackgroundMaterial();
    this.createGlass();
    this.render();
  }

  setupScene() {
    this.scene.background = new THREE.Color(0xffffff);

    const pointLightShadow = new THREE.PointLight(0xffffff, .3);
    pointLightShadow.castShadow = true;
    pointLightShadow.shadow.mapSize.width = 1500;
    pointLightShadow.shadow.mapSize.height = 1500;
    pointLightShadow.position.set(0, 40, 0);
    this.scene.add(pointLightShadow);

    const pointLight = new THREE.PointLight(0xffffff, .9);
    pointLight.position.set(10, 0, 10);
    this.scene.add(pointLight);

    this.backGroundCanvas = document.createElement('canvas');
    this.backPlaneMesh = new THREE.Mesh(this.generateFullWidthPlaneGeometry(), this.createBackgroundMaterial());
    this.backPlaneMesh.position.z = -10;
    this.scene.add(this.backPlaneMesh);

    const bottomPlaneGeometry = new THREE.PlaneBufferGeometry(100, 100, 1, 1);
    this.bottomPlaneMesh = new THREE.Mesh(bottomPlaneGeometry, new THREE.ShadowMaterial({
      opacity: .02 }));

    this.bottomPlaneMesh.rotateX(-.5 * Math.PI);
    this.bottomPlaneMesh.position.y = -10;
    this.bottomPlaneMesh.receiveShadow = true;
    this.scene.add(this.bottomPlaneMesh);
  }

  generateFullWidthPlaneGeometry() {
    return new THREE.PlaneBufferGeometry(38 * window.innerWidth / window.innerHeight, 38, 1, 1);
  }

  createBackgroundMaterial() {
    const canvasWidth = this.backGroundCanvas.width = 3000 * window.innerWidth / window.innerHeight;
    const canvasHeight = this.backGroundCanvas.height = 3000;
    const ctx = this.backGroundCanvas.getContext('2d');

    if (!glassConfig.showTexture) {
      ctx.rect(0, 0, canvasWidth, canvasHeight);
      ctx.fillStyle = '#ffffff';
      ctx.fill();
      ctx.fillS.........完整代码请登录后点击上方下载按钮下载查看