Threejs_07 环境、透明度、纹理、ao、光照等贴图的渲染

@老陈打码 继续学习老陈threejs 支持！！！！！！

下面用到的所有图片、资源、hdr文件都是@老陈打码的原资源

链接：https://pan.baidu.com/s/1WWWHgekCIH7OnjI7S_3ZtQ 
提取码：6666 

Threejs的背景如何设置呢，不能每天面对黑漆漆的屏幕吧。如何加载贴图呢，怎么把自己的图片放到屏幕中呢？

加载各种纹理贴图

在加载各种纹理贴图之前，我们需要有一个机器，用他来加载，相当于一个工具

// 创建纹理加载器
const textureLoader = new THREE.TextureLoader();

然后就开始我们的工作吧

1.做一个物料和基础的材质 这次我们用的是平板物料

// 物料
let planeGeometry = new THREE.PlaneGeometry(1, 1);
// 材质
let planeMaterial = new THREE.MeshBasicMaterial({
  color: 0xffffff,
});
let plane = new THREE.Mesh(planeGeometry, planeMaterial);
scene.add(plane);

 

2.首先 我们先要加载准备好的贴图 然后将纹理放入材质之中

//加载纹理
let texture = textureLoader.load(
  "/public/texture/watercover/CityNewYork002_COL_VAR1_1K.png"
);

let planeMaterial = new THREE.MeshBasicMaterial({
  color: 0xffffff,
    //纹理贴图
  map: texture,
});

效果立马就展示出来了。 

 

不过我们的图片其实是个圆形的，让他变成透明的。

let planeMaterial = new THREE.MeshBasicMaterial({
  color: 0xffffff,
  //纹理贴图
  map: texture,

  //允许透明
  transparent: true,
});

 

3.我们需要加载ao贴图(环境遮挡效果) 并放入材质

//加载AO纹理   ao = 环境遮挡效果
let aoMap = textureLoader.load(
  "/public/texture/watercover/CityNewYork002_AO_1K.jpg"
);

let planeMaterial = new THREE.MeshBasicMaterial({
  color: 0xffffff,
    //纹理贴图
  map: texture,
  
  //设置AO
  aoMap: aoMap,

});

 这样好像看不出来我们想要的效果

我们可以加入一个gui调试开发工具 来进行调节，方便我们看到效果

gui.add(planeMaterial, "aoMapIntensity").min(0).max(1).name("ao贴图强度");

仔细看好像还是有效果的 

4. 我们继续加载透明度贴图 放入材质

// 加载透明度贴图
let alphaMap = textureLoader.load("/public/texture/door/height.jpg");

// 材质
let planeMaterial = new THREE.MeshBasicMaterial({
  color: 0xffffff,
  //纹理贴图
  map: texture,

  //允许透明
  transparent: true,

  //设置AO
  aoMap: aoMap,

  //透明度贴图
  alphaMap: alphaMap,
});

 发现成了这个效果。因为我们放入的贴图就是一个矩形的样子  暂时先去掉吧。！！！

5.接着依次加入 光照贴图  高光贴图 一起放入材质之中

//加载光照贴图
let lightMap = textureLoader.load("/public/texture/colors.png");

//加载高光贴图
let specularMap = textureLoader.load(
  "/public/texture/watercover/CityNewYork002_GLOSS_1K.jpg"
);

// 材质
let planeMaterial = new THREE.MeshBasicMaterial({
  color: 0xffffff,
  //纹理贴图
  map: texture,

  //允许透明
  transparent: true,

  //设置AO
  aoMap: aoMap,

  //透明度贴图
  // alphaMap: alphaMap,

  //光照贴图
  lightMap: lightMap,

  //反射强度(默认为1)
  // reflectivity: 0.1,

  //高光贴图
  specularMap: specularMap,
});

6.背景贴图的嵌入

背景地图一般都是hdr文件，我们需要先引入一个hdr加载器 并且实例化

//导入hdr加载器
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";

// RGBELoader 实例化
let rgbLoader = new RGBELoader();

 7.加载hdr贴图 背景的设置需要在回调函数之中完成

// 加载hdr贴图
rgbLoader.load(
  "/public/texture/Alex_Hart-Nature_Lab_Bones_2k.hdr",
  (envMap) => {
    //设置球形映射
    envMap.mapping = THREE.EquirectangularReflectionMapping;
    //设置环境纹理
    scene.background = envMap;
    //设置环境贴图(场景)
    scene.environment = envMap;
    //设置plane 环境贴图
    planeMaterial.envMap = envMap;
  }
);

这是我们场景的背景环境 直接用background、environment来实现。

这个时候，我们就给场景加入了一个环境，可以拖拽我们的鼠标进行背景的移动

 8.我们也可以使用gui调试开发工具，来动态的观察反射强度属性对做出来物料的影响

gui.add(planeMaterial, "reflectivity").min(0).max(1).name("反射强度");

 

 全部代码

//1.一个物体可以设置多个材质嘛

//1.设置定点组
//2 多个

//导入 threejs
import * as THREE from "three";
//导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
//导入lil.gui
// import * as dat from "dat.gui";  // 旧
import { GUI } from "three/examples/jsm/libs/lil-gui.module.min.js";

//导入hdr加载器
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";

// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(
  45, // 视角
  window.innerWidth / window.innerHeight, // 宽高比 窗口的宽高进行设置的
  0.1, // 近平面   相机最近最近能看到的物体
  1000 // 远平面   相机最远能看到的物体
);
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器的大小  (窗口大小)
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器的dom元素添加到body中
document.body.appendChild(renderer.domElement);
camera.position.z = 5;
// 为了看到z轴
camera.position.y = 2;
// 设置x轴
camera.position.x = 2;
//设置相机的焦点 (相机看向哪个点)
camera.lookAt(0, 0, 0);

//添加世界坐标辅助器  (红色x轴,绿色y轴,蓝色z轴)一个线段 参数为 线段长度
const axesHelper = new THREE.AxesHelper(5);
//添加到场景之中
scene.add(axesHelper);

// 添加轨道控制器 (修改侦听位置)  一般监听画布的事件  不监听document.body
const controls = new OrbitControls(camera, renderer.domElement);
// 这里传递阻塞掉了 会导致无法点击
// const controls = new OrbitControls(camera, document.body);

//渲染函数
function animate() {
  controls.update();
  //请求动画帧
  requestAnimationFrame(animate);
  //旋转网格体
  // cube.rotation.x += 0.01;
  // cube.rotation.y += 0.01;
  //渲染
  renderer.render(scene, camera);
}
animate();
//渲染

// 监听窗口的变化 重新设置渲染器的大小 画布自适应窗口
window.addEventListener("resize", () => {
  // 重新设置渲染器的大小
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 重新设置相机的宽高比
  camera.aspect = window.innerWidth / window.innerHeight;
  // 重新计算相机的投影矩阵
  camera.updateProjectionMatrix();
});

//创建gui实例
const gui = new GUI();

// 创建纹理加载器
const textureLoader = new THREE.TextureLoader();

//加载纹理
let texture = textureLoader.load(
  "/public/texture/watercover/CityNewYork002_COL_VAR1_1K.png"
);

//加载AO纹理   ao = 环境遮挡效果
let aoMap = textureLoader.load(
  "/public/texture/watercover/CityNewYork002_AO_1K.jpg"
);

// 加载透明度贴图
let alphaMap = textureLoader.load("/public/texture/door/height.jpg");

//加载光照贴图
let lightMap = textureLoader.load("/public/texture/colors.png");

//加载高光贴图
let specularMap = textureLoader.load(
  "/public/texture/watercover/CityNewYork002_GLOSS_1K.jpg"
);

// RGBELoader 实例化
let rgbLoader = new RGBELoader();

// 加载hdr贴图
rgbLoader.load(
  "/public/texture/Alex_Hart-Nature_Lab_Bones_2k.hdr",
  (envMap) => {
    //设置球形映射
    envMap.mapping = THREE.EquirectangularReflectionMapping;
    //设置环境纹理
    scene.background = envMap;
    //设置环境贴图(场景)
    scene.environment = envMap;
    //设置plane 环境贴图
    planeMaterial.envMap = envMap;
  }
);

// 物料
let planeGeometry = new THREE.PlaneGeometry(1, 1);
// 材质
let planeMaterial = new THREE.MeshBasicMaterial({
  color: 0xffffff,
  //纹理贴图
  map: texture,

  //允许透明
  transparent: true,

  //设置AO
  aoMap: aoMap,

  //透明度贴图
  // alphaMap: alphaMap,

  //光照贴图
  lightMap: lightMap,

  //反射强度(默认为1)
  // reflectivity: 0.1,

  //高光贴图
  specularMap: specularMap,
});
let plane = new THREE.Mesh(planeGeometry, planeMaterial);
scene.add(plane);

gui.add(planeMaterial, "aoMapIntensity").min(0).max(1).name("ao贴图强度");
gui.add(planeMaterial, "reflectivity").min(0).max(1).name("反射强度");

 

 

 

 

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/174912.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

新建模板，或组件自适应

新建模板，或组件自适应

1，***一定要改为固定布局（才可以自适应） 2， 3， 4，系统序号“1”就是第一根柱 5，系列-自动-配色这里1就是第一根柱颜色，2..... 6，坐标柱 标红的去掉，在那里设…
阅读更多...
debian10 开启rdp安装firefox并解决firefox 中文乱码

debian10 开启rdp安装firefox并解决firefox 中文乱码

debian10 开启rdp安装firefox apt -y install tigervnc-standalone-server apt -y install xrdp tigervnc-standalone-server systemctl enable xrdp --nowapt install firefox-esrmstsc连接 firefox-settings-general-fonts-advanced-Simplified Chinese
阅读更多...
【vue+eltable】修改表格滚动条样式

【vue+eltable】修改表格滚动条样式

<style lang"scss" scoped> ::v-deep .el-table__body-wrapper::-webkit-scrollbar {width: 10px; /*纵向滚动条的宽度*/height: 10px; /*横向滚动条的高度*/ } /*定义滚动条轨道 内阴影圆角*/ ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {bo…
阅读更多...
以太网_底层

以太网_底层

【实物图】 【网线接口】 MAC(媒体访问控制器)&#xff1a;控制数据的收发和管理&#xff0c;和用户层打交到&#xff1b;通过MII/RMII、SMI接口和PHY进行通信。 PHY(以太网物理层收发器)&#xff1a;中间体&#xff0c;负责收发信号的转换 常见PHY芯片有&#xff1a;LAN8720…
阅读更多...
Docker上部署mysql（超简单！！！）

Docker上部署mysql（超简单！！！）

拉取mysql镜像 运行如下命令 docker pull mysql:5.7 拉取成功 查看镜像 运行容器 此处部署最新版本的mysql docker run -d --name mysql -p 3307:3306 -e TZAsia/Shanghai -e MYSQL_ROOT_PASSWORD111 mysql --name mysql&#xff1a;给容器起个名字&#xff08;唯一&#xff…
阅读更多...
按照指定条件对数据进行分组并对每个分组内的全部数据应用自定义函数进行聚合计算groupby().apply()

按照指定条件对数据进行分组并对每个分组内的全部数据应用自定义函数进行聚合计算groupby().apply()

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 按照指定条件对数据进行分组 并对每个分组内的全部数据 应用自定义函数进行聚合计算 groupby().apply() [太阳]选择题 下列输出正确的是&#xff1a; import pandas as pd data {Name: [A, B,…
阅读更多...
Spring Cloud实战 |分布式系统的流量控制、熔断降级组件Sentinel如何使用

Spring Cloud实战 |分布式系统的流量控制、熔断降级组件Sentinel如何使用

专栏集锦&#xff0c;大佬们可以收藏以备不时之需 Spring Cloud实战专栏&#xff1a;https://blog.csdn.net/superdangbo/category_9270827.html Python 实战专栏&#xff1a;https://blog.csdn.net/superdangbo/category_9271194.html Logback 详解专栏&#xff1a;https:/…
阅读更多...
深度解析Python Melt函数的妙用技巧

深度解析Python Melt函数的妙用技巧

更多Python学习内容&#xff1a;ipengtao.com 大家好&#xff0c;我是涛哥&#xff0c;今天为大家分享 Python Melt函数的妙用技巧&#xff0c;文章4200字&#xff0c;阅读大约15分钟&#xff0c;大家enjoy~~ 在数据处理和清洗中&#xff0c;melt函数是Pandas库中一个强大而灵活…
阅读更多...
squid代理服务器（传统代理、透明代理、反向代理、ACL、日志分析）

squid代理服务器（传统代理、透明代理、反向代理、ACL、日志分析）

一、Squid 代理服务器 &#xff08;一&#xff09;代理的工作机制 1、代替客户机向网站请求数据&#xff0c;从而可以隐藏用户的真实IP地址。 2、将获得的网页数据&#xff08;静态 Web 元素&#xff09;保存到缓存中并发送给客户机&#xff0c;以便下次请求相同的数据时快速…
阅读更多...
抖音本地生活服务商申请怎么做？无保证金的申请方法来了

抖音本地生活服务商申请怎么做？无保证金的申请方法来了

想做抖音的本地生活服务项目&#xff0c;却不知道去哪里申请&#xff0c;或者如何申请&#xff0c;其实&#xff0c;官方的通道在今年上半年还是有的&#xff0c;自己去平台上提交资料申请就可以了&#xff0c;但需要缴纳高额的保证金。 而在今年下半年&#xff0c;平台已经关…
阅读更多...
从0开始学习JavaScript--深入理解JavaScript的async/await

从0开始学习JavaScript--深入理解JavaScript的async/await

JavaScript的异步编程在过去经历了回调地狱、Promise的引入&#xff0c;而今&#xff0c;通过async/await&#xff0c;让我们获得了更加优雅、可读性更高的异步编程方式。本文将深入探讨async/await的概念、用法&#xff0c;并通过丰富的示例代码展示其在实际应用中的威力。 理…
阅读更多...
Linux安装ErLang（亲测可用）

Linux安装ErLang（亲测可用）

注&#xff08;我这里安装完成后显示的是中文&#xff0c;有的是显示的英文&#xff09; 1.下载er wget https://packages.erlang-solutions.com/erlang-solutions-1.0-1.noarch.rpm2.安装er yum -y install epel-release截图截不全&#xff0c;就只截安装完成的部分了 rp…
阅读更多...
在银行外包如何自我提升

在银行外包如何自我提升

作者&#xff1a;苍何&#xff0c;前大厂高级 Java 工程师&#xff0c;阿里云专家博主&#xff0c;CSDN 2023 年 实力新星&#xff0c;土木转码&#xff0c;现任部门技术 leader&#xff0c;专注于互联网技术分享&#xff0c;职场经验分享。 &#x1f525;热门文章推荐&#xf…
阅读更多...
基于单片机公交安全预警系统仿真设计

基于单片机公交安全预警系统仿真设计

**单片机设计介绍&#xff0c; 基于单片机公交安全预警系统仿真设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机的公交安全预警系统可以被设计成能够实时监测公交车辆的行驶状态&#xff0c;并在发生异常情况时进行…
阅读更多...
使用Pytorch实现linear_regression

使用Pytorch实现linear_regression

使用Pytorch实现线性回归 # import necessary packages import torch import torch.nn as nn import numpy as np import matplotlib.pyplot as plt# Set necessary Hyper-parameters. input_size 1 output_size 1 num_epochs 60 learning_rate 0.001# Define a Toy datas…
阅读更多...
GB28181视频监控国标平台EasyGBS如何进行服务迁移？

GB28181视频监控国标平台EasyGBS如何进行服务迁移？

视频流媒体安防监控国标GB28181平台EasyGBS视频能力丰富&#xff0c;部署灵活&#xff0c;既能作为业务平台使用&#xff0c;也能作为安防监控视频能力层被业务管理平台调用。国标GB28181视频EasyGBS平台可提供流媒体接入、处理、转发等服务&#xff0c;支持内网、公网的安防视…
阅读更多...
直播岗位认知篇

直播岗位认知篇

一、直播岗位概述 直播岗位&#xff0c;也称为直播主播或直播运营&#xff0c;是指在互联网直播平台上进行直播活动的工作岗位。该岗位的主要职责是通过直播形式&#xff0c;向观众展示自己的才艺、分享生活、销售产品或服务&#xff0c;并引导观众互动和参与。直播主播需要具…
阅读更多...
【C++】泛型编程 ⑪ ( 类模板的运算符重载 - 函数实现 写在类外部的不同的 .h 头文件和 .cpp 代码中 )

【C++】泛型编程 ⑪ ( 类模板的运算符重载 - 函数实现 写在类外部的不同的 .h 头文件和 .cpp 代码中 )

文章目录 一、类模板的运算符重载 - 函数实现 写在类外部的不同的 .h 头文件和 .cpp 代码中1、分离代码 后的 友元函数报错信息 - 错误示例Student.h 头文件内容Student.cpp 代码文件内容Test.cpp 代码文件内容执行报错信息 2、问题分析 二、代码示例 - 函数实现 写在类外部的不…
阅读更多...
设计模式总结-笔记

设计模式总结-笔记

一个目标&#xff1a;管理变化&#xff0c;提供复用&#xff01; 两种手段&#xff1a;分解vs.抽象 八大原则&#xff1a; 依赖倒置原则&#xff08;DIP&#xff09; 开放封闭原则&#xff08;OCP&#xff09; 单一职责原则&#xff08;SRP&#xff09; Liskov替换原则&a…
阅读更多...
Python pip 镜像源设置指南

Python pip 镜像源设置指南

文章目录 Python pip 镜像源设置指南前言安装单个包使用PyPI镜像使用镜像升级 pip设为默认pip镜像结语 Python pip 镜像源设置指南 前言 平时在使用 pip 安装一些包的时候速度非常慢,本文介绍如何在 Python3 下设置 PyPI 设置镜像源,本文以给 Python3 设置清华 镜像源举例. …
阅读更多...
最新文章

Copyright @ 2022~2023