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.ShaderLib.basic.vertexShader;

  var vertex = originalShader.replace('void main()', 'void originalMain()');
  vertex = vertex + "\n" + document.getElementById('vertexShader').textContent;

  this.vertexShader = vertex;
  this.fragmentShader = THREE.ShaderLib.basic.fragmentShader;
};
DisplaceMaterial.prototype = Object.create(THREE.MeshBasicMaterial.prototype);
DisplaceMaterial.prototype.constructor = DisplaceMaterial;


var radius = 250;
var r;
var posX = 0.5;
var posY = 0.5;
var mousePosX, mousePosY;

var canvas;

var scene,
camera,
raycastCamera,
renderer,
plane,
material,
sphere,
sphereMaterial,
texture,
fov = 75,
container,
origin;

function setup()
{
  canvas = createCanvas(512, 512, 'p2d');
  noStroke();
}

function draw()
{
  background(255);

  for (r = radiu.........完整代码请登录后点击上方下载按钮下载查看