Threejs-09、贴图的加载与环境遮蔽强度设置

1、创建文理加载器

let textureLoader = new THREE.TextureLoader();

2、加载贴图

// 加载文理
let texture = textureLoader.load("./img/image.png")
//  加载ao贴图
let aoMap = textureLoader.load("./img/image.png");

3、创建一个平面

let planeGeometry = new THREE.PlaneGeometry(1,1);

4、将贴图放入材质中

// 创建平面材质
let planeMaterial = new THREE.MeshBasicMaterial({color:0xffffff,map:texture,// 允许透明度transparent:true,// 设置ao贴图aoMap:aoMap,
})

第二种方式

planeMaterial.map=texture;
planeMaterial.aoMap=aoMap

5、放入画布

let plane = new THREE.Mesh(planeGeometry,planeMaterial);
scene.add(plane);

完整代码

<script setup>
// 导入threejs
import * as THREE from "three"
// 引入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 引入lil.gui
import { GUI } from "three/examples/jsm/libs/lil-gui.module.min.js";
// 创建场景
const scene = new THREE.Scene();
//创建相机
const camera = new THREE.PerspectiveCamera(800,// 视角window.innerWidth / window.innerHeight,0.1, // 近平面1000  // 远平面
);
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建文理加载器
let textureLoader = new THREE.TextureLoader();
// 加载文理
let texture = textureLoader.load("./img/image.png")
//  加载ao贴图
let aoMap = textureLoader.load("./img/image.png");// 创建一个平面
let planeGeometry = new THREE.PlaneGeometry(1,1);
// 创建平面材质
let planeMaterial = new THREE.MeshBasicMaterial({color:0xffffff,map:texture,// 允许透明度transparent:true,// 设置ao贴图aoMap:aoMap,
})
// 设置文理第二种方式
//planeMaterial.map=texture;
//planeMaterial.aoMap=aoMap
let plane = new THREE.Mesh(planeGeometry,planeMaterial);
scene.add(plane);
//设置相机位置
camera.position.x=5;
camera.position.y=5;
camera.position.z=5;
//相机默认看向远点
camera.lookAt(0,0,0);
// 添加世界坐标辅助器
const axesHelper =  new THREE.AxesHelper(10);
scene.add(axesHelper);
// 添加轨道控制器
const controls = new OrbitControls(camera,renderer.domElement);
// 设置带阻尼的惯性
controls.enableDamping=true;
// 设置阻尼系数
controls.dampingFactor = 0.05;
// 设置自动旋转
//controls.autoRotate = true;
//渲染函数
function animate(){controls.update();requestAnimationFrame(animate);renderer.render(scene,camera);
}
animate();
// 监听窗口变化
window.addEventListener("resize",()=>{camera.aspect = window.innerWidth / window.innerHeight;//   更新摄像机的投影矩阵camera.updateProjectionMatrix();//   更新渲染器renderer.setSize(window.innerWidth, window.innerHeight);//   设置渲染器的像素比renderer.setPixelRatio(window.devicePixelRatio);
})
// 创建GUI
const gui =  new GUI();
gui.add(planeMaterial,"aoMapIntensity").min(0).max(1).name("ao强度")
</script>
<template><div></div>
</template>
<style >
*{margin: 0;padding: 0;
}
canvas{display: block;position: fixed;left: 0;top: 0;width: 100vw;height: 100vh;
}
</style>

效果
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

element el-select数据量过大 造成页面卡死情况(解决)

template <el-form-item><el-selectv-model"form.nameId"placeholder"姓名"clearablefilterableremotecollapse-tagsreserve-keywordmultiple:loading"loading":remote-method"remoteMethod"style"width: 100%"ch…

常见日志库NLog、log4net、Serilog和Microsoft.Extensions.Logging介绍和区别

在C#中&#xff0c;日志库的选择主要取决于项目的具体需求&#xff0c;包括性能、易用性、可扩展性等因素。以下是关于NLog、log4net、Serilog和Microsoft.Extensions.Logging的基本介绍和使用示例。 包含如何配置输出日志到当前目录下的log.txt文件及控制台的示例&#xff0c;…

springboot整合sentinel接口熔断

背景 请求第三方接口或者慢接口需要增加熔断处理&#xff0c;避免因为慢接口qps过大导致应用大量工作线程陷入阻塞以至于其他正常接口都不可用&#xff0c;最近项目测试环境就因为一个查询的慢接口调用次数过多&#xff0c;导致前端整个首页都无法加载。 依赖下载 springboo…

网络安全(完整)

WAPI鉴别及密钥管理的方式有两种&#xff0c;既基于证书和基于预共享密钥PSK。若采用基于证书的方式&#xff0c;整个国产包括证书鉴别、单播密钥协商与组播密钥通告&#xff1b;若采用预共享密钥方式&#xff0c;整个国产则为单播密钥协商与组播密钥通告蠕虫利用信息系统缺陷&…

React+TS前台项目实战(十)-- 全局常用组件CopyText封装

文章目录 前言CopyText组件1. 功能分析2. 代码详细注释3. 使用方式4. 效果展示 总结 前言 今天这篇主要讲项目常用复制文本组件封装&#xff0c;这个组件是一个用于拷贝文本的 React 组件&#xff0c;它提供了拷贝&#xff0c;国际化和消息提示的功能 CopyText组件 1. 功能分…

Netty中的Reactor模型实现

Netty版本&#xff1a;4.1.17 Reactor模型是Doug Lea在《Scalable IO in Java》提出的&#xff0c;主要是针对NIO的。 其中的主从Reactor模式在Netty中的配置如下&#xff1a; EventLoopGroup bossGroup new NioEventLoopGroup(1); EventLoopGroup workerGroup new NioEv…

Docker Desktop Installer For Windows 国内下载地址

官网&#xff1a; Docker Desktop For Windows: https://download.docker.com/win/stable/Docker%20Desktop%20Installer.exe 通过Docker官网下载Docker Desktop安装包非常慢&#xff0c;而且还会下载失败。 解决方案 网盘下载&#xff1a; 链接&#xff1a;https://pan.qu…

每日一题——Python实现PAT甲级1144 The Missing Number(举一反三+思想解读+逐步优化)四千字好文

一个认为一切根源都是“自己不够强”的INTJ 个人主页&#xff1a;用哲学编程-CSDN博客专栏&#xff1a;每日一题——举一反三Python编程学习Python内置函数 Python-3.12.0文档解读 目录 我的写法 时间复杂度分析 空间复杂度分析 总体空间复杂度&#xff1a;O(N) 总结 我…

JSON响应中提取特定的信息——6.14山大软院项目实训2

在收到的JSON响应中提取特定的信息&#xff08;如response字段中的文本&#xff09;并进行输出&#xff0c;需要进行JSON解析。在Unity中&#xff0c;可以使用JsonUtility进行简单的解析&#xff0c;但由于JsonUtility对嵌套对象的支持有限&#xff0c;通常推荐使用第三方库如N…

<Python><paddleocr>基于python使用百度paddleocr实现图片文字识别与替换

前言 本文是使用百度的开源库paddleocr来实现对图片文字的识别,准确度还不错,对图片文字的替换,则利用opencv来完成。 环境配置 系统:windows 平台:visual studio code 语言:python 库:paddleocr、opencv、pyqt5 依赖库安装 本例所需要的库可以直接用pip来安装。 安装…

端口映射工具下载?

天联是一款强大的端口映射工具&#xff0c;它能够帮助用户实现远程数据采集管理、异地统一管理、随时随地协同办公等多种场景的应用。无论您是医药、餐饮、商超等零售行业的企业&#xff0c;还是需要使用OA、CRM、ERP、财务进销存等系统的企业&#xff0c;甚至是使用视频监控设…

适用于世界上最先进的医疗应用的高压电阻器

我们的电阻器专为用于医疗诊断、治疗和预防的各种产品而设计。从小型植入式和非侵入性设备到大型诊断成像设备&#xff0c;医疗制造商之所以选择 EAK电阻器&#xff0c;是因为操作环境是高电压和磁场&#xff0c;准确性和稳定性至关重要。 EAK 专有的精密打印技术生产出非常适…

创建单例模式的六种方式

一、单例模式 单例模式是一种创建型的设计模式&#xff0c;构造函数是私有的&#xff0c;因此只能在类中创建一个实例&#xff0c;且对外提供一个静态公有方法获取这个实例。 二、创建方法 1. 懒汉式&#xff08;线程不安全&#xff09; public class Singleton{private st…

如何应对 CentOS 的停更?

文章目录 如何应对 CentOS 的停更&#xff1f;Linux发行版CentOS停更后&#xff0c;我们可选的替代品RHEL LinuxRocky Linux公有云 LinuxDebian 系 Linux 如何应对 CentOS 的停更&#xff1f; Linux发行版 Linux内核是开源的&#xff0c;任何人都可以获取源代码&#xff0c;进…

嵌入式开发实验项目【基于Arduino的智能循迹小车】步进电机版本(含完整可执行详细代码)| 另附:测试行进传感器可用性,测试小车轱辘/轮胎是否可用

“真正的光明决不是永没有黑暗的时间,只是永不被黑暗所掩蔽罢了。真正的英雄决不是永没有卑下的情操,只是永不被卑下的情操所屈服罢了。” 🎯作者主页: 追光者♂🔥 🌸个人简介: 💖[1] 计算机专业硕士研究生💖 🌿[2] 2023年城市之星领跑者TOP1(哈尔…

Hi3861 OpenHarmony嵌入式应用入门--启动流程

目录 BootLoader的启动与运行 Hi3861 RiSC-V boot 启动文件介绍 Loaderboot 启动过程 Flashboot代码介绍 printf串口配置 内核启动任务 BootLoader的启动与运行 Hi3861 RiSC-V boot 启动文件介绍 - Hi3861 的引导程序分为两部分&#xff0c;一部分是在芯片出厂时已经固…

Redis-数据结构-跳表详解

Redis概述 Redis-数据结构-跳表详解 跳表&#xff08;Skip List&#xff09;是一种基于并联的链表结构&#xff0c;用于在有序元素序列中快速查找元素的数据结构。 Redis 中广泛使用跳表来实现有序集合&#xff08;Sorted Set&#xff09;这一数据结构。 1.跳表的基本概念和…

【源码】Spring事务之事务失效及原理

Spring事务 1、【源码】SpringBoot事务注册原理 2、【源码】Spring Data JPA原理解析之事务注册原理 3、【源码】Spring Data JPA原理解析之事务执行原理 4、【源码】SpringBoot编程式事务使用及执行原理 5、【源码】Spring事务之传播特性的详解 6、【源码】Spring事务之…

搜索与人工智能相结合如何解决企业数据问题?

作者&#xff1a;来自 Elastic Fermi Fang 企业数据是好处还是负担&#xff1f; 组织正被数据淹没 —— 从安全事件日志和应用程序错误消息到物联网指标和帮助中心常见问题解答。这些丰富的信息通常存在于孤立的孤岛中&#xff0c;在整合这些信息以提升客户体验、提高运营弹性…

Android10 动态修改开机动画(一)新增分区

需要&#xff1a; 同一个固件不同的客户可能需要不同的开机动画&#xff0c;开机动画是绑定在了系统的img文件中&#xff0c;每个客户维护一个系统版本&#xff0c;会大大增加了系统维护工作量。所以需要一个动态更换开机logo的功能。 分析&#xff1a; 新增一个分区&#x…