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

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

通過給物體設定環境貼圖envMap可以實現虛假的反射效果，通過設定CubeCamera可以實現動態的反光，設定材質的refractionRatio 屬性可以實現透明反射的效果。

1、示例

示例
http://ithanmang.com/threeJs/home/201809/20180907/03-refraction-texture.html
效果
這裡寫圖片描述

2、實現步驟

2.1、`refractionRatio`

refractionRatio：是物體對環境貼圖的折射率，值越接近0的話，對貼圖的反射越強烈，越接近1則月接近透明狀態，需要配合THREE.CubeRefractionMapping

和THREE.EquirectangularRefractionMapping一起使用。

2.2、設定環境貼圖和對映方式

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

2.3、設定材質的對映率

envMap: cubeTexture, 
refractionRatio:0.98, 
reflectivity:0.9

首先，需要設定環境貼圖，然後設定設定率，設定貼圖的反射率

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>

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

    let scene, camera, renderer, controls, guiControls;
    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, 30);
        camera.lookAt(new THREE.Vector3(0, 0, 0));

    }

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

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

        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 cube;
    function initContent() {

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

        let cubeMaterial1 = new THREE.MeshPhongMaterial({color: 0xccddff, envMap: cubeTexture, refractionRatio:0.98, reflectivity:0.9});
        let cubeMaterial2 = new THREE.MeshPhongMaterial({color: 0xccfffd, envMap: cubeTexture, refractionRatio:0.98, reflectivity:0.9});

        cube = new THREE.Mesh(new THREE.BoxGeometry(4, 4, 4), cubeMaterial1);
        cube.material.color = new THREE.Color('0xffffff');
        scene.add(cube);

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

            geometry.applyMatrix(new THREE.Matrix4().makeTranslation(0, -100, 0));

            let mesh = new THREE.Mesh(geometry, cubeMaterial1);
            mesh.translateX(7);
            mesh.scale.set(0.1, 0.1, 0.1);
            scene.add(mesh);

        });
        loader.load('../../models/json/Male02_dds.json', function (geometry) {

            geometry.applyMatrix(new THREE.Matrix4().makeTranslation(0, -100, 0));

            let mesh = new THREE.Mesh(geometry, cubeMaterial2);
            mesh.translateX(-7);
            mesh.scale.set(0.1, 0.1, 0.1);
            scene.add(mesh);

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

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

        if (cube) {

            cube.rotateX(0.01);
            cube.rotateY(0.01);
            cube.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>

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

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

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

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

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

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

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

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

three.js 筆記

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

three.js的wave特效（ivew官網首頁波浪特效實現）

alt 使用實現功夫 inf 有效訪問顏色 index 查看效果請訪問：https://521lbx.github.io/Web3D/index.html公司的好幾個vue項目都是用ivew作為UI框架，所以ivew官網時不時就得逛一圈。每一次進首頁都會被首頁的波浪

圖融合之加載子圖：Tensorflow.contrib.slim與tf.train.Saver之坑

sce npe ids import print filters cpu xxx true import tensorflow as tf import tensorflow.contrib.slim as slim import rawpy import numpy

three.js--如何給一個場景貼圖

var skyBoxGeometry = new THREE.BoxGeometry( 5000, 5000, 5000 ); var texture = new THREE.TextureLoader().load("images/sky.jpg");

three.js 多面幾何體進行多面貼圖 (貼圖後需要再次渲染才能顯現出來）

let materials = []; for (var i = 0; i < 6; ++i) { materials.push(new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture('../

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

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

three.js 用中文字作為貼圖

閒來無事，把three.js其中有一個例子改了一下，變成從一箇中心點噴射出中文字的例子，效果圖：下面直接貼程式碼好了 html: <html lang="en"> <head> <title>three.js ca

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/

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

1、示例

2、實現步驟

2.1、refractionRatio

2.2、設定環境貼圖和對映方式

2.3、設定材質的對映率

3、示例程式碼

相關推薦

2.1、`refractionRatio`