three.js根据不同的图⽚做不同的动画特效科技感⼗⾜
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="/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 = ateElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
var ctx = Context("2d");
实现特效的代码js
ctx.drawImage(image, 0, 0);
ImageData(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() {
ssOrigin = '';
renderer = new THREE.WebGLRenderer({
canvas: ElementById("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 = ry.vertices.length; i < j; i++) {
var particle = ry.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() * ry.vertices.length);
//  var particle1 = ry.vertices[index];
//  var particle2 = ry.ry.vertices.length - index];      //  (particle, Math.random() * 2 + 1, {
//    x: particle2.x,
//    y: particle2.y,
//    ease: Power2.easeInOut
//  });
//  (particle2, Math.random() * 2 + 1, {
//    x: particle1.x,
//    y: particle1.y,
//    ease: Power2.easeInOut
//  });
//  previousTime = a;
// }
camera.position.x = Math.sin(a / 5000) * 100;
// camera.position.x = false;
camera.lookAt(centerVector);
};
init();
</script>
</body>
</html>
在服务器上运⾏时，直接使⽤图⽚就可以，不需要转换成base64⽰例图⽚：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。