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

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

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

我们还是官网搜索 MeshBasicMaterial

然后是我们的 alphaMap 属性

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

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

这里我们直接用 alphaMap 上贴图

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

然后是我们的光照贴图
我们这里加一下

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

然后我们来看环境贴图

这里我们需要一个HDR图片

如果没有可以下载我的资源
HDR格式文件 WEB 3D学习工具

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

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

javascript 复制代码

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

然后找一个位置写入代码

javascript 复制代码

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

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

运行效果如下

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

我们直接给个属性就好了

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

我们再往右拖一拖

我们来回转多可以

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

改写代码如下

javascript 复制代码

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

运行效果如下

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

javascript 复制代码

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 导入的图片依旧是

光照贴图依旧注释了也不会有影响

然后我们设置材质的 specularMap 字段

这个起到的作用就是图片白色部分反色黑色部分不反射

当然这个效果能和材质 reflectivity 反射强多做一个叠加你要是嫌反射太明显可以设置个 0.3 或者再小一些

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

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