HTML5 Three.js VideoTexture全息摄像头下的鬼魅靓影

WebGL Ghostly Essence，带视频闪烁功能来营造恐怖神秘的氛围。可用于制作3D恐怖电影。

html5, ghost, sphere

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

;
(function() {
    if (!Detector.webgl) Detector.addGetWebGLMessage();
    var camera, scene, renderer, container;
    var cameraControls;
    var sphere;
    var clock;
    var cubeCamForReflection;
    var staircaseVideo;
    var videoTexture1;
    var camPosVector;
    var cubeMesh;
    var cubeBox;

function load() {
        var urls = [
            '/uploads/1702/px.jpg', '/uploads/1702/nx.jpg',
            '/uploads/1702/py.jpg', '/uploads/1702/ny.jpg',
            '/uploads/1702/pz.jpg', '/uploads/1702/nz.jpg'
        ];

var skybox = new THREE.CubeTextureLoader().load(urls, function() {
            console.log("texture loaded");
            skybox.format = THREE.RGBFormat;
            init(skybox);
            animate();
        });
    }

function init(skybox) {
        container = document.createElement('div');
        document.body.appendChild(container);

camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 2000);

// scene with skybox added as background
        scene = new THREE.Scene();
        scene.background = skybox;

//renderer
        renderer = new THREE.WebGLRenderer({
            antialias: true
        });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        container.appendChild(renderer.domElement);

// LIGHTS
        var ambient = new THREE.AmbientLight(0xffffff);
        scene.add(ambient);

//cube camera to capture real time maps for reflections on the sphere
        cubeCamForReflection = new THREE.CubeCamera(1, 500, 512);
        cubeCamForReflection.renderTarget.texture.minFilter = THREE.LinearMipMapLinearFilter;
        scene.add(cubeCamForReflection);

//sphere
        var geometry = new THREE.IcosahedronGeometry(100, 3);
        var reflectiveMaterial = new THREE.MeshBasicMaterial({
            color: 0xffffff,
            //envMap using the texture captured from cubecam in render loop
            envMap: cubeCamForReflection.renderTarget.texture
        });
        sphere = new THREE.Mesh(geometry, reflectiveMaterial);
        scene.add(sphere);

//camera position
        camera.position.x = -211;
        camera.position.y = -164;
        camera.position.z = -69;

//mouse controls
        cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
        cameraControls.target.set(0, 40, 0);
        cameraControls.maxDistance = 1200;
        cameraControls.minDistance = 10;
        cameraControls.update();

//staircaseVideo initialisation
        staircaseVideo = document.createElement('video');
        staircaseVideo.width = 320;
        staircaseVideo.height = 240;
        staircaseVideo.autoplay = true;
        staircaseVideo.loop = true;
        staircaseVideo.src = "/uploads/1702/ghost1.mp4";
        staircaseVideo.crossOrigin = '';
        staircaseVideo.load(); // must call after setting/changing source
        staircaseVideo.play();

videoTexture1 = new THREE.VideoTexture(staircaseVideo);
        videoTexture1.minFilter = THREE.LinearFilter;
        videoTexture1.magFilter = THREE.LinearFilter;

var cubeSidesMaterial = new THREE.MeshBasicMaterial({
            map: videoTexture1,
            overdraw: true,
            side: THREE.BackSide,
            transparent: true,
            opacity: 0.7
        });
        var cubeGeometry = new THREE.BoxBufferGeometry(800, 800, 800, 1, 1, 1);
        cubeMesh = new THREE.Mesh(cubeGeometry, cubeSidesMaterial);
        //cubeMesh.scale.x = -1;
        scene.add(cubeMesh);

cubeBox = new THREE.Box3().setFromObject(cubeMesh);

window.scene = scene;

addScreenListeners();

clock = new THREE.Clock();

}

function playVideos() {
        staircaseVideo.play();
    }

function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }

function addScreenListeners() {
        var btn = document.getElementById("btn");
        btn.addEventListener("click", playVideos);
        window.addEventListener('resize', onWindowResize, false);
    }

function render() {

var time = Date.now() * 0.0001;

//hide sphere to capture map with camera
        sphere.visible = false;
        //capture map
        cubeCamForReflection.updateCubeMap(renderer, scene);
        //show sphere
        sphere.visible = true;

//check if camera is inside video cube
        camPosVector = camera.getWorldPosition();
        var isCameraInBox = cubeBox.containsPoint(camPosVector);
        if (isCameraInBox) {
            cubeMesh.visible = true;
        } else {
            cubeMesh.visible = false;
        }

//rotate video cube
        cubeMesh.rotation.x = time;
        cubeMesh.rotation.y = time;
        cubeMesh.rotation.z = time;

renderer.render(scene, camera);
    }

function animate() {
        requestAnimationFrame(animate);
        render();
    }

load();
    //mobile info box
    setTimeout(function() {
        TweenMax.to('#mobile_info', 0.6, {
            opacity: 0.4
        });
        TweenMax.to('#triangle', 0.6, {
            opacity: 1,
            onComplete: function() {
                setTimeout(function() {
                    TweenMax.to('#mobile_info', 0.6, {
                        opacity: 0
                    });
                    TweenMax.to('#triangle', 0.6, {
                        opacity: 0
                    });
                }, 4000);
            }
        });
    }, 4000);

})();

编译

CSS

@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
    padding: 0;
    margin: 0;
}
canvas {
    display: block;
}
video {
    display: none;
}
p {
    padding: 0;
    margin: 0;
}
.btn {
    font-family: 'Roboto', sans-serif;
    position: absolute;
    top: 5px;
    right: 5px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: solid white 1px;
    background-color: aqua;
    color: black;
    opacity: 0.4;
    outline: none;
    cursor: pointer;
    text-align: center;
}
.triangle {
    opacity: 0;
    position: absolute;
    top: 27px;
    right: 51px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 10px;
    border-color: transparent transparent transparent aqua;
}
.mobile-info {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    padding: 5px;
    position: absolute;
    top: 5px;
    right: 60px;
    width: 100px;
    background-color: aqua;
    color: black;
    border-radius: 15px;
    border: solid white 1px;
    opacity: 0;
    outline: none;
    text-align: center;
}

HTML

WebGL Ghostly Essence，带视频闪烁功能来营造恐怖神秘的氛围。可用于制作3D恐怖电影。

html5, ghost, sphere

编辑器支持Emmet

快捷键

WebGL Ghostly Essence，带视频闪烁功能来营造恐怖神秘的氛围。可用于制作3D恐怖电影。

html5, ghost, sphere

使用HTML5 Audio API（AudioContext）实现的DJ划拨碟片音效

HTML5使用Polyrize.js轻松实现图像的多边形化特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：