html3d万花筒,HTML5/WebGL交互式3D万花筒

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var contianer, renderer, camera, scene;

var windowWidth = window.innerWidth;

var windowHeight = window.innerHeight;

var cube;

var cubes = [];

var center;

var bufferScene = new THREE.Scene();

var bufferTexture = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, {

minFilter: THREE.LinearFilter,

magFilter: THREE.NearestFilter

});

var triangleGeometry

var triangle;

var clock = new THREE.Clock();

var delta = 0;

var m;

var size;

var randomness = 0;

var rnd = 1;

init()

animate();

function init() {

container = document.createElement('div');

document.body.appendChild(container);

camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, .1, 10000);

scene = new THREE.Scene();

renderer = new THREE.WebGLRenderer({

antialias: true

});

renderer.setSize(window.innerWidth, window.innerHeight);

container.appendChild(renderer.domElement);

//geometry

size = 100

var rot = Math.PI / 3

m = Math.sqrt(size * size - Math.pow(size / 2, 2))

var r = size / 2 * Math.sin(Math.PI / 3)

triangle = new THREE.Shape([

new THREE.Vector2(0, 0),

new THREE.Vector2(size / 2, (size / 2) / (1 / Math.tan(rot))),

new THREE.Vector2(-size / 2, (size / 2) / (1 / Math.tan(rot)))

]);

triangleGeometry = new THREE.ShapeGeometry(triangle);

triangleGeometry.computeFaceNormals();

triangleGeometry.faceVertexUvs[0][0][0] = new THREE.Vector2(0, 0);

triangleGeometry.faceVertexUvs[0][0][1] = new THREE.Vector2(0, 1);

triangleGeometry.faceVertexUvs[0][0][2] = new THREE.Vector2(1, 1);

triangleMirrored = new THREE.ShapeGeometry(triangle);

triangleMirrored.computeFaceNormals();

triangleMirrored.faceVertexUvs[0][0][2] = new THREE.Vector2(0, 0);

triangleMirrored.faceVertexUvs[0][0][1] = new THREE.Vector2(0, 1);

triangleMirrored.faceVertexUvs[0][0][0] = new THREE.Vector2(1, 1);

var kaleidoscope = new THREE.Object3D();

var sides = 6

for (var i = 0; i < sides + 1; i++) {

if (i % 2 == 0) {

var mesh = new THREE.Mesh(triangleGeometry, new THREE.MeshBasicMaterial({

map: bufferTexture.texture,

side: THREE.DoubleSide

}));

} else {

var mesh = new THREE.Mesh(triangleMirrored, new THREE.MeshBasicMaterial({

map: bufferTexture.texture,

side: THREE.DoubleSide

}));

}

kaleidoscope.add(mesh)

var rot = Math.PI / 3 * -i

var x = size / 2 * Math.cos(rot) * i;

var y = size / 2 * Math.sin(rot) * -i;

mesh.rotation.set(0, 0, rot);

}

scene.add(kaleidoscope)

// kaleidoscope.rotation.set(0,0,-Math.PI/6)

var allElems = new THREE.Object3D();

allElems.add(kaleidoscope)

var copy = kaleidoscope.clone()

copy.position.y = m;

copy.position.x = size * 1.5

allElems.add(copy)

var copy = kaleidoscope.clone()

copy.position.y = m * -1;

copy.position.x = size * 1.5

allElems.add(copy)

var copy = kaleidoscope.clone()

copy.position.y = m * -1;

copy.position.x = size * -1.5

allElems.add(copy)

var copy = kaleidoscope.clone()

copy.position.y = m * 1;

copy.position.x = size * -1.5

allElems.add(copy)

scene.add(allElems)

allElems.rotation.set(0, 0, Math.PI / 6)

camera.position.set(0, 0, 50)

for (var i = 0; i < 500; i++) {

var geometry = new THREE.BoxGeometry(Math.random() * 5, Math.random() * 5, Math.random() * 5);

var rand = Math.random()

var material = new THREE.MeshStandardMaterial({

color: 0xff0000,

metalness: rand

});

material.color.setHex(random(i) * 0xffffff)

material.depthTest = false

cube = new THREE.Mesh(geometry, material);

bufferScene.add(cube)

cube.position.set((Math.random() - .5) * size, (Math.random() - .5) * size, (Math.random() - .5) * size)

cube.rotation.set(0, Math.random() * Math.PI, Math.random() * Math.PI)

cubes.push(cube)

}

//light

var ambient = new THREE.AmbientLight(0xffffff);

bufferScene.add(ambient);

light = new THREE.SpotLight(0xffffff, 1, 0, Math.PI / 2);

light.position.set(600, 1500, 1000);

light.target.position.set(0, 0, 0);

bufferScene.add(light)

controls = new THREE.OrbitControls(camera, renderer.domElement);

controls.maxDistance = 70;

controls.minDistance = 45

controls.enableDamping = true;

controls.enablePan = false;

controls.enableRotate = false

controls.dampingFactor = .999;

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

window.addEventListener('mousedown', randomize);

}

function randomize() {

randomness = Math.floor(time);

rnd = (Math.random() - .5) * 2;

}

function moveContent(time) {

var t = time * .2

delta = clock.getDelta()

for (var i = 0; i < cubes.length; i++) {

if (randomness % 2 == 0) {

cubes[i].position.x = rnd * random(i + randomness) * Math.sin(t + i) * size + .1;

}

if (randomness % 2 == 1) {

cubes[i].position.y = random(i * randomness) * Math.cos(t + i) * size;

}

cubes[i].rotation.set(random(i + randomness) + t, random(i + randomness) + t, random(i + randomness) + t, random(i + randomness) + t);

cubes[i].material.color.offsetHSL(delta / 10, 0, 0)

}

}

var time = 0;

function animate() {

time = performance.now() * 0.001;

moveContent(time);

renderer.render(bufferScene, camera, bufferTexture);

controls.update()

requestAnimationFrame(animate);

renderer.render(scene, camera);

}

function random(seed) {

var x = Math.sin(seed) * 10000;

return x - Math.floor(x);

}

radians = function(degrees) {

return degrees * Math.PI / 180;

};

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;

camera.updateProjectionMatrix();

renderer.setSize(window.innerWidth, window.innerHeight);

}