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

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

Material的lightMap屬性，是光照貼圖，使用光照貼圖可以模擬出真實的陰影效果，但是陰影的位置不能隨著隨著物體的移動而移動。

1、示例

示例
http://ithanmang.com/threeJs/home/201809/20180905/06-lightMap-texture.html
效果
這裡寫圖片描述
下面的陰影是通過光照貼圖載入進來的，如下面的關照貼圖

2、使用步驟

2.1、建立例項

 let lm = new THREE.TextureLoader().load('../../textures/lightmap/lm-1.png');
 planeGround.material.lightMap = lm;

將平面的材質的lightMap設定

2.3、指定UV對映

planeGround.geometry.faceVertexUvs[1] = planeGround.geometry.faceVertexUvs[0];

為光照貼圖指定uv對映，將紋理的那一部分對映到表面，只有這樣才能將關照貼圖與其它貼圖分別開來。

3、示例程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="../../../three.png" 
>
    <title>使用光照貼圖建立假陰影</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();
        scene.background = new THREE.Color(0x050505);

    }

    /* 相機 */
    function initCamera() {

        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
        camera.position.set(0, 50, -90);
        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 () {

            this.normalScale = 1;

        };

        let gui = new dat.GUI();
        gui.add(guiControls, 'normalScale', -2, 2).onChange(function (e) {

            box1.material.normalScale.set(e, e);

        });


    }

    /* 場景中的內容 */
    let box1;
    let box2;

    function initContent() {
        let planeGround = createMesh(new THREE.PlaneGeometry(95, 95, 1, 1), 'floor-wood.jpg');
        box1 = createMesh(new THREE.BoxGeometry(10, 10, 10), 'plaster.jpg', 'plaster-normal.jpg');
        box2 = createMesh(new THREE.BoxGeometry(10, 10, 10), 'plaster.jpg');

        let lm = new THREE.TextureLoader().load('../../textures/lightmap/lm-1.png');


        box1.translateX(10);
        box2.translateX(-10);
        box1.translateY(10);
        box2.translateY(10);

        planeGround.rotateX(Math.PI * -0.5);
        planeGround.material.lightMap = lm;

        planeGround.geometry.faceVertexUvs[1] = planeGround.geometry.faceVertexUvs[0];

        scene.add(planeGround);
        scene.add(box1);
        scene.add(box2);

    }

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

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

    }

    /* 建立帶有紋理的網格 */
    function createMesh(geometry, imageUrl, normalMap) {

        let loader = new THREE.TextureLoader();
        let texture = loader.load('../../textures/general/' + imageUrl);


        let material = new THREE.MeshPhongMaterial();
        material.map = texture;

        if (normalMap !== undefined) {

            let normal = loader.load('../../textures/general/' + normalMap, function () {
                removeLoading();
            });
            material.normalMap = normal;

        }


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

        return mesh;

    }

    /* 效能外掛 */
    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 (box1 && box2) {

            box1.rotateY(0.01);
            box2.rotateY(0.01);

        }

    }

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

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

        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>

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

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

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

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

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

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

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

【個人Unity筆記】烘焙光照貼圖後保留法線和光探頭

使用的5.34f1版本的unity 有時候為了節省開銷，烘焙光照貼圖是一種很好的辦法，在手機上開發經常會使用到，配合光探頭還可以讓靜態光和非靜態物體產生互動。首先，把要烘焙的物體全部勾選為靜態（Static）。然後，把需要烘焙的光的Baking由預

ShaderLab學習小結（十）簡單的支持光照貼圖的shader

process auto double defined erl plane lock 代碼 img 場景中建一個plane，一個cube一個cylinder把場景平行光的強度調低一些，再加一個點光源，設置為綠色吧，俗話說的好：愛是一道光，綠到你發荒……把點光源的shadow

光照貼圖烘焙

完成後背景色引擎 3D fonts 線下疑問不存在 tar 轉載自CSDN雨蒙一，簡書自由的天空等人，感謝分享； https://www.jianshu.com/p/3e1e002f5684 基礎知識了解一下： 1，什麽是貼圖（Texture）?

光照貼圖教程

http://www.alsprogrammingresource.com/lightmapping_tutorial.html 光照貼圖教程作者：Alan Baylis 19/12/2001 在大多數遊戲中，光照貼圖仍然是首選的照明方法，也就

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

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

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

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

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

光照貼圖的一些知識點

本帖最後由羅斯柴爾德於 2017-11-21 10:26 編輯很多同學對光照的大小和數量不是很清楚所以我把它寫出來，給大家參考一下其他什麼相關問題也可以提出來為了便於觀察，我做了兩個模型普通引數，烘焙得到一張光照貼圖&nbs

Learn OpenGL （十一）：光照貼圖

在著色器中使用漫反射貼圖的方法和紋理教程中是完全一樣的。但這次我們會將紋理儲存為Material結構體中的一個sampler2D。我們將之前定義的vec3漫反射顏色向量替換為漫反射貼圖。注意sampler2D是所謂的不透明型別(Opaque Type)，也就是說我們不能將它例項化，只能通過un

three.js 筆記

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

零基礎學習OpenGL（二）--材質、光照貼圖

接上節：我們給物體定義了一個材質的屬性，這裡包含了環境光照(Ambient Lighting)，漫反射光照(Diffuse Lighting)，鏡面光照(Specula

Opengl-光照-基本光照-光照貼圖(現在告別單調的方塊弄個箱子)

前言前面我們跟著LearnOpengl學習的都是通過怎麼定義一些頂點資料弄出一個立方體在三維世界裡模擬光照模擬光源。看著是有點真實的樣子了。。可是你見過哪個真實世界裡都是這些個立方體的，肯定都是真切的物體啊，什麼房子，樹，石頭，木頭等等。要怎麼模擬這

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

1、示例

2、使用步驟

2.1、建立例項

2.3、指定UV對映

3、示例程式碼

相關推薦