背景网格（background grid）

示例

CSS

*{
  margin:0;
  padding:0;
}

html,body{
  width:100%;
  height:100%;
}

body{
  background:#222;
  
  &:after{
    content:'';
    display:block;
    width:100%;
    height:100%;
   position:absolute;
    top:0;
    left:0;
    box-shadow:inset 0 0 50px 100px #fff;
  }
}

JS

(function(){

  // Check of point is in radius
function pointInCircle(point,target, radius) {
  var distsq = (point.x - target.x) * (point.x - target.x) + (point.y - target.y) * (point.y - target.y) + (point.z - target.z) * (point.z - target.z);
  // returns bool , distance to target origin 
  return [distsq <= radius * radius * radius,distsq];
}

function onDocumentMouseMove( event ) {
	event.preventDefault();
	mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
	mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
  
	raycaster.setFromCamera( mouse, camera );
    var intersects = raycaster.intersectObject( plane );

    if(intersects[0] != undefined){
		å.mouse = intersects[0].point;
	}
    
}
//________________________ Video



//________________________

var mouse = {
  x : window.innerWidth/2,
  y : window.innerHeight/2
}

var å = {
  mouse : {
    x : mouse.x,
    y : mouse.y,
    z : 0
  }
}


  var main_color = 0xffffff;
var canvas_height = window.innerHeight;
var canvas_width = window.innerWidth;

var raycaster = new THREE.Raycaster();

var controls;


//________________________ Scene

var scene = new THREE.Scene();

//________________________ Camera

var camera = new THREE.PerspectiveCamera( 125, canvas_width/canvas_height, 0.1, 1000 );

  camera.position.set(0,0,200);
  camera.lookAt(new THREE.Vector3(0,0,0));
scene.add(camera);


//________________________ Renderer

var renderer = new THREE.WebGLRenderer({ alpha: true,antialias: true });
    renderer.setSize( canvas_width, canvas_height );
    renderer.domElement.style.position = 'fixed';
    renderer.domElement.style.zIndex = '-1';
    renderer.domElement.style.top = '0';
    renderer.setClearColor(0x222222,1);

    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    document.body.appendChild( renderer.domElement );
    document.addEventListener( 'mousemove', onDocumentMouseMove, false );


//________________________ Resize


window.onresize = function(){
  canvas_height = window.innerHeight;
  canvas_width = window.innerWidth;
  camera.aspect = canvas_width / canvas_height;
  camera.updateProjectionMatrix();
  renderer.setSize( canvas_width, canvas_height );
}

//________________________ Light

var spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set( 0,100, 1000 );
    spotLight.intensity = 1;
    spotLight.castShadow = true;
	spotLight.shadowDarkness = 0.2;
    spotLight.shadowMapWidth = canvas_width;
	spotLight.shadowMapHeight = canvas_height;
	//spotLight.exponent = 5;

	var d = 7000;
	
	spotLight.shadowCameraLeft = -d;
	spotLight.shadowCameraRight = d;
	spotLight.shadowCameraTop = d ;
	spotLight.shadowCameraBottom = -d;
	spotLight.shadowCameraNear = 2;
	spotLight.shadowCameraFar = 2000;
    scene.add(spotLight);

//________________________ Plane 

var planeResolution = {
	x  : 32 * (canvas_width * .001),
	y : 32 * (canvas_height * .001)
}
var planeGeometry = new THREE.PlaneGeometry(canvas_width ,canvas_height,planeResolution.x,planeResolution.y);
var planeMaterial = new THREE.MeshLambertMaterial({
  color : 0xffffff,
  side : THREE.DoubleSide,
  transparent : true,
  wireframeLinewidth : 1,
  wireframeLinejoin : 'miter' ,
  wireframe :true,
  opacity: 1,
});


var plane = new THREE.Mesh(planeGeometry,planeMaterial);
    plane.position.z -= .5
    plane.castShadow = true;

var planeHideGeometry = new THREE.PlaneGeometry(canvas_width *32,canvas_height * 3,1,1);
var plane_to_hide = new THREE.Mesh(planeHideGeometry,new THREE.MeshBasicMaterial({
	color : 0xffffff
}));
	
    plane_to_hide.receiveShadow = true;
    scene.add(plane_to_hide);


var hue = 0;
var direction = -1;
var speed = 0.5;
plane.update = function(time){

if(hue>240 || hue < 0){
    direction *= (-1);
  }  
  hue += 1 * speed * direction;
  this.material.color = new THREE.Color('hsl('+Math.abs(hue)+',100%,50%)');
  this.material.color = new THREE.Color('hsl('+Math.abs(hue)+',100%,50%)');
  this.geometry.vertices.forEach(function(p,index){
      var checker = pointInCircle(p,{
          x : å.mouse.x,
          y : å.mouse.y,
          z : 0

      }, 20);

      if(checker[0]){
        if( p.z < 20){
          p.z += .1;
        }
      }
 
      else{
        if(p.z > 0){
          p.z -= .75;
        }
      }
    
  });
  this.geometry.verticesNeedUpdate = true;
}
scene.add(plane);
var plane_extra = plane.clone();
	plane_extra.material = new THREE.MeshPhongMaterial({
		color :0x000000,
		transparent:true,
		opacity: .2,
		shininess : 1,
		shading: THREE.FlatShading
	});
	plane_extra.receiveShadow = true;

	plane_extra.update = plane.update;
	scene.add(plane_extra);

//________________________
var mouse_helper = new THREE.Mesh(
	new THREE.PlaneBufferGeometry( 2000, 2000, 8, 8 ),
	new THREE.MeshBasicMaterial({ 
     color: 0x000000
   })
);
mouse_helper.visible = false;
scene.add( mouse_helper );

//________________________ Render

var time = 0;
var render = function (time) { 
  requestAnimationFrame( render ); 
  animation(time);
  renderer.render(scene, camera);
};

//________________________ Animation
function animation(time){
  
  // scene.rotation.y  -= .0005;
      plane.update(time);
      plane_extra.update(time);
};
//________________________ START
render(time);

}());

更多有趣示例 尽在https://xhz.bos.xyz