canvas粒子球

下载代码

html

css

分享到微信朋友圈

html

css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

body {
  margin: 0;
  background: #000;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  cursor: -webkit-grab;
  cursor: -moz-grab;
}
canvas:active {
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.collection {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
}
.collection a {
  display: block;
  padding: 5px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  text-decoration: none;
  font: 700 12px Consolas, system, monospace;
  transition: all 250ms linear;
}
.collection a:hover {
  background: #fff;
  color: #000;
}
.collection .prev {
  text-align: left;
  float: left;
}
.collection .next {
  text-align: right;
  float: right;
}

JavaScript

var controls;
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var innerColor = 0xff0000,
    outerColor = 0xff9900;
var innerSize = 55,
    outerSize = 60;

var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setClearColor( 0x000000, 0 ); // background

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// controls = new THREE.TrackballControls( camera );
// controls.noPan = true;
// controls.minDistance = 120;
// controls.maxDistance = 650;

camera.position.z = -400;
// Mesh
var group = new THREE.Group();
scene.add(group);

// Lights
var light = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light );

var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
directionalLight.position.set( 0, 128, 128 );
scene.add( directionalLight );

// Sphere Wireframe Inner
var sphereWireframeInner = new THREE.Mesh(
  new THREE.IcosahedronGeometry( innerSize, 2 ),
  new THREE.MeshLambertMaterial({ 
    color: innerColor,
    ambient: innerColor,
    wireframe: true,
    transparent: true, 
    //alphaMap: THREE.ImageUtils.loadTexture( 'javascripts/alphamap.jpg' ),
    shininess: 0
  })
);
scene.add(sphereWireframeInner);

// Sphere Wireframe Outer
var sphereWireframeOuter = new THREE.Mesh(
  new THREE.IcosahedronGeometry( outerSize, 3 ),
  new THREE.MeshLambertMaterial({ 
    color: outerColor,
    ambient: outerColor,
    wireframe: true,
    transparent: true,
    //alphaMap: THREE.ImageUtils.loadTexture( 'javascripts/alphamap.jpg' ),
    shininess: 0 
  })
);
scene.add(sphereWireframeOuter);

// Sphere Glass Inner
var sphereGlassInner = new THREE.Mesh(
  new THREE.SphereGeometry( innerSize, 32, 32 ),
  new THREE.MeshPhongMaterial({ 
    color: innerColor,
    ambient: innerColor,
    transparent: true,
    shininess: 25,
    //alphaMap: THREE.ImageUtils.loadTexture( 'javascripts/twirlalphamap.jpg' ),
    opacity: 0.3,
  })
);
scene.add(sphereGlassInner);

// Sphere Glass Outer
var sphereGlassOuter = new THREE.Mesh(
  new THREE.SphereGeometry( outerSize, 32, 32 ),
  new THREE.MeshPhongMaterial({ 
    color: outerColor,
    ambient: outerColor,
    transparent: true,
    shininess: 25,
    //alphaMap: THREE.ImageUtils.loadTexture( 'javascripts/twirlalphamap.jpg' ),
    opacity: 0.3,
  })
);
//scene.add(sphereGlassOuter);

// Particles Outer
var geometry = new THREE.Geometry();
for (i = 0; i < 35000; i++) {
  
  var x = -1 + Math.random() * 2;
  var y = -1 + Math.random() * 2;
  var z = -1 + Math.random() * 2;
  var d = 1 / Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2) + Math.pow(z, 2));
  x *= d;
  y *= d;
  z *= d;
   
  var vertex = new THREE.Vector3(
         x * outerSize,
         y * outerSize,
         z * outerSize
  );
   
  geometry.vertices.push(vertex);

}

var particlesOuter = new THREE.PointCloud(geometry, new THREE.PointCloudMaterial({
  size: 0.1,
  color: outerColor,
  //map: THREE.ImageUtils.loadTexture( 'javascripts/particletextureshaded.png' ),
  transparent: true,
  })
);
scene.add(particlesOuter);

// Particles Inner
var geometry = new THREE.Geometry();
for (i = 0; i < 35000; i++) {
  
  var x = -1 + Math.random() * 2;
  var y = -1 + Math.random() * 2;
  var z = -1 + Math.random() * 2;
  var d = 1 / Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2) + Math.pow(z, 2));
  x *= d;
  y *= d;
  z *= d;
   
  var vertex = new THREE.Vector3(
         x * outerSize,
         y * outerSize,
         z * outerSize
  );
   
  geometry.vertices.push(vertex);

}

var particlesInner = new THREE.PointCloud(geometry, new THREE.PointCloudMaterial({
  size: 0.1,
  color: innerColor,
  //map: THREE.ImageUtils.loadTexture( 'javascripts/particletextureshaded.png' ),
  transparent: true,
  })
);
scene.add(particlesInner);

// Starfield
var geometry = new THREE.Geometry();
for (i = 0; i < 5000; i++) {
  var vertex = new THREE.Vector3();
  vertex.x = Math.random()*2000-1000;
  vertex.y = Math.random()*2000-1000;
  vertex.z = Math.random()*2000-1000;
  geometry.vertices.push(vertex);
}
var starField = new THREE.PointCloud(geometry, new THREE.PointCloudMaterial({
  size: 2,
  color: 0xffff99
  })
);
scene.add(starField);

camera.position.z = -110;
//camera.position.x = mouseX * 0.05;
//camera.position.y = -mouseY * 0.05;
//camera.lookAt(scene.position);

var time = new THREE.Clock();

var render = function () {  
  //camera.position.x = mouseX * 0.05;
  //camera.position.y = -mouseY * 0.05;
  camera.lookAt(scene.position);

sphereWireframeInner.rotation.x += 0.002;
  sphereWireframeInner.rotation.z += 0.002;
  
  sphereWireframeOuter.rotation.x += 0.001;
  sphereWireframeOuter.rotation.z += 0.001;
  
  sphereGlassInner.rotation.y += 0.005;
  sphereGlassInner.rotation.z += 0.005;

sphereGlassOuter.rotation.y += 0.01;
  sphereGlassOuter.rotation.z += 0.01;

particlesOuter.rotation.y += 0.0005;
  particlesInner.rotation.y -= 0.002;
  
  starField.rotation.y -= 0.002;

var innerShift = Math.abs(Math.cos(( (time.getElapsedTime()+2.5) / 20)));
  var outerShift = Math.abs(Math.cos(( (time.getElapsedTime()+5) / 10)));

starField.material.color.setHSL(Math.abs(Math.cos((time.getElapsedTime() / 10))), 1, 0.5);

sphereWireframeOuter.material.color.setHSL(0, 1, outerShift);
  sphereGlassOuter.material.color.setHSL(0, 1, outerShift);
  particlesOuter.material.color.setHSL(0, 1, outerShift);

sphereWireframeInner.material.color.setHSL(0.08, 1, innerShift);
  particlesInner.material.color.setHSL(0.08, 1, innerShift);
  sphereGlassInner.material.color.setHSL(0.08, 1, innerShift);

sphereWireframeInner.material.opacity = Math.abs(Math.cos((time.getElapsedTime()+0.5)/0.9)*0.5);
  sphereWireframeOuter.material.opacity = Math.abs(Math.cos(time.getElapsedTime()/0.9)*0.5);

directionalLight.position.x = Math.cos(time.getElapsedTime()/0.5)*128;
  directionalLight.position.y = Math.cos(time.getElapsedTime()/0.5)*128;
  directionalLight.position.z = Math.sin(time.getElapsedTime()/0.5)*128;

// controls.update();

renderer.render(scene, camera);
  requestAnimationFrame(render);  
};

render();

// Mouse and resize events
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
window.addEventListener('resize', onWindowResize, false);

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

function onDocumentMouseMove( event ) {
  mouseX = event.clientX - window.innerWidth/2;
  mouseY = event.clientY - window.innerHeight/2;
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg