three+webgl实现立体空间数字时间代码-html代码-BFW代码库

three+webgl实现立体空间数字时间代码

代码语言：html

所属分类：其他

代码描述：three+webgl实现立体空间数字时间代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}
canvas {
  width: 100%;
  height: 100%;
  display; block;
}
#player {
  position: absolute;
  bottom: 0;
  right: 0;
}
</style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.96.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script>
</head>

<body >

<!--script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script-->
<script>
  var lineVertShader = `
  #define dig0 !(digit != -1.0 && digit != 1.0 && digit != 4.0)
  #define dig1 !(digit != -1.0 && digit != 1.0 && digit != 2.0 && digit != 3.0 && digit != 7.0)
  #define dig2 !(digit != -1.0 && digit != 5.0 && digit != 6.0)
  #define dig3 !(digit != -1.0 && digit != 0.0 && digit != 1.0 && digit != 7.0)
  #define dig4 !(digit != -1.0 && digit != 1.0 && digit != 3.0 && digit != 4.0 && digit != 5.0 && digit != 7.0 && digit != 9.0)
  #define dig5 !(digit != -1.0 && digit != 2.0)
  #define dig6 !(digit != -1.0 && digit != 1.0 && digit != 4.0 && digit != 7.0)
  #define cond(a) if(int(idx + 0.1) == (a) && 
  #define retVal ){return 1.0;}
  
  uniform float digit;
  attribute float idx;
  varying float vOff;
  varying vec2 vUv;
  
  float isOff(){
    cond(0) dig0 retVal
    else cond(1) dig1 retVal
    else cond(2) dig2 retVal
    else cond(3) dig3 retVal
    else cond(4) dig4 retVal
    else cond(5) dig5 retVal
    else cond(6) dig6 retVal
    
    //return 1.0;
  }

  void main() {
    vOff = isOff();
    vUv = uv;
    vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
    gl_Position = projectionMatrix * mvPosition;
  }
  `;

  var lineFragShader = `
  uniform vec3 diffuse1;
  uniform vec3 diffuse2;
  varying float vOff;
  varying vec2 vUv;
  
  void main() {
    
    if (vOff > 0.5) discard;
    
    gl_FragColor = vec4( mix(diffuse1, diffuse2, vUv.y), 1.0 );
  }
  `;

</script>



  
      <script >
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, 1, 0.1, 1000);
var pos = new THREE.Vector3(0, 0.5, 7);
//camera.position.set(0, 0.5, 7);
var renderer = new THREE.WebGLRenderer({
  antialias: true });

renderer.setClearColor(0x050005);
renderer.setPixelRatio(0.5);
var canvas = renderer.domElement;
document.body.appendChild(canvas);


//var controls = new THREE.OrbitControls(camera, canvas);

// GRID
var division = 20;
var limit = 10;
var grid = new THREE.GridHelper(limit * 2, division, 0x001060, 0x001060);

var moveable = [];
for (let i = 0; i <= division; i++) {
  moveable.push(1, 1, 0, 0); // move horizontal lines only (1 - point is moveable)
}
grid.geometry.addAttribute(
"moveable",
new THREE.BufferAttribute(new Uint8Array(moveable), 1));

grid.material = new THREE.ShaderMaterial({
  uniforms: {
    time: {
      value: 0 },

    limits: {
      value: new THREE.Vector2(-limit, limit) },

    speed: {
      value: 5 } },


  vertexShader: `
    uniform float time;
    uniform vec2 limits;
    uniform float speed;
    
    attribute float moveable;
    
    varying vec3 vColor;
  
    void main() {
      vColor = color;
      float limLen = limits.y - limits.x;
      vec3 pos = position;
      if (floor(moveable + 0.5) > 0.5){ // if a point has "moveable" attribute = 1 
        float dist = speed * time;
        float currPos = mod((pos.z + dist) - limits.x, limLen) + limits.x;
        pos.z = currPos;
      } 
      gl_Position = projectionMatrix * modelViewMatrix * vec4(pos,1.0);
    }
  `,
  fragmentShader: `
    varying vec3 vColor;
  
    void main() {
      gl_FragColor = vec4(vColor, 1.);
    }
  .........完整代码请登录后点击上方下载按钮下载查看