75 - three.js 筆記 - 用 VideoTexture 視訊輸出作為紋理

阿新 • • 發佈：2018-11-12

1、示例

示例
http://ithanmang.com/threeJs/home/201809/20180910/02-video-texture.html
效果
這裡寫圖片描述

2、實現步驟

2.1、新增 `video` 標籤

<video id="video" autoplay loop muted>
    <source src="../../textures/video/sintel.ogv">
    <source src="../../textures/video/sintel.mp4">
</video>

2.2、建立視訊紋理

let video = document.getElementById('video' 
);
let texture = new THREE.VideoTexture(video);
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.format = THREE.RGBFormat;

material.map = texture;

3、示例程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta 
 name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="icon" href="../../../three.png">
    <title>使用videoTexture用視訊作為輸出紋理</title>
    <style>
        body {
            margin: 0;
            overflow: hidden; /* 溢位隱藏 */ 

            background: url("../../images/bg_network.jpg") center no-repeat;
            -webkit-background-size: cover;
            background-size: cover;
        }

        #loading {
            position: fixed;
            top: 50%;
            left: 50%;
            color: #FFFFFF;
            font-size: 20px;
            margin-top: -30px;
            margin-left: -40px;
        }
        #video {
            position: absolute;
            width: 0;
            height: 0;
        }
    </style>
    <script src="../../libs/build/three-r93.js"></script>
    <script src="../../libs/examples/js/Detector.js"></script>
    <script src="../../libs/examples/js/libs/dat.gui.min.js"></script>
    <script src="../../libs/examples/js/libs/stats.min.js"></script>
</head>
<body>
<video id="video" autoplay loop muted>
    <source src="../../textures/video/sintel.ogv">
    <source src="../../textures/video/sintel.mp4">
</video>
<p id="loading">loading......</p>

<script>

    let scene, camera, renderer, guiControls;
    let mouseX = 0, mouseY = 0;
    let stats = initStats();

    /* 場景 */
    function initScene() {

        scene = new THREE.Scene();

    }

    /* 相機 */
    function initCamera() {

        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
        camera.position.set(0, 0, 8);
        camera.lookAt(new THREE.Vector3(0, 0, 0));

    }

    /* 渲染器 */
    function initRender() {

        renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearAlpha(0.5);
        document.body.appendChild(renderer.domElement);

    }

    /* 燈光 */
    function initLight() {

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

        let spotLight1 = new THREE.SpotLight(0xffffff);
        spotLight1.position.set(-400, -400, -400);

        let spotLight2 = new THREE.SpotLight(0xffffff);
        spotLight2.position.set(400, 400, 400);

        scene.add(spotLight1);
        scene.add(spotLight2);

    }

    /* 除錯外掛 */
    function initGui() {

        guiControls = new function () {

        };

        let gui = new dat.GUI();

    }

    /* 場景中的內容 */
    function initContent() {

        let planeGeometry = new THREE.PlaneGeometry(10, 5);
        let material = new THREE.MeshPhongMaterial();
        material.side = THREE.DoubleSide;

        let mesh = new THREE.Mesh(planeGeometry, material);

        scene.add(mesh);

        let video = document.getElementById('video');
        let texture = new THREE.VideoTexture(video);
        texture.minFilter = THREE.LinearFilter;
        texture.magFilter = THREE.LinearFilter;
        texture.format = THREE.RGBFormat;

        material.map = texture;

        removeLoading();


    }

    /* 移除載入元素 */
    function removeLoading() {

        document.getElementById('loading').style.display = 'none';

    }

    /* 效能外掛 */
    function initStats() {

        let stats = new Stats();

        document.body.appendChild(stats.domElement);

        return stats;

    }

    /* 視窗變動觸發 */
    function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);

    }

    function onDocumentMouseMove(event) {

        mouseX = (event.clientX - window.innerWidth / 2) * 0.01;
        mouseY = (event.clientY - window.innerHeight / 2) * 0.01;

    }

    /* 資料更新 */
    function update() {

        stats.update();

        camera.position.x += (mouseX - camera.position.x) * 0.005;
        camera.position.y += (-mouseY - camera.position.y) * 0.005;
        camera.lookAt(scene.position);


    }

    /* 初始化 */
    function init() {

        if (!Detector.webgl) Detector.addGetWebGLMessage();

        initScene();
        initCamera();
        initRender();
        initLight();
        initContent();
        initGui();

        /* 監聽事件 */
        window.addEventListener('resize', onWindowResize, false);
        document.addEventListener('mousemove', onDocumentMouseMove, false);

    }

    /* 迴圈渲染 */
    function animate() {

        requestAnimationFrame(animate);
        renderer.render(scene, camera);
        update();

    }

    /* 初始載入 */
    (function () {
        console.log("three init start...");

        init();
        animate();

        console.log("three init end...");
    })();

</script>
</body>
</html>

75 - three.js 筆記 - 用 VideoTexture 視訊輸出作為紋理

1、示例示例 http://ithanmang.com/threeJs/home/201809/20180910/02-video-texture.html 效果 2、實現步驟 2.1、新增 video 標籤 <video id="video" autopla

64 - three.js 筆記 - 載入紋理並應用到網格

紋理最基礎的用法就是在材質上貼圖，將圖片通過THREE.TextureLoader載入，然後設定為材質的map屬性。 1、示例 http://ithanmang.com/threeJs/home/201809/20180905/01-basic-texture.html 效果

67 - three.js 筆記 - 使用 bumpMap 凹凸貼圖建立皺紋

凹凸貼圖用於為材質增加厚度，在三維環境中使表面產生凹凸不平的視覺效果。它主要的原理是通過改變表面光照的法線。凹凸貼圖是一種灰度影象素的密集程度定義的是凹凸的程度。凹凸貼圖只包含畫素的相對高度，不包含傾斜方向的資訊，凹凸貼圖不會改變物體的形狀。 1、示例示例 http://it

66 - three.js 筆記 - 載入 TGA 格式的紋理

1、TGA格式 TGA（Targa）格式是計算機上應用最廣泛的圖象格式。在兼顧了BMP的圖象質量的同時又兼顧了JPEG的體積優勢。並且還有自身的特點：通道效果、方向性。在CG領域常作為影視動畫的序列輸出格式，因為兼具體積小和效果清晰的特點。 TGA的結構比較簡單，屬於一種圖

65 - three.js 筆記 - 載入 DDS 格式的紋理

1、DDS紋理格式首先，圖片轉換成dds格式，佔用磁碟會變大，但是轉換成dds格式之後架載入到記憶體和視訊記憶體的佔用量會變小。 1.1、dds格式簡介 DDS格式要追述到S3(Silicon & Software Systems)公司提出的一種紋理壓縮格式S3TC(S

70 - three.js 筆記 - 使用環境貼圖建立虛假的反光效果

計算環境反光會非常耗費CPU，而且通常會使用光線追蹤演算法，在three.js中通過環境貼圖envMap來偽裝反光，並且可以將環境貼圖用到指定的物件上。 1、示例示例 http://ithanmang.com/threeJs/home/201809/20180905/07-env

69 - three.js 筆記 - 使用光照貼圖 lightMap 建立假陰影

Material的lightMap屬性，是光照貼圖，使用光照貼圖可以模擬出真實的陰影效果，但是陰影的位置不能隨著隨著物體的移動而移動。 1、示例示例 http://ithanmang.com/threeJs/home/201809/20180905/06-lightMap-tex

74 - three.js 筆記 - 通過透明渲染設定背景圖片

1、示例示例 http://ithanmang.com/threeJs/home/201809/20180910/01-canvas-background-image.html 效果 2、實現步驟 2.1、背景圖 2.2、設定背景此處是給body元素設定了背景

73 - three.js 筆記 - 設定折射貼圖比率 refractionRatio 加環境貼圖實現反射效果

通過給物體設定環境貼圖envMap可以實現虛假的反射效果，通過設定CubeCamera可以實現動態的反光，設定材質的refractionRatio 屬性可以實現透明反射的效果。 1、示例示例 http://ithanmang.com/threeJs/home/201809/201

72 - three.js 筆記 - 通過 Reflector.js 建立鏡面反射

類似境面反射可以使用CubeCamera但是CubeCamera更適用於建立物體自身對環境的反射，但是如果想要建立一面鏡子的話使用CubeCamera會難除錯所反射物體的位置，而且鏡面中的物體不會隨著控制器的縮放而變動。使用Reflector.js可以很容易的建立一面鏡子，並且鏡子中的物

three.js 筆記

1、簡介 THREE.OrbitControls是最常用的用來控制相機的控制元件，並且也是官方文件中唯一有介紹的控制元件。軌道控制允許攝像機圍繞一個目標軌道執行這個目標預設為THREE.Vector3()，也就是(0, 0, 0)世界座標的原

用three.js制作一個旋轉的正方體

() end ont 幾何體 style ctype 分別是 document camera <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

Three.js 學習筆記(1)--坐標體系和旋轉

external 單位 svg cal resource nsf font cos 證明前言 JavaScript 3D library The aim of the project is to create an easy to use, lightweight,

Three.js學習筆記05

geo spec date 應用 rtm js學習筆記 setsize 技術分享 image 場景相關函數和屬性下面的代碼中應用到了所有以上的函數及屬性： <!DOCTYPE html> <html lang="en"> <head>

three.js探索筆記一

per spec 後來 push end 需要 alias 一個筆記一　　前言 “哈？要搞3D？” “恩，之後一個項目要建造一棟樓，要靠你了少年！” 於是我默默的打開了 webgl新手入門手冊 http://www.hewebgl.com/article/

未能分析從服務器收到的消息,.cs文件裏面用response.write輸出js彈框出錯，用了局部跟新

scrip hive htm onclick orm pda 但是 parser 彈框轉載：https://www.cnblogs.com/shenyixin/archive/2012/03/08/2385376.html 中文：Sys.WebForms.PageRequ

常用Js筆記，以後可能用得上

checkbox arc label item 下單 trigger all IT push <div class="order_head"> <table> <th

Three.js學習筆記-注意事項

旋轉尤拉角（Euler angles）容易遭遇一個所謂“萬向節鎖（gimbal lock）”的難題，也就是在某些特定點（類似於地球南北極極點），物體的座標突變會導致某個維度的旋轉變換失效。Gimbal_lock因此，物件旋轉總是使用其四元數 quaternion 屬性來儲存。矩形

three.js用THREE.CubeCamera和環境貼圖建立反光效果

在在文章：three.js貼圖之CubeTextureLoader全景貼圖中已經講過全景貼圖的應用，本文將進一步擴充套件全景貼圖的功能，結合THREE.CubeCamera功能，創建出一個具有反光效果的場景，首先來看看看看THREE.CubeCamera的用法： let c

谷歌console可以輸出物件，js用cosole.log輸出為不存在

bug描述 var fansItem = document.getElementsByClassName("fansItem"); funciton fans() { console.log(fansItem[0]); } fans(); 在js

75 - three.js 筆記 - 用 VideoTexture 視訊輸出作為紋理

1、示例

2、實現步驟

2.1、新增 video 標籤

2.2、建立視訊紋理

3、示例程式碼

相關推薦

2.1、新增 `video` 標籤