Three.js - 通过透明渲染设置背景图片

最新推荐文章于 2024-07-13 14:04:52 发布

「已注销」

最新推荐文章于 2024-07-13 14:04:52 发布

阅读量9k

点赞数 4

分类专栏： threejs

本文链接：https://blog.csdn.net/ithanmang/article/details/82588856

版权

本文介绍了如何在Three.js中设置背景图片，包括一个示例链接展示效果，以及实现步骤：2.1 设置背景图，2.2 设置自适应背景图并调整透明度。提供了一个设置背景透明度的示例代码。

摘要由CSDN通过智能技术生成

1、示例

示例
https://ithanmang.gitee.io/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: