three+p5实现三维球体线框图交互效果代码
代码语言:html
所属分类:三维
代码描述:three+p5实现三维球体线框图交互效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, html, body { margin: 0; padding: 0; } canvas { position: absolute; } #container { z-index: 10; } #container canvas { z-index: 20; } #defaultCanvas { z-index: 5; } </style> </head> <body > <div id="container"></div> <script type="x-shader/x-vertex" id="vertexShader"> uniform sampler2D displaceMap; uniform float maxDisplacement; void main() { originalMain(); float displacement = maxDisplacement * (1. - texture2D(displaceMap, uv).r); vec3 newPosition = position; newPosition.y -= displacement; gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0); } </script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.72.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.js"></script> <script > var DisplaceMaterial = function (param) { THREE.MeshBasicMaterial.call(this); this.type = 'ShaderMaterial'; this.setValues(param); this.uniforms = THREE.UniformsUtils.clone(THREE.ShaderLib.basic.uniforms); this.uniforms.displaceMap = { type: 't', value: param.displaceMap }; this.uniforms.maxDisplacement = { type: 'f', value: param.maxDisplacement || 0 }; var originalShader = THREE.Sh.........完整代码请登录后点击上方下载按钮下载查看
网友评论0