学习threejs，使用specularMap设置高光贴图

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：threejs gis工程师

文章目录

  • 一、🍀前言
    • 1.1 ☘️THREE.MeshPhongMaterial高光材质
    • 1.2 ☘️specularMap 高光贴图
  • 二、🍀使用specularMap设置高光贴图
    • 1. ☘️实现思路
    • 2. ☘️代码样例

一、🍀前言

本文详细介绍如何基于threejs在三维场景中使用specularMap设置高光贴图，亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️THREE.MeshPhongMaterial高光材质

THREE.MeshPhongMaterial 是 Three.js 中的一种材质类型，用于模拟物体表面的光照效果，包括漫反射（diffuse）和镜面反射（specular）。这种材质遵循 Phong 反射模型，可以模拟出光滑表面的高光效果，因此非常适合用来渲染金属、塑料、瓷器等具有光泽表面的物体。
常用属性：
THREE.MeshPhongMaterial 继承自 THREE.Material，并具有一些特定的属性，可以用来控制材质的外观：

color：材质的基本颜色，默认为白色（0xffffff）。可以是一个整数，表示十六进制颜色值。
map：基础颜色贴图，可以用来替代材质的颜色。可以是一个 THREE.Texture 对象。
alphaMap：透明度贴图，可以用来定义材质的透明度。可以是一个 THREE.Texture 对象。
emissive：自发光颜色，默认为黑色（0x000000）。即使在没有光源的情况下，也会显示这个颜色。
emissiveMap：自发光贴图，可以用来定义自发光的颜色。可以是一个 THREE.Texture 对象。
specular：高光颜色，默认为白色（0x111111）。高光颜色定义了镜面反射的颜色。
shininess：高光强度，默认为 30。高光强度定义了高光区域的锐度，数值越高，高光越集中。
opacity：材质的全局透明度，默认为 1（不透明）。
transparent：是否开启透明模式，默认为 false。如果设置为 true，则需要设置 opacity 或者使用 alphaMap。
side：指定材质在哪一面渲染，可以是 THREE.FrontSide（正面）、THREE.BackSide（背面）或 THREE.DoubleSide（双面）。
wireframe：是否启用线框模式，默认为 false。
visible：是否渲染该材质，默认为 true。
depthTest：是否进行深度测试，默认为 true。
depthWrite：是否写入深度缓冲区，默认为 true。
blending：混合模式，默认为 THREE.NormalBlending。可以设置为 THREE.AdditiveBlending、THREE.SubtractiveBlending 等。
vertexColors：是否启用顶点颜色，默认为 THREE.NoColors。可以设置为 THREE.VertexBasicColors、THREE.VertexColors 或 THREE.FaceColors。
flatShading：是否使用平滑着色，默认为 false。如果设置为 true，则每个面片都将使用平均法线。
envMap：环境贴图，可以用来模拟环境光照。可以是一个 THREE.Texture 对象。
reflectivity：环境光反射率，默认为 1。
refractionRatio：折射率，默认为 0.98。
combine：环境贴图的组合方式，默认为 THREE.MixOperation。
bumpMap：凹凸贴图，可以用来模拟表面细节。可以是一个 THREE.Texture 对象。
bumpScale：凹凸贴图的比例，默认为 1。
normalMap：法线贴图，可以用来模拟表面细节。可以是一个 THREE.Texture 对象。
normalScale：法线贴图的比例，默认为 Vector2(1, 1)。
displacementMap：置换贴图，可以用来改变表面的高度。可以是一个 THREE.Texture 对象。
displacementScale：置换贴图的比例，默认为 1。
displacementBias：置换贴图的偏移，默认为 0。

1.2 ☘️specularMap 高光贴图

高光贴图用于控制物体表面的高光部分，即那些直接反射光源光线的区域。它通常是一张灰度图，其中亮部表示强反射区域，暗部表示弱反射或非反射区域。这使得材质的高光效果可以在不同区域有所不同，增加了视觉上的复杂度和真实感。
使用高光贴图的原因：
高光网格材质MeshPhongMaterial具有高光属性.specular,如果一个网格模型Mesh都是相同的材质并且表面粗糙度相同,或者说网格模型外表面所有不同区域的镜面反射能力相同，可以直接设置材质的高光属性.specular。如果一个网格模型表示一个人，那么人的不同部位高光程度是不同的，不可能直接通过.specular属性来描述，在这种情况通过高光贴图.specularMap的RGB值来描述不同区域镜面反射的能力，.specularMap和颜色贴图.Map一样和通过UV坐标映射到模型表面。高光贴图.specularMap不同区域像素值不同，表示网格模型不同区域的高光值不同。

二、🍀使用specularMap设置高光贴图

1. ☘️实现思路

  • 1、初始化renderer渲染器
  • 2、初始化Scene三维场景
  • 3、初始化camera相机，定义相机位置 camera.position.set，设置相机方向camera.lookAt
  • 4、初始化THREE.AmbientLight环境光源，scene场景加入环境光源，初始化THREE.DirectionalLight平行光源，设置平行光源位置，设置平行光源投影，scene添加平行光源。
  • 5、加载几何模型：创建THREE.AxesHelper坐标辅助工具helper，scene场景中加入helper。创建THREE.SphereGeometry球体几何体geometry，创建THREE.MeshPhongMaterial高光材质material，material设置specularMap高光贴图、颜色和光照强度，传入geometry和material创建THREE.Mesh网格对象earth，scene中加入earth。
  • 6、加入gui控制（material加入正常贴图、法线贴图，具体实现看下面代码样例）、controls控制，加入stats监控器，监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>learn57(使用 SPECULARMAP 设置高光贴图)</title><script src="lib/threejs/127/three.js-master/build/three.js"></script><script src="lib/threejs/127/three.js-master/examples/js/controls/OrbitControls.js"></script><script src="lib/threejs/127/three.js-master/examples/js/libs/stats.min.js"></script><script src="lib/threejs/127/three.js-master/examples/js/libs/dat.gui.min.js"></script><script src="lib/js/Detector.js"></script>
</head>
<style type="text/css">html, body {margin: 0;height: 100%;}canvas {display: block;}
</style>
<body onload="draw()"></body>
<script>var renderer, camera, scene, gui, light, stats, controls, earth, materialvar initRender = () => {renderer = new THREE.WebGLRenderer({antialias: true})renderer.setSize(window.innerWidth, window.innerHeight)renderer.setPixelRatio(window.devicePixelRatio)renderer.shadowMap.enabled = truerenderer.setClearColor(0xeeeeee)document.body.appendChild(renderer.domElement)}var initCamera = () => {camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200)camera.position.set(0, 12, 15)}var initScene = () => {var cubeTextureLoader = new THREE.CubeTextureLoader()cubeTextureLoader.setPath('data/texture/skybox/space/')var cubeTexture = cubeTextureLoader.load(['right.jpg', 'left.jpg','top.jpg', 'bottom.jpg','front.jpg', 'back.jpg'])scene = new THREE.Scene()scene.background = cubeTexture}var initGui = () => {gui = {addTexture: () => {material.map = new THREE.TextureLoader().load('data/texture/earth/earth_atmos_2048.jpg')material.needsUpdate = true},addNormal: () => {material.normalMap = new THREE.TextureLoader().load('data/texture/earth/earth_normal_2048.jpg')material.needsUpdate = true},// 高光平滑度shininess: 10}var datGui = new dat.GUI()datGui.add(gui, 'addTexture')datGui.add(gui, 'addNormal')datGui.add(gui, 'shininess', 0, 100).onChange(e => {material.shininess = e})}var initLight = () => {scene.add(new THREE.AmbientLight(0x444444))light = new THREE.DirectionalLight(0xffffff)light.position.set(0, 20, 20)light.castShadow = truescene.add(light)}var initModel = () => {var helper = new THREE.AxesHelper(50)scene.add(helper)var geometry = new THREE.SphereGeometry(5, 60, 30)material = new THREE.MeshPhongMaterial({color: 0x666666})material.specularMap = new THREE.TextureLoader().load('data/texture/earth/earth_specular_2048.jpg')material.specular = new THREE.Color(0x00ffff)material.shininess = 10earth = new THREE.Mesh(geometry, material)scene.add(earth)}var initStats = () => {stats = new Stats()document.body.appendChild(stats.dom)}var initControls = () => {controls = new THREE.OrbitControls(camera, renderer.domElement)controls.enableDamping = THREEcontrols.autoRotate = false}var render = () => {earth.rotation.y += 0.01renderer.render(scene, camera)}var onWindowResize = () => {camera.aspect = window.innerWidth / window.innerHeightcamera.updateProjectionMatrix()renderer.setSize(window.innerWidth, window.innerHeight)}var animate = () => {render()stats.update()controls.update()requestAnimationFrame(animate)}var draw = () => {if (!Detector.webgl) Detector.addGetWebGLMessage()initGui()initRender()initScene()initCamera()initLight()initModel()initStats()initControls()animate()window.onresize = onWindowResize}
</script>
</html>

效果如下：
在这里插入图片描述

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

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

相关文章

一个简洁的ajax注册登录找回密码切换的前端页面

一个简洁的ajax注册登录找回密码切换的前端页面

成功和失败不同颜色显示&#xff0c;纯原生代码不需要jq等第三方插件 <% Language"VBScript" CodePage"65001"%> <% Response.Charset "UTF-8" Session.CodePage "65001" Response.Addheader "Content-Type",&q…
阅读更多...
uniapp首页样式，实现菜单导航结构

uniapp首页样式，实现菜单导航结构

实现菜单导航结构 1.导入字体图标库需要的文件 2.修改引用路径iconfont.css 3.导入到App.vue中 <style>import url(./static/font/iconfont.css); </style>导航区域代码 VUE代码 <template><view class"home"><!-- 导航区域 --><…
阅读更多...
解析客服知识库搭建的五个必要性

解析客服知识库搭建的五个必要性

在当今竞争激烈的商业环境中&#xff0c;客服知识库的搭建已成为企业提升服务质量、优化客户体验的重要手段。一个完善的客服知识库不仅能帮助企业高效管理客户服务流程&#xff0c;还能显著提升客户满意度和忠诚度。以下是搭建客服知识库的五个必要性&#xff1a; 1. 提升服务…
阅读更多...
淘宝Vision Pro：革新购物体验的沉浸式未来

淘宝Vision Pro：革新购物体验的沉浸式未来

引言 简要介绍淘宝Vision Pro版的背景，包括它在美区AppStore的发布及WWDC上的展示。阐述本文的目的：为读者提供一个全面的功能概览与设计背后的思考。设计原则 列出并简要解释5条设计原则（熟悉、直观、真实、实用、易用）。说明这些原则如何指导整个产品设计过程。核心功能详…
阅读更多...
【CSS in Depth 2 精译_062】第 10 章 CSS 中的容器查询（@container）概述 + 10.1 容器查询的一个简单示例

【CSS in Depth 2 精译_062】第 10 章 CSS 中的容器查询（@container）概述 + 10.1 容器查询的一个简单示例

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 【第十章 CSS 容器查询】 ✔️ 10.1 容器查询的一个简单示例 ✔️ 10.1.1 容器尺寸查询的用法 ✔️ 10.2 深入理解容器10.3 与容器相关的单位10.4 容器样式查询的用法10.5 本章小结 文章目录 第 10…
阅读更多...
HCIE：详解OSPF，从基础到高级特性再到深入研究

HCIE：详解OSPF，从基础到高级特性再到深入研究

目录 前言 一、OSPF协议基本原理 简介 基本原理 OSPF路由器类型 OSPF网络类型 OSPF报文类型和封装 OSPF邻居的建立的维护 DR和BDR的选举 伪节点 LSDB的更新 OSPF的配置 二、OSPF的高级特性 虚连接&#xff08;Virtual-Link&#xff09; OSPF的LSA和路由选择 OSPF…
阅读更多...
think php处理 异步 url 请求 记录

think php处理 异步 url 请求 记录

1、需求 某网站 需要 AI生成音乐&#xff0c;生成mp3文件的时候需要等待&#xff0c;需要程序中实时监听mp3文件是否生成 2、用的开发框架 为php 3、文件结构 配置路由设置 Route::group(/music, function () {Route::post(/musicLyrics, AiMusic/musicLyrics);//Ai生成歌词流式…
阅读更多...
【VRChat 改模】开发环境搭建：VCC、VRChat SDK、Unity 等环境配置

【VRChat 改模】开发环境搭建：VCC、VRChat SDK、Unity 等环境配置

一、配置 Unity 相关 1.下载 UnityHub 下载地址&#xff1a;https://unity.com/download 安装打开后如图所示&#xff1a; 2.下载 VRChat 官方推荐版本的 Unity 跳转界面&#xff08;VRChat 官方推荐页面&#xff09;&#xff1a;https://creators.vrchat.com/sdk/upgrade/…
阅读更多...
ollama部署bge-m3，并实现与dify平台对接

ollama部署bge-m3，并实现与dify平台对接

概述 这几天为了写技术博客，各种组件可谓是装了卸，卸了装，只想复现一些东西，确保你们看到的东西都是可以复现的。 （看在我这么认真的份上，求个关注啊，拜托各位观众老爷了。） 这不，为了实验在windows上docker里运行pytorch，把docker重装了。 dify也得重装： Dify基…
阅读更多...
详细介绍HTTP与RPC：为什么有了HTTP，还需要RPC？

详细介绍HTTP与RPC：为什么有了HTTP，还需要RPC？

目录 一、HTTP 二、RPC 介绍 工作原理 核心功能 如何服务寻址 如何进行序列化和反序列化 如何网络传输 基于 TCP 协议的 RPC 调用 基于 HTTP 协议的 RPC 调用 实现方式 优点和缺点 使用场景 常见框架 示例 三、问题 问题一&#xff1a;是先有HTTP还是先有RPC&…
阅读更多...
Lesson 10 GNN

Lesson 10 GNN

听课&#xff08;李宏毅老师的&#xff09;笔记&#xff0c;方便梳理框架&#xff0c;以作复习之用。本节课主要讲了生成式对抗网络&#xff08;GNN&#xff09;。 目录 Generation Network as Generator 到目前为止&#xff0c;我们学习到的是类似于函数的network&#xf…
阅读更多...
Scala入门基础（20）数据集复习拓展

Scala入门基础（20）数据集复习拓展

一.Stack栈二.Queue 队列 一.Stack栈 Stack:栈&#xff0c;特殊的结构。它对元素的操作是在头部&#xff1a;栈顶 先进后出的队列。pop表示取出&#xff0c;push表示在栈中添加元素 二.Queue 队列 Queue 队列;先进先出.enqueue入队&#xff0c;dequeue出队。
阅读更多...
Ubuntu20.04运行DM-VIO

Ubuntu20.04运行DM-VIO

目录 环境配置非ROS环境运行编译运行结果图 ROS环境参考 环境配置 Ubuntu20.04 将项目中Cmakelists.txt中C 和 opencv版本修改下 C 使用 14 opencv使用4 非ROS环境运行 编译 按照官网即可 cd dm-vio mkdir build cd build cmake .. make -j运行 DM-VIO给的命令是 bin/d…
阅读更多...
TDengine 签约深圳综合粒子，赋能粒子研究新突破

TDengine 签约深圳综合粒子，赋能粒子研究新突破

在高能物理和粒子研究领域&#xff0c;实验装置的不断升级伴随着海量数据的产生与处理。尤其是随着大湾区综合性国家科学中心的建设步伐加快&#xff0c;深圳综合粒子设施研究院&#xff08;以下简称“研究院”&#xff09;作为承载“双区驱动”战略的重要科研机构&#xff0c;…
阅读更多...
IDEA连接Apifox客户端

IDEA连接Apifox客户端

IDEA连接Apifox客户端 一、下载Apifox安装包二、IDEA配置三、配置Apifox和IDEA项目同步 一、下载Apifox安装包 Apifox官网&#xff0c;根据自己的操作系统下载对应的Apifox安装包&#xff0c;我是windows系统所以下载的是windows版。 下载 默认仅为我安装&#xff0c;点击下一…
阅读更多...
(C语言) 8大翻译阶段

(C语言) 8大翻译阶段

(C语言) 8大翻译阶段 文章目录 (C语言) 8大翻译阶段⭐前言&#x1f5c3;️8大阶段&#x1f5c2;️1. 字符映射&#x1f5c2;️2. 行分割&#x1f5c2;️3. 标记化&#x1f5c2;️4. 预处理&#x1f5c2;️5. 字符集映射&#x1f5c2;️6. 字符串拼接&#x1f5c2;️7. 翻译&…
阅读更多...
php反序列化1_常见php序列化的CTF考题

php反序列化1_常见php序列化的CTF考题

声明&#xff1a; 以下多内容来自暗月师傅我是通过他的教程来学习记录的&#xff0c;如有侵权联系删除。 一道反序列化的CTF题分享_ctf反序列化题目_Mr.95的博客-CSDN博客 一些其他大佬的wp参考&#xff1a;php_反序列化_1 | dayu’s blog (killdayu.com) 序列化一个对象将…
阅读更多...
Spring Boot拦截器(Interceptor)详解

Spring Boot拦截器(Interceptor)详解

拦截器Interceptor 拦截器我们主要分为三个方面进行讲解&#xff1a; 介绍下什么是拦截器&#xff0c;并通过快速入门程序上手拦截器拦截器的使用细节通过拦截器Interceptor完成登录校验功能 1. 快速入门 什么是拦截器&#xff1f; 是一种动态拦截方法调用的机制&#xff…
阅读更多...
使用zabbix监控k8s

使用zabbix监控k8s

一、 参考文献 小阿轩yx-案例&#xff1a;Zabbix监控kubernetes云原生环境 手把手教你实现zabbix对Kubernetes的监控 二、部署经验 关于zabbix监控k8s&#xff0c;总体来说是分为两块内容&#xff0c;一是在k8s集群部署zabbix-agent和zabbix- proxy。二是在zabbix进行配置。…
阅读更多...
GitCode 平台设置访问令牌 从而git仓库（附pycharm创建版本控制项目）

GitCode 平台设置访问令牌 从而git仓库（附pycharm创建版本控制项目）

GitCode 背靠CSDN搞了国产的git平台&#xff0c;但在实际使用过程中&#xff0c;我直接感受就是坑爹&#xff01;在查找用户令牌&#xff08;账号密码&#xff09;这一基本功能上&#xff0c;因为是csdn直接登录跳转过去的用户令牌&#xff0c;没有设置过密码&#xff0c;默认就…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023