ThreeJS法线贴图normalMap
Posted 开源编程案例
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ThreeJS法线贴图normalMap相关的知识，希望对你有一定的参考价值。
ThreeJS法线贴图normalMap。
<html lang="en"><head><meta charset="UTF-8"><title>ThreeJS法线贴图normalMap</title><style>body {margin: 0;overflow: hidden;}</style><script src="../../three.js-master/build/three.js"></script><script src="../../three.js-master/examples/js/controls/OrbitControls.js"></script></head><body><script>/*** 创建场景对象Scene*/var scene = new THREE.Scene();/*** 创建网格模型*/var geometry = new THREE.BoxGeometry(100, 100, 100); //立方体// TextureLoader创建一个纹理加载器对象，可以加载图片作为几何体纹理var textureLoader = new THREE.TextureLoader();// 加载法线贴图var textureNormal = textureLoader.load('./法线贴图/3_256.jpg');var material = new THREE.MeshPhongMaterial({color: 0xff0000,normalMap: textureNormal, //法线贴图//设置深浅程度，默认值(1,1)。normalScale: new THREE.Vector2(3, 3),}); //材质对象Materialvar mesh = new THREE.Mesh(geometry, material); //网格模型对象Meshscene.add(mesh); //网格模型添加到场景中/*** 光源设置*///点光源var point = new THREE.PointLight(0xffffff);point.position.set(400, 200, 300); //点光源位置scene.add(point); //点光源添加到场景中//环境光var ambient = new THREE.AmbientLight(0x444444);scene.add(ambient);/*** 相机设置*/var width = window.innerWidth; //窗口宽度var height = window.innerHeight; //窗口高度var k = width / height; //窗口宽高比var s = 150; //三维场景显示范围控制系数，系数越大，显示的范围越大//创建相机对象var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);camera.position.set(200, 300, 200); //设置相机位置// camera.position.set(0, 0, 200); //设置相机位置camera.lookAt(scene.position); //设置相机方向(指向的场景对象)/*** 创建渲染器对象*/var renderer = new THREE.WebGLRenderer();renderer.setSize(width, height); //设置渲染区域尺寸renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色document.body.appendChild(renderer.domElement); //body元素中插入canvas对象// 渲染函数function render() {renderer.render(scene, camera); //执行渲染操作requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧}render();//创建控件对象 相机对象camera作为参数 控件可以监听鼠标的变化，改变相机对象的属性var controls = new THREE.OrbitControls(camera);//监听鼠标事件，触发渲染函数，更新canvas画布渲染效果// controls.addEventListener('change', render);</script></body></html>
以上是关于ThreeJS法线贴图normalMap的主要内容，如果未能解决你的问题，请参考以下文章
ThreeJS GLTF Blender Exporter 的法线贴图值
ShaderLab学习小结（十五）法线贴图的简单Shader