2. 程式人生 > >74 - three.js 筆記 - 通過透明渲染設定背景圖片

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

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

1、示例

示例
http://ithanmang.com/threeJs/home/201809/20180910/01-canvas-background-image.html
效果
這裡寫圖片描述

2、實現步驟

2.1、背景圖
這裡寫圖片描述
2.2、設定背景
此處是給body元素設定了背景圖

body {
    margin: 0;
    overflow: hidden; /* 溢位隱藏 */
    background: url("../../images/bgc-map.jpg") center no-repeat;
}

設定背景圖自適應，否則使用手機開啟的時候不會撐滿整個螢幕

body {
    margin
 
: 0;
    overflow: hidden; /* 溢位隱藏 */
    background: url("../../images/bgc-map.jpg") center no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

設定setClearAlpha值，為背景透明度

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

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

}

setClearAlpha ( alpha : Float ) : null
設定alpha的值，範圍在0 - 1.0之間

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>設定渲染背景</title>
    <style>
        body {
            margin: 0;
            overflow: hidden; /* 溢位隱藏 */
            background: url("../../images/bgc-map.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;
        }
    </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, 10, 120);
        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.8);
        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.specular = sphere.material.specular.getStyle();
            this.shininess = sphere.material.shininess;
            this.clearAlpha = renderer.getClearAlpha();
            this.clearColor = renderer.getClearColor().getStyle();

        };

        let gui = new dat.GUI();
        gui.addColor(guiControls, 'specular').onChange(function (e) {

            sphere.material.specular.setStyle(e);

        });
        gui.add(guiControls,'shininess', 0, 100).onChange(function (e) {
            sphere.material.shininess = e;
        });

        gui.add(guiControls, 'clearAlpha', 0, 1).onChange(function (e) {
            renderer.setClearAlpha(e);
        });
        gui.addColor(guiControls, 'clearColor').onChange(function (e) {
           renderer.setClearColor(new THREE.Color(e), renderer.getClearAlpha());
        });
    }

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

        let material = new THREE.MeshPhongMaterial();
        material.map = new THREE.TextureLoader().load('../../textures/planets/Earth.png');
        material.normalMap = new THREE.TextureLoader().load('../../textures/planets/EarthNormal.png');
        material.specularMap = new THREE.TextureLoader().load('../../textures/planets/EarthSpec.png', function () {
            removeLoading();
        });
        material.specular = new THREE.Color(0x3366ff);
        material.shininess = 2;
        let sphereGeometry = new THREE.SphereGeometry(40, 50, 50);

        sphere = new THREE.Mesh(sphereGeometry, material);

        scene.add(sphere);

    }

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

            sphere.rotateY(0.001);

        }

    }

    /* 初始化 */
    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>

相關推薦

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可以很容易的建立一面鏡子，並且鏡子中的物

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

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

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

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

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

three.js 筆記

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

vue.js div 設定背景圖片

佈局： <div class="middle" :style="backgroundDiv"> <img src="./images/[email protected]" style="width: auto; height: 40px;"> </

JS中通過指定大小來壓縮圖片

前不久王二寫了一個圖片處理庫，可以指定圖片質量壓縮圖片，呼叫的是javaScript的原生方法 toDataURL 和 toBlob，庫裡有如下這些方法： 但是通過質量壓縮圖片有一些不足之處：無法確定壓縮後圖片的大小； 比如下圖，王二隨機選了三張圖片做測試(感興趣的小夥伴可以戳這裡自行測

[Qt筆記]:QWidget設定背景圖片

QWidget - 設定背景圖片: //設定背景圖片 this->setAutoFillBackground(true); // 這句要加上, 否則可能顯示不出背景圖.

android：設定背景圖片、背景顏色透明

Button或者ImageButton的背景設為透明或者半透明半透明<Button android:background="#e0000000" ... />  透明<Button android:background="#00000000" ... /

小程式設定背景圖片

小程式的元素，比如<view>不可以在wxss裡面設定背景圖片，只能在<image>裡面設定圖片 如果想在<view>標籤上設定背景圖片，只能在wxml裡面設定行內樣式，並且圖片還必須是線上圖片 <view style="background-ima

Visual Studio設定背景圖片

今天聽了公司的一個經驗分享會，發現VS竟然可以設定背景圖片！還是個萌妹子！！被萌了一臉鼻血！！！ 設定方法很簡單：安裝擴充套件ClaudiaIDE 1、在這裡下載擴充套件，https://visualstudiogallery.msdn.microsoft.com/9ba50f8d-

CSS3——給div設定背景圖片

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> *{ margin: 0; padding: 0;

Vue專案中設定背景圖片方法

 例如css樣式 background:url("../../assets/head.jpg");  1、在data中定義如下： export default { name: 'productdetailspage', data() { return { n

PyCharm使用技巧之設定背景圖片

設定的路徑為： File | Settings | Appearance & Behavior | Appearance 選擇Background Image 彈窗的視窗中 Image:點選