Three.js 很棒的闺房魔镜动画特效

Magic Mirror！魔镜魔镜，谁是这个世界上最美丽的女人！ 2016年度webgl作品候选。

webgl, mirror

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 13798
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var mainContainer = document.querySelector('#container');

var viewWidth = mainContainer.clientWidth;
var viewHeight = mainContainer.clientHeight;

var renderer = new THREE.WebGLRenderer({
    alpha: true
        //premultipliedAlpha: false
});
renderer.setSize(viewWidth, viewHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setClearColor(0x3d3d38);
renderer.autoClear = false;
//renderer.sortObjects = false;
document.querySelector('#three').appendChild(renderer.domElement);

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(60, viewWidth / viewHeight, 1, 10000);
camera.position.set(1.25, 0, 10);
camera.lookAt(scene.position);
//camera.rotation.z = Math.PI * 0.015;

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

//var grid = new THREE.GridHelper(20, 40, 0xff0000, 0xff0000);
//grid.rotation.x = Math.PI * -0.5;
//scene.add(grid);

var light = new THREE.DirectionalLight(0xffffff, 1.0);
light.position.set(0, 0, 1);
scene.add(light);

var prefab = new THREE.SphereGeometry(0.4, 16, 16);
var prefabCount = 4000;
var geometry = new THREE.BAS.PrefabBufferGeometry(prefab, prefabCount);

geometry.createAttribute('aOffset', 1, function(data, i, count) {
    data[0] = i / count;
});

geometry.createAttribute('aStartPosition', 3);
geometry.createAttribute('aEndPosition', 3);

var data = [];

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

data[0] = THREE.Math.randFloat(1, 10) * (Math.random() > 0.5 ? 1 : -1);
    data[1] = THREE.Math.randFloat(1, 10) * (Math.random() > 0.5 ? 1 : -1);
    data[2] = -40;
    geometry.setPrefabData('aStartPosition', i, data);

data[2] = 40;
    geometry.setPrefabData('aEndPosition', i, data);
}

var axis = new THREE.Vector3();
geometry.createAttribute('aRotation', 4, function(data) {
    THREE.BAS.Utils.randomAxis(axis).toArray(data);
    data[3] = Math.PI * 2 * THREE.Math.randInt(-8, 8);
});

axis.set(0, 0, 1);
geometry.createAttribute('aRotation2', 4, function(data) {
    axis.toArray(data);
    data[3] = Math.PI * 2 * THREE.Math.randInt(1, 2);
});

geometry.createAttribute('aScale', 1, function(data) {
    data[0] = THREE.Math.randFloat(0.1, 4.0);
});

var aOscillation = geometry.createAttribute('aOscillation', 2);
var offset = 0;

for (var i = 0; i < prefabCount; i++) {
    var a = Math.random() * 0.25;

for (var j = 0; j < geometry.prefabVertexCount; j++) {
        var o = Math.random() * 10;

aOscillation.array[offset++] = o;
        aOscillation.array[offset++] = a;
    }
}

var color = new THREE.Color();
var hue, s, l;
geometry.createAttribute('color', 3, function(data, i, count) {
    // modulate the hue
    hue = i / count;
    s = THREE.Math.randFloat(0.0, 1.0);
    l = THREE.Math.randFloat(0.4, 0.6);
    color.setHSL(hue, s, l);
    color.toArray(data);
});

'attribute float aOffset;',
        'attribute vec3 aStartPosition;',
        'attribute vec3 aEndPosition;',
        'attribute vec4 aRotation;',
        'attribute vec4 aRotation2;',
        'attribute float aScale;',
        'attribute vec2 aOscillation;',
        'attribute vec3 aColor1;',
        'attribute vec3 aColor2;'
    ],
    vertexPosition: [
        'float tProgress = mod((uTime + aOffset), uDuration) / uDuration;',
        'transformed *= aScale * tProgress;',

'transformed = rotateVector(quatFromAxisAngle(aRotation.xyz, aRotation.w * tProgress), transformed);',
        'transformed += mix(aStartPosition, aEndPosition, tProgress);',

'transformed = rotateVector(quatFromAxisAngle(aRotation2.xyz, aRotation2.w * tProgress), transformed);'
    ]
});

var stars = new THREE.Mesh(geometry, material);
stars.position.x = 1.5;
stars.position.y = -0.25;
scene.add(stars);

var compWidth = viewWidth * window.devicePixelRatio;
var compHeight = viewHeight * window.devicePixelRatio;

var composer = new THREE.EffectComposer(renderer, new THREE.WebGLRenderTarget(compWidth, compHeight, {
    minFilter: THREE.LinearFilter,
    magFilter: THREE.LinearFilter,
    format: THREE.RGBAFormat,
    stencilBuffer: false
}));

var strength = 1.0; // 0 - x
var radius = 0.0; // 0 - 1
var threshold = 0.1; // 0 - 1
var bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), strength, radius, threshold);

var renderPass = new THREE.RenderPass(scene, camera);
var maskPass = new THREE.ShaderPass({
    uniforms: {
        "tDiffuse": {
            value: null
        },
        "tMask": {
            value: null
        }
    },
    vertexShader: [

"varying vec2 vUv;",

"void main() {",

"vUv = uv;",
        "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",

"}"

].join("\n"),

fragmentShader: [
        "uniform sampler2D tDiffuse;",
        "uniform sampler2D tMask;",

"varying vec2 vUv;",

"void main() {",

"vec4 texel = texture2D( tDiffuse, vUv );",
        "float alpha = texture2D( tMask, vUv ).r;",
        //"float alpha = 1.0;",
        "gl_FragColor = texel * alpha;",

"}"

].join("\n")
});

var loader = new THREE.TextureLoader();
loader.crossOrigin = 'anonymous';
loader.load('//s3-us-west-2.amazonaws.com/s.cdpn.io/175711/globe_mask3.png', function(t) {
    console.log('loaded');
    t.minFilter = THREE.LinearFilter;
    t.magFilter = THREE.LinearFilter;
    maskPass.uniforms.tMask.value = t;
});

composer.addPass(renderPass);
composer.addPass(bloomPass);
composer.addPass(maskPass);

maskPass.renderToScreen = true;

var img = document.querySelector('#container img');

function update() {
    img.style.visibility = 'visible';
    material.uniforms.uTime.value += (1 / 1000);
    material.uniforms.uOscTime.value += (1 / 10);
    controls && controls.update();
}

function render() {
    composer.render();
}

function tick() {

update();
    render();

requestAnimationFrame(tick);
}

tick();

编译

CSS

HTML

Magic Mirror！魔镜魔镜，谁是这个世界上最美丽的女人！ 2016年度webgl作品候选。

webgl, mirror

编辑器支持Emmet

快捷键

Magic Mirror！魔镜魔镜，谁是这个世界上最美丽的女人！ 2016年度webgl作品候选。

webgl, mirror

很棒的可交互3D景观浏览动画（基于Three.js构建） - 月夜

WebGL Three.js带图像变形动画特效的幻灯片

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：