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

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

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

1、示例

示例
http://ithanmang.com/threeJs/home/201809/20180907/02-reflector-mirror.html
效果
這裡寫圖片描述

2、使用步驟

2.1、引入js檔案

和建立鏡頭炫光 Lensflare

一樣需要單獨引入

<!-- 匯入 Reflector.js -->
<script src="../../libs/examples/js/objects/Reflector.js"></script>

2.2、建立鏡子形狀

 let planeGeometry = new THREE.PlaneBufferGeometry(10, 10);

此處建立了一個矩形的平面

2.3、配置鏡子引數

let options = {

     clipBias: 0.03,
     textureWidth: window.innerWidth * window.devicePixelRatio,
     textureHeight 
: window.innerHeight * window.devicePixelRatio,
     color: 0x889999,
     recursion: 1

 };

2.4、建立鏡子並加入場景

let mirror = new THREE.Reflector(planeGeometry, options);
scene.add(mirror);

3、示例程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link 
 rel="icon" href="../../../three.png">
    <title>通過 Reflector 建立反光鏡</title>
    <style>
        body {
            margin: 0;
            overflow: hidden; /* 溢位隱藏 */
        }

        #loading {
            position: fixed;
            top: 50%;
            left: 50%;
            color: #FFFFFF;
            font-size: 20px;
            margin-top: -30px;
            margin-left: -40px;
        }
    </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>
    <script src="../../libs/examples/js/controls/OrbitControls.js"></script>

    <!-- 匯入 Reflector.js -->
    <script src="../../libs/examples/js/objects/Reflector.js"></script>

</head>
<body>
<p id="loading">loading......</p>
<script>

    let scene, camera, renderer, controls, guiControls;
    let stats = initStats();

    /* 場景 */
    function initScene() {

        scene = new THREE.Scene();
        scene.background = new THREE.CubeTextureLoader().setPath('../../textures/cube/Bridge2/')
            .load([
                'posx.jpg',
                'negx.jpg',
                'posy.jpg',
                'negy.jpg',
                'posz.jpg',
                'negz.jpg'
            ]);

    }

    /* 相機 */
    function initCamera() {

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

    }

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

        renderer = new THREE.WebGLRenderer({antialias: true});
        renderer.setSize(window.innerWidth, window.innerHeight);

        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 initControls() {

        /* 地圖控制元件 */
        controls = new THREE.OrbitControls(camera, renderer.domElement);

        /* 屬性引數 */

    }

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

        guiControls = new function () {

        };

        let gui = new dat.GUI();


    }

    /* 場景中的內容 */
    let mesh;

    function initContent() {

        let loader = new THREE.JSONLoader();
        loader.load('../../models/json/uv-standard.json', function (geometry) {

            let material = new THREE.MeshBasicMaterial();
            let texture = new THREE.TextureLoader().load('../../textures/uv/ash_uvgrid01.jpg');
            material.map = texture;

            mesh = new THREE.Mesh(geometry, material);
            mesh.translateZ(5);
            scene.add(mesh);

            removeLoading();

        });

        let planeGeometry = new THREE.PlaneBufferGeometry(10, 10);

        let options = {

            clipBias: 0.03,
            textureWidth: window.innerWidth * window.devicePixelRatio,
            textureHeight: window.innerHeight * window.devicePixelRatio,
            color: 0x889999,
            recursion: 1

        };

        let mirror = new THREE.Reflector(planeGeometry, options);

        scene.add(mirror);

    }

    /* 移除載入元素 */
    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 update() {

        stats.update();
        controls.update();

        if (mesh) {

            mesh.rotateX(0.01);
            mesh.rotateY(0.01);
            mesh.rotateZ(0.01);

        }

    }

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

        initScene();
        initCamera();
        initRender();
        initLight();
        initControls();
        initContent();
        initGui();
        /* 監聽事件 */
        window.addEventListener('resize', onWindowResize, 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>

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

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

three.js 通過 Reflector.js 建立鏡面反射

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

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

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

js筆記二:node.js的npm使用理解

Node.js一個非常強大的地方,也就npm了.npm isthe package manager for JavaScript.Node.js的包分為兩部分,一個是全域性的包,一個是本地專案的包.一般來說,我們只有本地的包就可以了.但是一些命令功能的,則需要放到全域性包的地

ckeditor中 config.js等通過ckeditor.js引入檔案手動修改方法

因為除了ckeditor.js之外的引用檔案是通過ckeditor.js自動新增<script>或<link>標籤實現檔案的引入，引入的根目錄是展示頁面的地址。有時需要手動修改通過ckeditor.js引入的檔案。這是需要在引入ckeditor.js

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

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

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

WebGL three.js學習筆記自定義頂點建立幾何體

auto getchild clear wid charset dem idt process 初始自定義頂點建立幾何體與克隆 Three.js本身已經有很多的網格模型，基本已經夠我們的使用，但是如果我們還是想自己根據頂點坐標來建立幾何模型的話，Three.js也是可以的

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

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

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

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

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

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

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

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

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

three.js 筆記

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

【Vue.js學習筆記】8：建立多個Vue例項物件,認識Vue中的元件

建立多個Vue例項物件這裡在同一個js檔案中建立了兩個Vue例項物件，它們各自能完成前面學的那些功能，同時使用物件名稱也可以互相訪問，協同實現一些功能。 index.html <!DOCTYPE html> <html lang="en" xmlns:v-

Node.js初學筆記(使用InteliJ IDEA建立的專案)

1.首先需要在網上下載node.js，然後安裝； 2.安裝好開啟IDEA軟體的settings...，點選Plugin搜尋node.js並安裝； 3.安裝好後新建專案可以看到大概在flash上面有Node.js and npm,點選next建立專案，本人使用的是ejs,建議

node.js中通過dgram資料報模組建立UDP伺服器和客戶端

node.js中 dgram 模組提供了udp資料包的socket實現，可以方便的建立udp伺服器和客戶端。一、建立UDP伺服器和客戶端服務端： const dgram = require('dgram'); //建立upd套接字 //引數一表示套接字型別，'udp4'

odoo widgets.js 筆記

.text kcon while validate his ide eject led title // 在OpenERP的Web框架內，// 通過聲明一個函數來聲明一個JavaScript模塊【openerp.ext_picking就是這個JS模塊】，// 並把這個函數放

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

1、示例

2、使用步驟

2.1、引入js檔案

2.2、建立鏡子形狀

2.3、配置鏡子引數

2.4、建立鏡子並加入場景

3、示例程式碼

相關推薦