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.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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0