three+p5实现三维球体线框图交互效果代码-html代码-BFW代码库

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