kokomi实现三维镭射圆球跟随鼠标旋转动画效果代码
代码语言:html
所属分类:三维
代码描述:kokomi实现三维镭射圆球跟随鼠标旋转动画效果代码
代码标签: kokomi 三维 镭射 圆球 跟随 鼠标 旋转 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; overflow: hidden; } #sketch { position: relative; width: 100vw; height: 100vh; background: black; } </style> </head> <body > <div id="sketch"></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/kokomi.umd.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/marcher.umd.js"></script> <script> "use strict"; class Sketch extends kokomi.Base { create() { new kokomi.OrbitControls(this); const mar = new marcher.Marcher({ antialias: true }); // 材质 const BLACK_MAT = "1.0"; const WHITE_MAT = "2.0"; const RED_MAT = "3.0"; const mat = new marcher.SDFMaterial(); mat.addColorMaterial(BLACK_MAT, 0, 0, 0); mat.addColorMaterial(WHITE_MAT, 255, 255, 255); mat.addColorMaterial(RED_MAT, 255, 0, 0); mar.setMaterial(mat); // sdf主函数 const map = new marcher.SDFMapFunction(); { // 图层 const layer = new marcher.SDFLayer(); // 组 const group = new marcher.GroupSDF({ mapFuncName: "g1", sdfVarName: "d0" }); mar.addGroup(group); layer.addPrimitive(group); // 球内 const sphere = new marcher.SphereSDF({ sdfVarName: "d1", materialId: BLACK_MAT }); group.addPrimitive(sphere); // 按钮 const button = new marcher.CylinderSDF({ sdfVarName: "d2", materialId: WHITE_MAT, radius: 0.1, height: 0.54 }); button.rotate(90, "x"); group.addPrimitive(button); // 球壳(上) const shellUpper = new marcher.SphereSDF({ sdfVarName: "d3", materialId: "3", radius: 0.55 }); const clipBoxUpper = new marcher.BoxSDF({ sdfVarName: "d4", width: 0.55, height: 0.55, depth: 0.55 }); clipBoxUpper.hide(); clipBoxUpper.translate(0, -0.6, 0); group.addPrimitive(clipBoxUpper); group.addPrimitive(shellUpper); shellUpper.intersect(clipBoxUpper); // 球壳(下) const shellLower = new marcher.SphereSDF({ sdfVarName: "d6", materialId: WHITE_MAT, radius: 0.55 }); const clipBoxLower = new marcher.BoxSDF({ sdfVarName: "d5", width: 0.55, height: 0.55, depth: 0.55 }); clipBoxLower.hide(); clipBoxLower.translate(0, 0.6, 0); group.addPrimitive(clipBoxLower); group.addPrimitive(shellLower); shellLower.intersect(clipBoxLower); // 球壳(上):挖除中间镂空部分后 const clipCylinderCenter1 = new marcher.CylinderSDF({ sdfVarName: "d7", radius: 0.15, height: 0.6, materialId: RED_MAT }); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0