html5物体贴图,HTML5/Three.js带贴图三角形贴面的3D球体

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var renderer, scene, camera, allTriangles;

var animations = [Back.easeIn, Back.easeOut, Bounce.easeIn, Bounce.easeOut, Linear.ease, Elastic.easeOut];

var ww = window.innerWidth,

wh = window.innerHeight;

function Ctrl() {

this.opacity = 1;

this.wireframe = false;

this.polygons = 15;

this.rotation = true;

this.animation = 1;

this.duration = 3;

this.direction = 2;

this.render = function() {

createTriangles();

};

}

function initGui() {

ctrl = new Ctrl,

gui = new dat.GUI;

gui.add(ctrl, "opacity", .1, 1);

gui.add(ctrl, "wireframe");

gui.add(ctrl, "rotation");

gui.add(ctrl, "polygons", 1, 30);

gui.add(ctrl, "animation", {

BackIn: 0,

BackOut: 1,

BounceIn: 2,

BounceOut: 3,

Linear: 4,

Elastic: 5

});

gui.add(ctrl, "direction", {

topBottom: 0,

bottomTop: 1,

middle: 2

});

gui.add(ctrl, "duration", .1, 10);

gui.add(ctrl, "render");

}

function init() {

renderer = new THREE.WebGLRenderer({

canvas: document.getElementById('scene')

});

renderer.setSize(ww, wh);

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(50, ww / wh, 0.1, 10000);

camera.position.set(0, 0, 800);

scene.add(camera);

createTriangles();

}

var createTriangles = function() {

if (allTriangles) {

scene.remove(allTriangles);

}

allTriangles = new THREE.Object3D();

scene.add(allTriangles);

var geometry = new THREE.SphereGeometry(150, ctrl.polygons, ctrl.polygons);

for (var i = 0, j = geometry.faces.length; i < j; i++) {

//Get one face from the sphere

var whichTriangle = i;

if (ctrl.direction == 1) {

whichTriangle = (j - 1) - i;

} else if (ctrl.direction == 2) {

whichTriangle = i % 2 === 0 ? i : j - i;

}

var face = geometry.faces[whichTriangle];

//Create a geometry for that face

var geometry2 = new THREE.Geometry();

//Add the vertices of the face in the geometry

geometry2.vertices = face.vertexNormals;

geometry2.faceVertexUvs[0].push([new THREE.Vector2(0.0, 0.0),

new THREE.Vector2(0.0, 1.0),

new THREE.Vector2(1.0, 1.0)

]);

//Set a new face

geometry2.faces.push(new THREE.Face3(0, 1, 2));

//Create a custom material

var material = new THREE.MeshBasicMaterial({

side: THREE.DoubleSide,

wireframe: ctrl.wireframe,

transparent: true,

opacity: ctrl.opacity,

map: THREE.ImageUtils.loadTexture('/uploads/160701/pattern-4.png')

});

//Create a Mesh object

var triangle = new THREE.Mesh(geometry2, material);

var randomColor = Math.random();

triangle.material.color = new THREE.Color(randomColor, randomColor, randomColor);

allTriangles.add(triangle);

triangle.tl = new TimelineMax({

repeat: -1,

repeatDelay: (j - i) / (j * 4),

delay: i / (ctrl.polygons * 7),

yoyo: true

});

triangle.tl

.to(triangle.scale, ctrl.duration, {

x: 300,

y: 300,

z: 300,

ease: animations[ctrl.animation]

})

}

render();

};

var render = function() {

requestAnimationFrame(render);

if (ctrl.rotation) {

allTriangles.rotation.y += 0.01;

}

renderer.render(scene, camera);

};

initGui();

init();