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

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

代码语言：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 {
                        unhig.........完整代码请登录后点击上方下载按钮下载查看