three+underscore实现canvas涂鸦马赛克动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：three+underscore实现canvas涂鸦马赛克动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">


</head>
<body>

    <div id="container"></div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.72.js"></script>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/underscore.js"></script>
    <script>
        // set the scene size
var TAU = Math.PI * 2,
		WIDTH = window.innerWidth,
		HEIGHT = window.innerHeight,
		//center = new THREE.Vector3(WIDTH * 0.5, HEIGHT * 0.5, 0),
		center = new THREE.Vector3(0, 0, 0),
		particleDestination = new THREE.Vector3(0, 0, 200);

// set some camera attributes
var VIEW_ANGLE = 100,
		ASPECT = WIDTH / HEIGHT,
		NEAR = 0.01,
		FAR = 4000;


var spawnRate = 50;

// get the DOM element to attach to
// - assume we've got jQuery to hand
var container = document.querySelector("#container");

// create a WebGL renderer, camera
// and a scene
var renderer = new THREE.WebGLRenderer({preserveDrawingBuffer: true});
renderer.autoClear = true;
var camera =
		new THREE.PerspectiveCamera(
				VIEW_ANGLE,
				ASPECT,
				NEAR,
				FAR);

var scene = new THREE.Scene();

// add the camera to the scene
scene.add(camera);

// the camera starts at 0,0,0
// so pull it back
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 500;
camera.lookAt(new THREE.Vector3(0, 0, 0));
camera.rotation.z = Math.PI

// start the renderer
renderer.setSize(WIDTH, HEIGHT);

// attach the render-supplied DOM element
container.appendChild(renderer.domElement);

// create the sphere's material
var standardMaterial = new THREE.MeshLambertMaterial({
	color: 0xffffff,
	transparent: true,
  //blending: THREE.AdditiveBlending,
	opacity: 0.15,
});

var standardGeometry = new THREE.CylinderGeometry(
		(WIDTH + HEIGHT) * 0.045, // upper radius
		(WIDTH + HEIGHT) * 0.045, // lower radius
		0.01, // height
		4 // segments
);
standardGeometry.applyMatrix( new THREE.Matrix4().makeRotationX( Math.PI / 2 ) );

// create a point light
var pointLight = new THREE.PointLight(0xFFFFFF);

// set its position
pointLight.position.x = 0;
pointLight.position.y = 0;
pointLight.position.z = 500;

// add to the scene
scene.add(pointLight);

// ------------------------------------
// Grouping

var numGroups = 32;
var groups = _.map(new Array(numGroups), function(){return [];});
var groupAngle = TAU / numGroups;
var highlightedGroups = [];

function highlightGroup(groupId, solo){
	var group = groups[groupId];
	if (!group) return groupId;
	var index = highlightedGroups.indexOf(group);
	if (index !== -1) return groupId;
	
	if (solo){
		var otherGroupIds = _.range(numGroups);
		otherGroupIds.splice(groupId, 1);
		do {
			unhighlightGroup(otherGroupIds[0]);
		}	while(otherGroupIds.shift() !== undefined);
	}
	
	highlightedGroups.push(group);
	_.each(group, function(particle){
		particle.material.__color = particle.material.color;
		particle.material.color = new THREE.Color(0xffffff);
	})
	return groupId;
}

function unhighlightGroup(groupId){
	var group = groups[groupId];
	if (!group) return groupId;
	var index = highlightedGroups.indexOf(group);
	if (index === -1) return groupId;
	highlightedGroups.splice(index, 1);
	_.each(group, function(particle){
		if (!particle.material.__color) return;
		particle.material.color = particle.material.__color;
	});
	return groupId;
}

// ------------------------------------

// create object pool
var availableParticles = [];
var activeParticles = [];


// ------------------------------------

function getParticles(quantity, options) {
	quantity = quantity || 1;
	while (availableParticles.length < quantity) {
		availableParticles.push(spawnParticle());
	}
	var newParticles = availableParticles.splice(0, quantity);
	newParticles.forEach(function(p){
		setupParticle(p, options);
		groups[p.groupId].push(p);
		scene.add(p);
	});
	activeParticles = activeParticles.concat(newParticles);
	return newParticles;
}

// ------------------------------------

function setupParticle(particle, options){
	particle = _.extend(particle, options);
	particle.geometry.dynamic = true;

	// cha.........完整代码请登录后点击上方下载按钮下载查看