three.js镜面特效（反射材料）示例

mirror ( reflective material ) example in THREE.js

webgl, mirror, material

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

THREE.ShaderLib['mirror'] = {
    uniforms: {
        "mirrorColor": {
            value: new THREE.Color(0x7F7F7F)
        },
        "mirrorSampler": {
            value: null
        },
        "textureMatrix": {
            value: new THREE.Matrix4()
        }
    },
    vertexShader: [
        "uniform mat4 textureMatrix;",
        "varying vec4 mirrorCoord;",
        "void main() {",
        "vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
        "vec4 worldPosition = modelMatrix * vec4( position, 1.0 );",
        "mirrorCoord = textureMatrix * worldPosition;",
        "gl_Position = projectionMatrix * mvPosition;",
        "}"
    ].join("\n"),
    fragmentShader: [
        "uniform vec3 mirrorColor;",
        "uniform sampler2D mirrorSampler;",
        "varying vec4 mirrorCoord;",
        "float blendOverlay(float base, float blend) {",
        "return( base < 0.5 ? ( 2.0 * base * blend ) : (1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );",
        "}",
        "void main() {",
        "vec4 color = texture2DProj(mirrorSampler, mirrorCoord);",
        "color = vec4(blendOverlay(mirrorColor.r, color.r), blendOverlay(mirrorColor.g, color.g), blendOverlay(mirrorColor.b, color.b), 1.0);",
        "gl_FragColor = color;",
        "}"
    ].join("\n")
};
THREE.Mirror = function(renderer, camera, options) {
    THREE.Object3D.call(this);
    this.name = 'mirror_' + this.id;
    options = options || {};
    this.matrixNeedsUpdate = true;
    var width = options.textureWidth !== undefined ? options.textureWidth : 512;
    var height = options.textureHeight !== undefined ? options.textureHeight : 512;
    this.clipBias = options.clipBias !== undefined ? options.clipBias : 0.0;
    var mirrorColor = options.color !== undefined ? new THREE.Color(options.color) : new THREE.Color(0x7F7F7F);
    this.renderer = renderer;
    this.mirrorPlane = new THREE.Plane();
    this.normal = new THREE.Vector3(0, 0, 1);
    this.mirrorWorldPosition = new THREE.Vector3();
    this.cameraWorldPosition = new THREE.Vector3();
    this.rotationMatrix = new THREE.Matrix4();
    this.lookAtPosition = new THREE.Vector3(0, 0, -1);
    this.clipPlane = new THREE.Vector4();
    var debugMode = options.debugMode !== undefined ? options.debugMode : false;
    if (debugMode) {
        var arrow = new THREE.ArrowHelper(new THREE.Vector3(0, 0, 1), new THREE.Vector3(0, 0, 0), 10, 0xffff80);
        var planeGeometry = new THREE.Geometry();
        planeGeometry.vertices.push(new THREE.Vector3(-10, -10, 0));
        planeGeometry.vertices.push(new THREE.Vector3(10, -10, 0));
        planeGeometry.vertices.push(new THREE.Vector3(10, 10, 0));
        planeGeometry.vertices.push(new THREE.Vector3(-10, 10, 0));
        planeGeometry.vertices.push(planeGeometry.vertices[0]);
        var plane = new THREE.Line(planeGeometry, new THREE.LineBasicMaterial({
            color: 0xffff80
        }));
        this.add(arrow);
        this.add(plane);
    }
    if (camera instanceof THREE.PerspectiveCamera) {
        this.camera = camera;
    } else {
        this.camera = new THREE.PerspectiveCamera();
    }
    this.textureMatrix = new THREE.Matrix4();
    this.mirrorCamera = this.camera.clone();
    this.mirrorCamera.matrixAutoUpdate = true;
    var parameters = {
        minFilter: THREE.LinearFilter,
        magFilter: THREE.LinearFilter,
        format: THREE.RGBFormat,
        stencilBuffer: false
    };
    this.renderTarget = new THREE.WebGLRenderTarget(width, height, parameters);
    this.renderTarget2 = new THREE.WebGLRenderTarget(width, height, parameters);
    var mirrorShader = THREE.ShaderLib["mirror"];
    var mirrorUniforms = THREE.UniformsUtils.clone(mirrorShader.uniforms);
    this.material = new THREE.ShaderMaterial({
        fragmentShader: mirrorShader.fragmentShader,
        vertexShader: mirrorShader.vertexShader,
        uniforms: mirrorUniforms
    });
    this.material.uniforms.mirrorSampler.value = this.renderTarget.texture;
    this.material.uniforms.mirrorColor.value = mirrorColor;
    this.material.uniforms.textureMatrix.value = this.textureMatrix;
    if (!THREE.Math.isPowerOfTwo(width) || !THREE.Math.isPowerOfTwo(height)) {
        this.renderTarget.texture.generateMipmaps = false;
        this.renderTarget2.texture.generateMipmaps = false;
    }
    this.updateTextureMatrix();
    this.render();
};
THREE.Mirror.prototype = Object.create(THREE.Object3D.prototype);
THREE.Mirror.prototype.constructor = THREE.Mirror;
THREE.Mirror.prototype.renderWithMirror = function(otherMirror) {
    this.updateTextureMatrix();
    this.matrixNeedsUpdate = false;
    var tempCamera = otherMirror.camera;
    otherMirror.camera = this.mirrorCamera;
    otherMirror.renderTemp();
    otherMirror.material.uniforms.mirrorSampler.value = otherMirror.renderTarget2.texture;
    this.render();
    this.matrixNeedsUpdate = true;
    otherMirror.material.uniforms.mirrorSampler.value = otherMirror.renderTarget.texture;
    otherMirror.camera = tempCamera;
    otherMirror.updateTextureMatrix();
};
THREE.Mirror.prototype.updateTextureMatrix = function() {
    this.updateMatrixWorld();
    this.camera.updateMatrixWorld();
    this.mirrorWorldPosition.setFromMatrixPosition(this.matrixWorld);
    this.cameraWorldPosition.setFromMatrixPosition(this.camera.matrixWorld);
    this.rotationMatrix.extractRotation(this.matrixWorld);
    this.normal.set(0, 0, 1);
    this.normal.applyMatrix4(this.rotationMatrix);
    var view = this.mirrorWorldPosition.clone().sub(this.cameraWorldPosition);
    view.reflect(this.normal).negate();
    view.add(this.mirrorWorldPosition);
    this.rotationMatrix.extractRotation(this.camera.matrixWorld);
    this.lookAtPosition.set(0, 0, -1);
    this.lookAtPosition.applyMatrix4(this.rotationMatrix);
    this.lookAtPosition.add(this.cameraWorldPosition);
    var target = this.mirrorWorldPosition.clone().sub(this.lookAtPosition);
    target.reflect(this.normal).negate();
    target.add(this.mirrorWorldPosition);
    this.up.set(0, -1, 0);
    this.up.applyMatrix4(this.rotationMatrix);
    this.up.reflect(this.normal).negate();
    this.mirrorCamera.position.copy(view);
    this.mirrorCamera.up = this.up;
    this.mirrorCamera.lookAt(target);
    this.mirrorCamera.updateProjectionMatrix();
    this.mirrorCamera.updateMatrixWorld();
    this.mirrorCamera.matrixWorldInverse.getInverse(this.mirrorCamera.matrixWorld);
    this.textureMatrix.set(0.5, 0.0, 0.0, 0.5,
        0.0, 0.5, 0.0, 0.5,
        0.0, 0.0, 0.5, 0.5,
        0.0, 0.0, 0.0, 1.0);
    this.textureMatrix.multiply(this.mirrorCamera.projectionMatrix);
    this.textureMatrix.multiply(this.mirrorCamera.matrixWorldInverse);
    this.mirrorPlane.setFromNormalAndCoplanarPoint(this.normal, this.mirrorWorldPosition);
    this.mirrorPlane.applyMatrix4(this.mirrorCamera.matrixWorldInverse);
    this.clipPlane.set(this.mirrorPlane.normal.x, this.mirrorPlane.normal.y, this.mirrorPlane.normal.z, this.mirrorPlane.constant);
    var q = new THREE.Vector4();
    var projectionMatrix = this.mirrorCamera.projectionMatrix;
    q.x = (Math.sign(this.clipPlane.x) + projectionMatrix.elements[8]) / projectionMatrix.elements[0];
    q.y = (Math.sign(this.clipPlane.y) + projectionMatrix.elements[9]) / projectionMatrix.elements[5];
    q.z = -1.0;
    q.w = (1.0 + projectionMatrix.elements[10]) / projectionMatrix.elements[14];
    var c = new THREE.Vector4();
    c = this.clipPlane.multiplyScalar(2.0 / this.clipPlane.dot(q));
    projectionMatrix.elements[2] = c.x;
    projectionMatrix.elements[6] = c.y;
    projectionMatrix.elements[10] = c.z + 1.0 - this.clipBias;
    projectionMatrix.elements[14] = c.w;
};
THREE.Mirror.prototype.render = function() {
    if (this.matrixNeedsUpdate) this.updateTextureMatrix();
    this.matrixNeedsUpdate = true;
    var scene = this;
    while (scene.parent !== null) {
        scene = scene.parent;
    }
    if (scene !== undefined && scene instanceof THREE.Scene) {
        var visible = this.material.visible;
        this.material.visible = false;
        this.renderer.render(scene, this.mirrorCamera, this.renderTarget, true);
        this.material.visible = visible;
    }
};
THREE.Mirror.prototype.renderTemp = function() {
    if (this.matrixNeedsUpdate) this.updateTextureMatrix();
    this.matrixNeedsUpdate = true;
    var scene = this;
    while (scene.parent !== null) {
        scene = scene.parent;
    }
    if (scene !== undefined && scene instanceof THREE.Scene) {
        this.renderer.render(scene, this.mirrorCamera, this.renderTarget2, true);
    }
};
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45;
var ASPECT = WIDTH / HEIGHT;
var NEAR = 1;
var FAR = 500;
var camera, scene, renderer;
var cameraControls;
var verticalMirror, groundMirror;
var sphereGroup, smallSphere;

function init() {
    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(WIDTH, HEIGHT);
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
    camera.position.set(-120, 110, 160);
    cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
    cameraControls.target.set(0, 40, 0);
    cameraControls.maxDistance = 400;
    cameraControls.minDistance = 10;
    cameraControls.update();
    var container = document.getElementById('container');
    container.appendChild(renderer.domElement);
}

function render() {
    verticalMirror.renderWithMirror(groundMirror);
    renderer.render(scene, camera);
}

function update() {
    requestAnimationFrame(update);
    cameraControls.update();
    render();
}
init();
fillScene();
update();

编译

CSS

HTML

mirror ( reflective material ) example in THREE.js

webgl, mirror, material

编辑器支持Emmet

快捷键

mirror ( reflective material ) example in THREE.js

webgl, mirror, material

three.js饮料瓶幻灯展览（带辉光特效）

WebGL Three.js实现的三维空间镜面反射特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：