背景网格

• 示例
• CSS
• JS

示例

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;//________________________ Scenevar scene = new THREE.Scene();//________________________ Cameravar 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);//________________________ Renderervar 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 );//________________________ Resizewindow.onresize = function(){canvas_height = window.innerHeight;canvas_width = window.innerWidth;camera.aspect = canvas_width / canvas_height;camera.updateProjectionMatrix();renderer.setSize( canvas_width, canvas_height );
}//________________________ Lightvar 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 -= .5plane.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 );//________________________ Rendervar 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);}());

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！