Three.js - 使用 bumpMap 凹凸贴图创建皱纹

凹凸贴图用于为材质增加厚度，在三维环境中使表面产生凹凸不平的视觉效果。
它主要的原理是通过改变表面光照的法线。凹凸贴图是一种灰度图像素的密集程度定义的是凹凸的程度。凹凸贴图只包含像素的相对高度，不包含倾斜方向的信息，凹凸贴图不会改变物体的形状。

1、示例

示例
https://ithanmang.gitee.io/threejs/home/201809/20180905/04-bump-texture.html
效果

可以看左边添加了凹凸贴图的立方体明显和右边的不一样，左边的墙体看上去多了一些细节。
但是这种细节只是针对于正面，并不包含倾斜效果

倾斜之后二者的效果是一样的。

2、实现步骤

2.1、`bumpMap` 和 `bumpScale` 属性

bumpMap：创建凹凸贴图的纹理，黑色和白色的值映射到与灯光相关的感知深度。bump并不会影响物体的几何形状，只有照明。如果定义了正常的映射，则将忽略它。
bumpScale：凹凸的高度，默认为1，范围在1 - 0之间

2.2、创建实例并设置材质的`bumpMap`属性

let loader = new THREE.TextureLoader();
let bump = loader.load('../../textures/general/' + bumpUrl);
material.bumpMap = bump;

3、示例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><link rel="icon" href="../../../three.png"><title>使用 凹凸 贴图加载皱纹</title><style>body {margin: 0;overflow: hidden; /* 溢出隐藏 */}#loading {position: fixed;top: 50%;left: 50%;color: #FFFFFF;font-size: 20px;margin-top: -30px;margin-left: -40px;}</style><script src="../../libs/build/three-r93.js"></script><script src="../../libs/examples/js/Detector.js"></script><script src="../../libs/examples/js/libs/dat.gui.min.js"></script><script src="../../libs/examples/js/libs/stats.min.js"></script><script src="../../libs/examples/js/controls/OrbitControls.js"></script>
</head>
<body>
<p id="loading">loading......</p>
<script>let scene, camera, renderer, controls, guiControls;let stats = initStats();/* 场景 */function initScene() {scene = new THREE.Scene();scene.background = new THREE.Color(0x050505);}/* 相机 */function initCamera() {camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);camera.position.set(0, 0, -50);camera.lookAt(new THREE.Vector3(0, 0, 0));}/* 渲染器 */function initRender() {renderer = new THREE.WebGLRenderer({antialias: true});renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);}/* 灯光 */function initLight() {scene.add(new THREE.AmbientLight(0x0c0c0c));let spotLight1 = new THREE.SpotLight(0xffffff);spotLight1.position.set(-400, -400, -400);let spotLight2 = new THREE.SpotLight(0xffffff);spotLight2.position.set(400, 400, 400);scene.add(spotLight1);scene.add(spotLight2);}/* 控制器 */function initControls() {/* 地图控件 */controls = new THREE.OrbitControls(camera, renderer.domElement);/* 属性参数 */}/* 调试插件 */function initGui() {guiControls = new function () {this.bumpScale = box1.material.bumpScale;};let gui = new dat.GUI();gui.add(guiControls, 'bumpScale', -10, 1).onChange(function (e) {box1.material.bumpScale = e;});}/* 场景中的内容 */let box1;let box2;function initContent() {box1 = createMesh(new THREE.BoxGeometry(10, 10, 10), 'stone.jpg', 'stone-bump.jpg');box2 = createMesh(new THREE.BoxGeometry(10, 10, 10), 'stone.jpg');box1.translateX(7);box2.translateX(-7);scene.add(box1);scene.add(box2);removeLoading();}/* 移除加载元素 */function removeLoading() {document.getElementById('loading').style.display = 'none';}/* 创建带有纹理的网格 */function createMesh(geometry, imageUrl, bumpUrl) {let loader = new THREE.TextureLoader();let texture = loader.load('../../textures/general/' + imageUrl);let material = new THREE.MeshPhongMaterial();material.map = texture;if (bumpUrl !== undefined) {let bump = loader.load('../../textures/general/' + bumpUrl);material.bumpMap = bump;}let mesh = new THREE.Mesh(geometry, material);return mesh;}/* 性能插件 */function initStats() {let stats = new Stats();document.body.appendChild(stats.domElement);return stats;}/* 窗口变动触发 */function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);}/* 数据更新 */function update() {stats.update();controls.update();}/* 初始化 */function init() {if (!Detector.webgl) Detector.addGetWebGLMessage();initScene();initCamera();initRender();initLight();initControls();initContent();initGui();/* 监听事件 */window.addEventListener('resize', onWindowResize, false);}/* 循环渲染 */function animate() {requestAnimationFrame(animate);renderer.render(scene, camera);update();}/* 初始加载 */(function () {console.log("three init start...");init();animate();console.log("three init end...");})();</script>
</body>
</html>

Three.js - 使用 bumpMap 凹凸贴图创建皱纹相关推荐

three.js加载和使用纹理-设置material.bumpMap属性使用凹凸贴图创建皱纹(vue中使用three.js74)
使用凹凸贴图创建皱纹 1.demo效果 2. 实现要点 2.1 创建地板 2.2 创建凹凸贴图的物体 2.3 创建普通贴图的物体 3. demo代码 1.demo效果 2. 实现要点 2.1 创建地板 ...
92 Three.js 使用设置bumpMap凹凸贴图创建褶皱
案例查看地址:http://www.wjceo.com/blog/threejs/2018-05-03/155.html 简介凹凸贴图用于为材质增加厚度.我们用到的凹凸贴图是一张灰度图,当然你也可以 ...
Three.js凹凸贴图bumpMap和法线贴图.normalMap
凹凸贴图bumpMap和法线贴图.normalMap 本文是Three.js电子书的8.6节一个复杂的曲面模型,往往模型顶点数量比较多,模型文件比较大,为了降低模型文件大小,法线贴图.normalM ...
three.js创建简单的凹凸贴图
有时候我们需要某个场景或者物体突出其凹凸特征,让物体看起来更有层次感,怎么办?Three.js的许多材质就提供了凹凸贴图的属性,下面笔者以THREE.MeshPhongMaterial为例,演示如何对 ...
Three.js - 使用法向贴图 normalMap 创建更加细致的凹凸皱纹
法向贴图保存的不是每个像素的高度,而是像素的法向量,通过很晒的点和面就可以创建出细节非常丰富的模型. 1.示例示例 https://ithanmang.gitee.io/threejs/home/2 ...
three.js法线贴图与凹凸贴图的对比
一.对比图: 二.实现过程加载贴图: // TextureLoader创建一个纹理加载器对象,可以加载图片作为几何体纹理var textureLoader = new THREE.TextureLo ...
three.js 凹凸贴图
效果: MeshLambertMaterial.MeshBasicMaterial没有凹凸.法线贴图属性 MeshStandardMaterial(标准网格材质).MeshPhysicalMateri ...
openGL增强表面细节--凹凸贴图
openGL系列文章目录文章目录 openGL系列文章目录前言一.凹凸贴图二.代码 1.主程序c++ 总结前言假设我们想要对不规则表面的物体进行建模,例如橘子凹凸的表皮.葡萄干褶皱的表面 ...
置换贴图，法线贴图，凹凸贴图的区别
先自我介绍--你要是说这是自我炒作我也认了.首先说明,FXCarl是一个对3D美术一窍不同的家伙.虽然很想往技术美工方向发展了.因为是学程序出身,眼下能做的也就是写写Shaders.等到手上的项目做完 ...

Three.js - 使用 bumpMap 凹凸贴图创建皱纹

1、示例

2、实现步骤

2.1、`bumpMap` 和 `bumpScale` 属性

2.2、创建实例并设置材质的`bumpMap`属性

3、示例代码

Three.js - 使用 bumpMap 凹凸贴图创建皱纹相关推荐

最新文章

热门文章

Three.js - 使用 bumpMap 凹凸贴图创建皱纹

1、示例

2、实现步骤

2.1、bumpMap 和 bumpScale 属性

2.2、创建实例并设置材质的bumpMap属性

3、示例代码

Three.js - 使用 bumpMap 凹凸贴图创建皱纹相关推荐

最新文章

热门文章

2.1、`bumpMap` 和 `bumpScale` 属性

2.2、创建实例并设置材质的`bumpMap`属性