img.js里保存的是一个图片base64格式的代码
下面的代码可以根据提供的图片不同，做不同的动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height">
<title>动画</title>
<style>
body{margin: 0;}
</style>
</head>
<body>
<canvas id="map"></canvas>
<script type="text/javascript" src="https://cdn.staticfile.org/three.js/r83/three.js"></script>
<script type="text/javascript" src="js/img.js"></script>
<script>
var renderer, scene, camera, ww, wh, particles;
ww = window.innerWidth,
wh = window.innerHeight;
var centerVector = new THREE.Vector3(0, 0, 0);
var previousTime = 0;
var getImageData = function(image) {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0);
return ctx.getImageData(0, 0, image.width, image.height);
}
var drawTheMap = function() {
var geometry = new THREE.Geometry();
var material = new THREE.PointsMaterial({
size: 3,
color: 0x333333,
sizeAttenuation: false
});
for (var y = 0, y2 = imagedata.height; y < y2; y += 2) {
for (var x = 0, x2 = imagedata.width; x < x2; x += 2) {
if (imagedata.data[(x * 4 + y * 4 * imagedata.width) + 3] > 128) {
var vertex = new THREE.Vector3();
vertex.x = Math.random() * 1000 - 500;
vertex.y = Math.random() * 1000 - 500;
vertex.z = -Math.random() * 500;
vertex.destination = {
x: x - imagedata.width / 2,
y: -y + imagedata.height / 2,
z: 0
};
vertex.speed = Math.random() / 200 + 0.015;
geometry.vertices.push(vertex);
}
}
}
particles = new THREE.Points(geometry, material);
scene.add(particles);
requestAnimationFrame(render);
};
var init = function() {
THREE.ImageUtils.crossOrigin = '';
renderer = new THREE.WebGLRenderer({
canvas: document.getElementById("map"),
antialias: true,
alpha:true
});
renderer.setSize(ww, wh);
// renderer.setClearColor(0x181818);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, ww / wh, 0.1, 10000);
camera.position.set(-100, 0, 220);
camera.lookAt(centerVector);
scene.add(camera);
texture = THREE.ImageUtils.loadTexture(imgBase64, undefined, function() {
imagedata = getImageData(texture.image);
drawTheMap();
});
window.addEventListener('resize', onResize, false);
};
var onResize = function() {
ww = window.innerWidth;
wh = window.innerHeight;
renderer.setSize(ww, wh);
camera.aspect = ww / wh;
camera.updateProjectionMatrix();
};
var render = function(a) {
requestAnimationFrame(render);
for (var i = 0, j = particles.geometry.vertices.length; i < j; i++) {
var particle = particles.geometry.vertices[i];
particle.x += (particle.destination.x - particle.x) * particle.speed;
particle.y += (particle.destination.y - particle.y) * particle.speed;
particle.z += (particle.destination.z - particle.z) * particle.speed;
}
// if (a - previousTime > 100) {
// var index = Math.floor(Math.random() * particles.geometry.vertices.length);
// var particle1 = particles.geometry.vertices[index];
// var particle2 = particles.geometry.vertices[particles.geometry.vertices.length - index];
// TweenMax.to(particle, Math.random() * 2 + 1, {
// x: particle2.x,
// y: particle2.y,
// ease: Power2.easeInOut
// });
// TweenMax.to(particle2, Math.random() * 2 + 1, {
// x: particle1.x,
// y: particle1.y,
// ease: Power2.easeInOut
// });
// previousTime = a;
// }
particles.geometry.verticesNeedUpdate = true;
camera.position.x = Math.sin(a / 5000) * 100;
// camera.position.x = false;
camera.lookAt(centerVector);
renderer.render(scene, camera);
};
init();
</script>
</body>
</html>在服务器上运行时，直接使用图片就可以，不需要转换成base64
示例图片：
