three.js创建简单的法向贴图

学习交流欢迎加群：789723098，博主会将一些demo整理共享

在上一节，我们用了three.js创建了简单的凹凸贴图效果：点击查看凹凸贴图，凹凸贴图可以呈现出比普通贴图更多细节，也更具层次感，如果我们对场景要求更为细致，我们可以使用法向贴图对材质进行贴图，本文以THREE.MeshPhongMaterial为例，演示一个法向贴图的示例，法向贴图主要是利用材质的normalMap来贴图，利用normalScale来控制其纹理的凹凸程度，代码如下：

function createTextureMesh(geometry, image, otherImage) {let map = new THREE.TextureLoader().load(image);let normalMap = new THREE.TextureLoader().load(otherImage);let material = new THREE.MeshPhongMaterial();material.map = map;//打底贴图material.normalMap = normalMap;//法向贴图material.normalScale = new THREE.Vector2(0.3, 0.3);//凹凸程度return new THREE.Mesh(geometry, material);}

其中image和otherImage都是图片所在的路径；为了贴图看起来更加细致和逼真，这里用了普通贴图和法向贴图相叠加。接下来实现一个法向贴图的场景(PS：一般用于法向贴图的图片文件名字都会含有normal字眼，用于凹凸贴图的会含有bump字眼，例如：XX-normal.jpg、XX-bump.jpg等等，所以在贴图时，读者可以根据需求再去找相应的文件），这里笔者实现了一个交互菜单栏，用于实现法向贴图凹凸程度的调节，效果如下：

demo代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>法向贴图</title><script type="text/javascript" src="build/three.js"></script><script type="text/javascript" src="js/controls/OrbitControls.js"></script><script type="text/javascript" src="js/libs/stats.js"></script><script type="text/javascript" src="js/libs/dat.gui.min.js"></script><style>body {margin: 0px;overflow: hidden;}</style>
</head>
<body>
<script type="text/javascript" >let container1 = document.createElement('div');document.body.appendChild(container1);let container2 = document.createElement('div');document.body.appendChild(container2);let scene = undefined;let renderer = undefined;let camera = undefined;let pointLight = ambientLight = undefined;let controls = undefined;let stats = undefined;let sphere = undefined, cube = undefined;let guiFields = {"normalScale": 0.3};main();render();function main() {initScene();initRenderer(container1);initCamera();initLight();initControls();normalMapMesh();initGUI();initStats(container2);window.addEventListener('resize', onWindowResize, false);}function initScene() {scene = new THREE.Scene();}function initCamera() {camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.set(0, 5, 35);camera.lookAt(scene.position);}function initRenderer(container1) {renderer = new THREE.WebGLRenderer({antialias:true});renderer.setClearColor(0xeeeeee, 1.0);renderer.setSize(window.innerWidth, window.innerHeight);renderer.shadowMapEnabled = true;container1.appendChild(renderer.domElement);}function initLight() {ambientLight = new THREE.AmbientLight(0xffffff, 0.35);scene.add(ambientLight);pointLight= new THREE.PointLight(0xff5808);pointLight.position.set(10, 10, 10);scene.add(pointLight);}function initControls() {controls = new THREE.OrbitControls(camera, renderer.domElement);controls.autoRotate = false;controls.enableKeys = true;}function initGUI() {let gui = new dat.GUI();gui.add(guiFields, 'normalScale', -2, 2).onChange(function (e) {sphere.material.normalScale.set(e, e);cube.material.normalScale.set(e, e);});}function normalMapMesh() {let image1 = "textures/general/plaster.jpg";let otherImage1 = "textures/general/plaster-normal.jpg";let image2 = "textures/general/metal-floor.jpg";let otherImage2 = "textures/general/metal-floor-normal.jpg";sphere = createTextureMesh(new THREE.SphereGeometry(8, 20, 20), image1, otherImage1);sphere.position.set(-10, 0, 0);scene.add(sphere);cube = createTextureMesh(new THREE.BoxGeometry(10, 10, 10, 20, 20, 20), image2, otherImage2);cube.position.set(10, 0, 0);scene.add(cube);}function createTextureMesh(geometry, image, otherImage) {let map = new THREE.TextureLoader().load(image);let normalMap = new THREE.TextureLoader().load(otherImage);let material = new THREE.MeshPhongMaterial();material.map = map;material.normalMap = normalMap;material.normalScale = new THREE.Vector2(0.3, 0.3);return new THREE.Mesh(geometry, material);}function initStats(container2) {stats = new Stats();stats.setMode(0);stats.domElement.style.position = 'absolute';stats.domElement.style.left = '0px';stats.domElement.style.top = '0px';container2.appendChild(stats.domElement);}function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight);}function render() {controls.update();stats.update();requestAnimationFrame(render);renderer.render(scene, camera);}
</script>
</body>
</html>

three.js创建简单的法向贴图相关推荐

126.如何使用CSS和 JS 创建简单图片切换
效果 (源码网盘地址在最后) 视频演示视频地址:https://www.ixigua.com/6914222592170263053/ 源码 index.html <!DOCTYPE html ...
three.js创建简单动画(vue中使用three.js59)
简单动画 1.demo效果 2.知识要点 2.1 three.js动画分类 2.1.1基础动画 2.1.2移动相机 2.1.3变形和蒙皮 2.1.4加载外部动画 2.2 基础动画实现方式 2.2.1 ...
three.js创建简单的凹凸贴图
有时候我们需要某个场景或者物体突出其凹凸特征,让物体看起来更有层次感,怎么办?Three.js的许多材质就提供了凹凸贴图的属性,下面笔者以THREE.MeshPhongMaterial为例,演示如何对 ...
组织结构图OrgChart.js的简单使用,实现树状图结构
OrgChart.js是什么? 基于ES6的组织结构图插件. 特征支持本地数据和远程数据(JSON). 基于CSS3过渡的平滑扩展/折叠效果. 将图表对齐为4个方向. 允许用户通过拖放节点更改组织结 ...
如何使用Emacs Org模式和Reveal.js创建幻灯片
在过去的一年左右的时间里,我开始大量重新使用Emacs和Org模式包(用于记录笔记,组织自己等等). 我也开始将脚趾浸入水中,进行简短的演讲. 我一直在想如何将Emacs与演讲结合起来. 演示与文本编 ...
js 最简单的方法使用canvas创建水印图片
js 最简单的方法使用canvas创建背景水印 /*** 文字水印* @param {any} text */ function watermark(text) {//创建画布var dom = do ...
游戏开发：js实现简单的板球游戏
js实现简单的板球游戏大家好,本次我们来使用js来实现一个简单的板球游戏.截图如下: 首先,设计页面代码,页面代码很简单,因为整个几乎是使用js编写的,页面几乎没有代码,如下: <!DOCTY ...
js 创建一条通用链表
js 创建一条通用链表什么是「链表科普」? 链表是一种物理存储单元上非连续.非顺序的存储结构,数据元素的逻辑顺序是通过链表中的指针链接次序实现的. 什么是「顺序存储结构科普」? 在计算机中用 ...
js实现简单的循环打字效果(思路分享)
1.初始化"打字创建"属性代码类似于这样: <div id="demo"></div> <script>var typin ...

three.js创建简单的法向贴图

学习交流欢迎加群：789723098，博主会将一些demo整理共享

three.js创建简单的法向贴图相关推荐

最新文章

热门文章