css3 3d头像,Three.js 3D头像

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var camera, scene, renderer,

l1, l2, l3, l4, l5, l6,

loader, mesh;

init();

animate();

function init() {

var container = document.getElementById('c');

camera = new THREE.PerspectiveCamera(85, 416 / 592, 1, 1000);

camera.position.set(0, -8, 80);

scene = new THREE.Scene();

scene.add(new THREE.AmbientLight(0xffd700));

l1 = new THREE.PointLight(0xffffff, 1, 5000);

scene.add(l1);

l2 = new THREE.PointLight(0xffffff, 1, 5000);

scene.add(l2);

l3 = new THREE.PointLight(0xffffff, 1, 5000);

scene.add(l3);

l4 = new THREE.PointLight(0xffffff, 1, 5000);

scene.add(l4);

l5 = new THREE.PointLight(0xffffff, 1, 5000);

scene.add(l5);

l6 = new THREE.PointLight(0xffffff, 1, 5000);

scene.add(l6);

var PI2 = Math.PI * 2;

var program = function(context) {

context.beginPath();

context.arc(0, 0, 0.4, 0, PI2, true);

context.fill();

}

var sprite = new THREE.Sprite(new THREE.SpriteCanvasMaterial({

color: 0xffffff,

program: program

}));

l1.add(sprite);

var sprite = new THREE.Sprite(new THREE.SpriteCanvasMaterial({

color: 0xffffff,

program: program

}));

l2.add(sprite);

var sprite = new THREE.Sprite(new THREE.SpriteCanvasMaterial({

color: 0xffffff,

program: program

}));

l3.add(sprite);

var sprite = new THREE.Sprite(new THREE.SpriteCanvasMaterial({

color: 0xffffff,

program: program

}));

l4.add(sprite);

var sprite = new THREE.Sprite(new THREE.SpriteCanvasMaterial({

color: 0xffffff,

program: program

}));

l5.add(sprite);

var sprite = new THREE.Sprite(new THREE.SpriteCanvasMaterial({

color: 0xffffff,

program: program

}));

l6.add(sprite);

loader = new THREE.JSONLoader();

loader.load('http://threejs.org/examples/obj/WaltHeadLo.js', function(geometry) {

mesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({

color: 0xffffff,

shading: THREE.SmoothShading,

overdraw: 0.6

}));

scene.add(mesh);

});

renderer = new THREE.CanvasRenderer({

alpha: true

});

renderer.setPixelRatio(window.devicePixelRatio);

renderer.setSize(416, 592);

container.appendChild(renderer.domElement);

//

window.addEventListener('resize', onWindowResize, false);

}

function onWindowResize() {

camera.aspect = 416 / 592;

camera.updateProjectionMatrix();

renderer.setSize(416, 592);

}

//

function animate() {

requestAnimationFrame(animate);

render();

}

function render() {

var time = Date.now() * 0.05;

if (mesh) mesh.rotation.y = 0.01, mesh.rotation.x -= 0.02;

l1.position.x = Math.sin(time * 0.09) * 4;

l1.position.y = Math.cos(time * 0.015) * 3;

l1.position.z = Math.sin(time * 0.03) * 8;

l2.position.x = Math.cos(time * 0.03) * 30;

l2.position.y = Math.sin(time * 0.015) * 40;

l2.position.z = Math.sin(time * 0.017) * 30;

l3.position.x = Math.sin(time * 0.07) * 30;

l3.position.y = Math.cos(time * 0.013) * 40;

l3.position.z = Math.sin(time * 0.025) * 30;

l4.position.x = Math.sin(time * 0.041) * 11;

l4.position.y = Math.cos(time * 0.088) * 11;

l4.position.z = Math.cos(time * 0.086) * 21;

l5.position.x = Math.cos(time * 0.042) * 30;

l5.position.y = Math.sin(time * 0.015) * 40;

l5.position.z = Math.sin(time * 0.017) * 30;

l6.position.x = Math.sin(time * 0.077) * 11;

l6.position.y = Math.cos(time * 0.043) * 55;

l6.position.z = Math.sin(time * 0.025) * 23;

renderer.render(scene, camera);

}