2. 程式人生 > >66 - three.js 筆記 - 載入 TGA 格式的紋理

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

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

1、TGA格式

TGA（Targa）格式是計算機上應用最廣泛的圖象格式。
在兼顧了BMP的圖象質量的同時又兼顧了JPEG的體積優勢。
並且還有自身的特點：通道效果、方向性。
在CG領域常作為影視動畫的序列輸出格式，因為兼具體積小和效果清晰的特點。
TGA的結構比較簡單，屬於一種圖形、影象資料的通用格式，在多媒體領域有很大影響，是計算機生成影象向電視轉換的一種首選格式。
TGA影象格式最大的特點是可以做出不規則形狀的圖形、影象檔案，一般圖形、影象檔案都為四方形，若需要有圓形、菱形甚至是縷空的影象檔案時，TGA就可以派上用場了。
TGA格式支援壓縮，使用不失真的壓縮演算法。
PC

遊戲中很多采用TGA格式的圖片，轉換為tga格式用ps就可以了。
可以通過ps開啟以及進行轉換。

2、匯入TGA格式的紋理

2.1、示例

http://ithanmang.com/threeJs/home/201809/20180905/03-basic-texture-tga.html

2.2、效果

這裡寫圖片描述

2.3、引入TGA載入器
<!--匯入 TGA 載入器-->
<script src="../../libs/examples/js/loaders/TGALoader.js"></script>
2.2、例項化載入器
let loader = new THREE.TGALoader();
let
 
 texture = loader.load('../../textures/tga/' + imageUrl, function () {
    ......
});

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

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

3、示例程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"
 
>
    <link rel="icon" href="../../../three.png">
    <title>基礎紋理-載入 TGA 格式的紋理</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>

    <!--匯入 TGA 載入器-->
    <script src="../../libs/examples/js/loaders/TGALoader.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, 0, -50);
        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 sphere;
    let box;

    function initContent() {

        sphere = createMesh(new THREE.SphereGeometry(5, 20, 20), 'crate_color8.tga');
        box = createMesh(new THREE.BoxGeometry(7, 7, 7), 'crate_grey8.tga');

        box.translateX(7);
        sphere.translateX(-7);

        scene.add(sphere);
        scene.add(box);

    }

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

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

    }

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

        let loader = new THREE.TGALoader();
        let texture = loader.load('../../textures/tga/' + imageUrl, function () {

            removeLoading();

        });

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

        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 (sphere) {
            sphere.rotateY(0.01);
        }
        if (box) {
            box.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>

相關推薦

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

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

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

【three.js : 3D】【loader】THREE.js中載入不同格式的模型及動畫(fbx、json和obj)

  轉載：THREE.js中載入不同格式的模型及動畫(fbx、json和obj) 注：本文章內容基於 Three.js 88dev 實現 作為剛接觸three.js的小萌新，勵志將自己開荒歷程記錄下來，希望對後來人有所幫助。 網上有很多demo，文件卻不多。每次都是，照搬別人的

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

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

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元素設定了背景

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 著色器材質之紋理

今天郭先生說一說如何在three.js著色器中新增紋理，先看看今天要完成的效果，線上案例請點選部落格原文。 這裡我們分別引入三個紋理，分別是地球的表面紋理，對應的海拔灰度圖，和雲朵的紋理。使用表面紋理還是地球的外貌，海拔灰度圖給地球新增凹凸效果，雲朵紋理給地球新增雲朵效果。下面我們說一說程式碼。 1. 繪製

本機上使用Three.js載入紋理

apach 效果 級別 材質 have 協議 files panel amp 怎樣載入紋理 // 首先, 創建一個紋理 var mapUrl = "../images/molumen_small_funny_angry_monster.jpg"; var map = T

Three.js開發指南（10）：載入和使用紋理

    將紋理應用到網格上10.1 在材質中使用紋理       紋理有幾種不同的用法，可以用它們來定義網格的顏色，也可以用它們來定義高光、凹凸和反光。但我們首先要看的是最基礎的方法，用紋理為網格上的每個畫素指定顏色。       載入紋理並應用到網格：紋理最基礎的用法是在材

Three.js學習筆記-Blender匯出的gltf格式的材質無法顯示問題處理

程式碼 var gltfLoader = new THREE.GLTFLoader(); gltfLoader.load( 'assset/test/testgltf1.gltf', function ( gltf ) {

three.js載入紋理為黑色

照著文件例子給平面新增紋理，可一直都顯示不出圖片，network裡有圖片，控制檯也沒報錯 drawPlane(){ var geometry = new THREE.PlaneGeometry(20, 30) // // 例項化一個載入器 // va

WebGL three.js學習筆記 載入外部模型以及Tween.js動畫

WebGL three.js學習筆記 載入外部模型以及Tween.js動畫 本文的程式實現了載入外部stl格式的模型，以及學習瞭如何把載入的模型變為一個粒子系統，並使用Tween.js對該粒子系統進行動畫設定 模型動畫demo演示(網頁載入速度可能會比較慢) demo地址：https://nsytsqdtn.

WebGL three.js學習筆記 6種類型的紋理介紹及應用

透視投影 qdt 高度 我們 幾何 區別 set 亮度 cubemap WebGL three.js學習筆記 6種類型的紋理介紹及應用 本文所使用到的demo演示： 高光貼圖Demo演示 反光效果Demo演示（因為是加載的模型，所以速度會慢） （一）普通紋理 計算機圖形學中

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,