网站备案幕布申请,移动网站开发做一个简单网页,重庆江北网站建设,市场调研公司有哪些#x1f468;⚕️ 主页#xff1a; gis分享者 #x1f468;⚕️ 感谢各位大佬 点赞#x1f44d; 收藏⭐ 留言#x1f4dd; 加关注✅! #x1f468;⚕️ 收录于专栏#xff1a;threejs gis工程师 文章目录 一、#x1f340;前言1.1 ☘️THREE.MeshPhongMaterial高…⚕️ 主页 gis分享者 ⚕️ 感谢各位大佬 点赞 收藏⭐ 留言 加关注✅! ⚕️ 收录于专栏threejs gis工程师 文章目录 一、前言1.1 ☘️THREE.MeshPhongMaterial高光材质1.2 ☘️specularMap 高光贴图 二、使用specularMap设置高光贴图1. ☘️实现思路2. ☘️代码样例 一、前言
本文详细介绍如何基于threejs在三维场景中使用specularMap设置高光贴图亲测可用。希望能帮助到您。一起学习加油加油
1.1 ☘️THREE.MeshPhongMaterial高光材质
THREE.MeshPhongMaterial 是 Three.js 中的一种材质类型用于模拟物体表面的光照效果包括漫反射diffuse和镜面反射specular。这种材质遵循 Phong 反射模型可以模拟出光滑表面的高光效果因此非常适合用来渲染金属、塑料、瓷器等具有光泽表面的物体。 常用属性 THREE.MeshPhongMaterial 继承自 THREE.Material并具有一些特定的属性可以用来控制材质的外观
color材质的基本颜色默认为白色0xffffff。可以是一个整数表示十六进制颜色值。 map基础颜色贴图可以用来替代材质的颜色。可以是一个 THREE.Texture 对象。 alphaMap透明度贴图可以用来定义材质的透明度。可以是一个 THREE.Texture 对象。 emissive自发光颜色默认为黑色0x000000。即使在没有光源的情况下也会显示这个颜色。 emissiveMap自发光贴图可以用来定义自发光的颜色。可以是一个 THREE.Texture 对象。 specular高光颜色默认为白色0x111111。高光颜色定义了镜面反射的颜色。 shininess高光强度默认为 30。高光强度定义了高光区域的锐度数值越高高光越集中。 opacity材质的全局透明度默认为 1不透明。 transparent是否开启透明模式默认为 false。如果设置为 true则需要设置 opacity 或者使用 alphaMap。 side指定材质在哪一面渲染可以是 THREE.FrontSide正面、THREE.BackSide背面或 THREE.DoubleSide双面。 wireframe是否启用线框模式默认为 false。 visible是否渲染该材质默认为 true。 depthTest是否进行深度测试默认为 true。 depthWrite是否写入深度缓冲区默认为 true。 blending混合模式默认为 THREE.NormalBlending。可以设置为 THREE.AdditiveBlending、THREE.SubtractiveBlending 等。 vertexColors是否启用顶点颜色默认为 THREE.NoColors。可以设置为 THREE.VertexBasicColors、THREE.VertexColors 或 THREE.FaceColors。 flatShading是否使用平滑着色默认为 false。如果设置为 true则每个面片都将使用平均法线。 envMap环境贴图可以用来模拟环境光照。可以是一个 THREE.Texture 对象。 reflectivity环境光反射率默认为 1。 refractionRatio折射率默认为 0.98。 combine环境贴图的组合方式默认为 THREE.MixOperation。 bumpMap凹凸贴图可以用来模拟表面细节。可以是一个 THREE.Texture 对象。 bumpScale凹凸贴图的比例默认为 1。 normalMap法线贴图可以用来模拟表面细节。可以是一个 THREE.Texture 对象。 normalScale法线贴图的比例默认为 Vector2(1, 1)。 displacementMap置换贴图可以用来改变表面的高度。可以是一个 THREE.Texture 对象。 displacementScale置换贴图的比例默认为 1。 displacementBias置换贴图的偏移默认为 0。
1.2 ☘️specularMap 高光贴图
高光贴图用于控制物体表面的高光部分即那些直接反射光源光线的区域。它通常是一张灰度图其中亮部表示强反射区域暗部表示弱反射或非反射区域。这使得材质的高光效果可以在不同区域有所不同增加了视觉上的复杂度和真实感。 使用高光贴图的原因 高光网格材质MeshPhongMaterial具有高光属性.specular,如果一个网格模型Mesh都是相同的材质并且表面粗糙度相同,或者说网格模型外表面所有不同区域的镜面反射能力相同可以直接设置材质的高光属性.specular。如果一个网格模型表示一个人那么人的不同部位高光程度是不同的不可能直接通过.specular属性来描述在这种情况通过高光贴图.specularMap的RGB值来描述不同区域镜面反射的能力.specularMap和颜色贴图.Map一样和通过UV坐标映射到模型表面。高光贴图.specularMap不同区域像素值不同表示网格模型不同区域的高光值不同。
二、使用specularMap设置高光贴图
1. ☘️实现思路
1、初始化renderer渲染器2、初始化Scene三维场景3、初始化camera相机定义相机位置 camera.position.set设置相机方向camera.lookAt4、初始化THREE.AmbientLight环境光源scene场景加入环境光源初始化THREE.DirectionalLight平行光源设置平行光源位置设置平行光源投影scene添加平行光源。5、加载几何模型创建THREE.AxesHelper坐标辅助工具helperscene场景中加入helper。创建THREE.SphereGeometry球体几何体geometry创建THREE.MeshPhongMaterial高光材质materialmaterial设置specularMap高光贴图、颜色和光照强度传入geometry和material创建THREE.Mesh网格对象earthscene中加入earth。6、加入gui控制material加入正常贴图、法线贴图具体实现看下面代码样例、controls控制加入stats监控器监控帧数信息。
2. ☘️代码样例
!DOCTYPE html
html langen
headmeta charsetUTF-8titlelearn57(使用 SPECULARMAP 设置高光贴图)/titlescript srclib/threejs/127/three.js-master/build/three.js/scriptscript srclib/threejs/127/three.js-master/examples/js/controls/OrbitControls.js/scriptscript srclib/threejs/127/three.js-master/examples/js/libs/stats.min.js/scriptscript srclib/threejs/127/three.js-master/examples/js/libs/dat.gui.min.js/scriptscript srclib/js/Detector.js/script
/head
style typetext/csshtml, body {margin: 0;height: 100%;}canvas {display: block;}
/style
body onloaddraw()/body
scriptvar renderer, camera, scene, gui, light, stats, controls, earth, materialvar initRender () {renderer new THREE.WebGLRenderer({antialias: true})renderer.setSize(window.innerWidth, window.innerHeight)renderer.setPixelRatio(window.devicePixelRatio)renderer.shadowMap.enabled truerenderer.setClearColor(0xeeeeee)document.body.appendChild(renderer.domElement)}var initCamera () {camera new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200)camera.position.set(0, 12, 15)}var initScene () {var cubeTextureLoader new THREE.CubeTextureLoader()cubeTextureLoader.setPath(data/texture/skybox/space/)var cubeTexture cubeTextureLoader.load([right.jpg, left.jpg,top.jpg, bottom.jpg,front.jpg, back.jpg])scene new THREE.Scene()scene.background cubeTexture}var initGui () {gui {addTexture: () {material.map new THREE.TextureLoader().load(data/texture/earth/earth_atmos_2048.jpg)material.needsUpdate true},addNormal: () {material.normalMap new THREE.TextureLoader().load(data/texture/earth/earth_normal_2048.jpg)material.needsUpdate true},// 高光平滑度shininess: 10}var datGui new dat.GUI()datGui.add(gui, addTexture)datGui.add(gui, addNormal)datGui.add(gui, shininess, 0, 100).onChange(e {material.shininess e})}var initLight () {scene.add(new THREE.AmbientLight(0x444444))light new THREE.DirectionalLight(0xffffff)light.position.set(0, 20, 20)light.castShadow truescene.add(light)}var initModel () {var helper new THREE.AxesHelper(50)scene.add(helper)var geometry new THREE.SphereGeometry(5, 60, 30)material new THREE.MeshPhongMaterial({color: 0x666666})material.specularMap new THREE.TextureLoader().load(data/texture/earth/earth_specular_2048.jpg)material.specular new THREE.Color(0x00ffff)material.shininess 10earth new THREE.Mesh(geometry, material)scene.add(earth)}var initStats () {stats new Stats()document.body.appendChild(stats.dom)}var initControls () {controls new THREE.OrbitControls(camera, renderer.domElement)controls.enableDamping THREEcontrols.autoRotate false}var render () {earth.rotation.y 0.01renderer.render(scene, camera)}var onWindowResize () {camera.aspect window.innerWidth / window.innerHeightcamera.updateProjectionMatrix()renderer.setSize(window.innerWidth, window.innerHeight)}var animate () {render()stats.update()controls.update()requestAnimationFrame(animate)}var draw () {if (!Detector.webgl) Detector.addGetWebGLMessage()initGui()initRender()initScene()initCamera()initLight()initModel()initStats()initControls()animate()window.onresize onWindowResize}
/script
/html效果如下
