WEB 3D技术 three.js 设置环境贴图高光贴图场景设置光照贴图

上文WEB 3D技术 three.js 基础网格材质演示几何体贴图 ao贴图效果我们简单构建了一个贴图和ao贴图的几何体材质

我们接下来来看一下透明度贴图

我们还是官网搜索 MeshBasicMaterial

在这里插入图片描述

然后是我们的 alphaMap 属性

这里黑色为完全透明白色完全不透明

黑白之间还有灰色这个灰色的灰值就是透明度

在这里插入图片描述

这里我们直接用 alphaMap 上贴图

在这里插入图片描述

这样图形就明显有些透明效果了但是会上面也说了他会开始转变为黑白灰色

在这里插入图片描述

然后是我们的光照贴图

在这里插入图片描述我们这里加一下

在这里插入图片描述

然后我们图片的光照效果就会在内部微微的显现出我们设置的 public/background.jpg

在这里插入图片描述

然后我们来看环境贴图

这里我们需要一个HDR图片

如果没有可以下载我的资源

HDR格式文件 WEB 3D学习工具

这里我将它放入项目的 public目录下

在这里插入图片描述

那么我们需要一个hdrl的加载器

import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";

在这里插入图片描述

然后找一个位置写入代码

let rgbeloader = new RGBELoader();
rgbeloader.load("./public/page.hdr",(texture) =>{
    scene.background = texture;
})

这里我们函数向public目录下导入 page.hdr 回调参数就是文件对象然后赋值给场景的 background属性

在这里插入图片描述

运行效果如下

在这里插入图片描述

但是这样我们场景是不会动的就好像是一个离谱的背景图而我们想要的是它跟谁我们的拖动转动

我们直接给个属性就好了

在这里插入图片描述

这样我们拖动场景他就会随之变化

在这里插入图片描述

我们再往右拖一拖

在这里插入图片描述

我们来回转多可以

在这里插入图片描述

然后我们可以单独设置我们中间这块元素的环境贴图

改写代码如下

let rgbeloader = new RGBELoader();
rgbeloader.load("./public/page.hdr",(texture) =>{
    texture.mapping = THREE.EquirectangularReflectionMapping;
    scene.background = texture;
    scene.environment = texture;
    planeMaterial.envMap = texture;
})
let planeGeometry = new THREE.PlaneGeometry(1,1);
let textureLoader = new THREE.TextureLoader();
let planeMaterial = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    side: THREE.DoubleSide,
    transparent: true,
    map: textureLoader.load("./public/logo.png"),
    //lightMap: textureLoader.load("./public/background.jpg")
})

这里我们先注释掉 lightMap 光照贴图免得影响视觉体验

environment 设置环境贴图

然后我们设置 planeMaterial材质的 envMap 环境贴图字段为我们外面的场景

在这里插入图片描述

这样我们中间这个材质就也展现出反光的一个效果了

在这里插入图片描述

然后我们可以通过材质 reflectivity 属性设置反射强度值从 0 到 1

默认值 1

这里我们来一手 0.5

在这里插入图片描述

运行效果如下

在这里插入图片描述

好接下里我们设置一下高光贴图

在这里插入图片描述

let rgbeloader = new RGBELoader();
rgbeloader.load("./public/page.hdr",(texture) =>{
    texture.mapping = THREE.EquirectangularReflectionMapping;
    scene.background = texture;
    scene.environment = texture;
    planeMaterial.envMap = texture;
})
let planeGeometry = new THREE.PlaneGeometry(1,1);
let textureLoader = new THREE.TextureLoader();
let specularMap = textureLoader .load("./public/background.jpg")
let planeMaterial = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    side: THREE.DoubleSide,
    transparent: true,
    map: textureLoader.load("./public/logo.png"),
    specularMap: specularMap
    //lightMap: textureLoader.load("./public/background.jpg")
})

我们 specularMap 导入的图片依旧是

在这里插入图片描述