案例查看地址：http://www.wjceo.com/blog/threejs/2018-05-03/160.html

简介

我们可以通过设置高光贴图来实现部分区域反光。通过设置高光贴图，我们会发现，只有海洋部分会有发光，而陆地部分没有高光的效果。
一般来讲，像素的值越高（从黑到白），物体表面就越亮。通常高光贴图会与specular属性一起使用，该属性可以用来决定反光的颜色。

案例实现

我们创建一个球体，然后设置materila.specularMap的高光贴图：

//添加地球
var geometry = new THREE.SphereGeometry(5, 60, 30);
material = new THREE.MeshPhongMaterial({color:0x666666
});//添加高光贴图
material.specularMap = new THREE.TextureLoader().load("/lib/textures/planets/earth_specular_2048.jpg");

然后设置反光颜色为0x00ffff：

//添加高光颜色
material.specular = new THREE.Color(0x00ffff);

最后，又设置了高光的平滑度，这个可以根据需求效果修改：

//添加高光的平滑度，默认为30，值越高越强烈
material.shininess = 10;

我们又在gui里面通过事件可以将map和normalMap添加查看效果：

gui = {addTexture:function () {//添加平面贴图material.map = new THREE.TextureLoader().load("/lib/textures/planets/earth_atmos_2048.jpg");material.needsUpdate = true;},addNormal:function () {//添加法向量纹理material.normalMap = new THREE.TextureLoader().load("/lib/textures/planets/earth_normal_2048.jpg");material.needsUpdate = true;},shininess:10
};

案例代码


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Threejs使用高光贴图</title><style type="text/css">html, body {margin: 0;height: 100%;}canvas {display: block;}</style>
</head><body onload="draw();">
</body>
<script src="https://cdn.bootcss.com/three.js/91/three.min.js"></script>
<script src="/lib/js/controls/OrbitControls.js"></script>
<script src="https://cdn.bootcss.com/stats.js/r17/Stats.min.js"></script>
<script src="https://cdn.bootcss.com/dat-gui/0.7.1/dat.gui.min.js"></script>
<script src="/lib/js/Detector.js"></script><script>var renderer, camera, scene, gui, light, stats, controls, earth, material;function initRender() {renderer = new THREE.WebGLRenderer({antialias: true});renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth, window.innerHeight);renderer.setClearColor(0xeeeeee);renderer.shadowMap.enabled = true;//告诉渲染器需要阴影效果document.body.appendChild(renderer.domElement);}function initCamera() {camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200);camera.position.set(0, 12, 15 );//CubeCamera（near：Number，far：Number，cubeResolution：Number）//近 - 近裁剪距离。//远 - 裁剪距离//cubeResolution - 设置立方体边缘的长度。//可以通过renderTarget对象获取生成的立方体纹理。//创建一个获取环境贴图的cubeCameracubeCamera = new THREE.CubeCamera(0.1, 1000, 256);scene.add(cubeCamera);}function initScene() {//给场景添加天空盒子纹理var cubeTextureLoader = new THREE.CubeTextureLoader();cubeTextureLoader.setPath( '/lib/textures/cube/space/' );//六张图片分别是朝前的（posz）、朝后的（negz）、朝上的（posy）、朝下的（negy）、朝右的（posx）和朝左的（negx）。var cubeTexture = cubeTextureLoader.load( ['right.jpg', 'left.jpg','top.jpg', 'bottom.jpg','front.jpg', 'back.jpg'] );scene = new THREE.Scene();scene.background = cubeTexture;}//初始化dat.GUI简化试验流程function initGui() {//声明一个保存需求修改的相关数据的对象gui = {addTexture:function () {//添加平面贴图material.map = new THREE.TextureLoader().load("/lib/textures/planets/earth_atmos_2048.jpg");material.needsUpdate = true;},addNormal:function () {//添加法向量纹理material.normalMap = new THREE.TextureLoader().load("/lib/textures/planets/earth_normal_2048.jpg");material.needsUpdate = true;},shininess:10};var datGui = new dat.GUI();//将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）datGui.add(gui, "addTexture");datGui.add(gui, "addNormal");datGui.add(gui, "shininess", 0, 100).onChange(function (e) {material.shininess = e;});}function initLight() {scene.add(new THREE.AmbientLight(0x444444));light = new THREE.DirectionalLight(0xffffff);light.position.set(0, 20, 20 );light.castShadow = true;light.shadow.camera.top = 10;light.shadow.camera.bottom = -10;light.shadow.camera.left = -10;light.shadow.camera.right = 10;//告诉平行光需要开启阴影投射light.castShadow = true;scene.add(light);}function 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("/lib/textures/planets/earth_specular_2048.jpg");//添加高光颜色material.specular = new THREE.Color(0x00ffff);//添加高光的平滑度，默认为30，值越高越强烈material.shininess = 10;//添加到场景earth = new THREE.Mesh(geometry, material);scene.add(earth);}//初始化性能插件function initStats() {stats = new Stats();document.body.appendChild(stats.dom);}function initControls() {controls = new THREE.OrbitControls(camera, renderer.domElement);//设置控制器的中心点//controls.target.set( 0, 5, 0 );// 如果使用animate方法时，将此函数删除//controls.addEventListener( 'change', render );// 使动画循环使用时阻尼或自转 意思是否有惯性controls.enableDamping = true;//动态阻尼系数 就是鼠标拖拽旋转灵敏度//controls.dampingFactor = 0.25;//是否可以缩放controls.enableZoom = true;//是否自动旋转controls.autoRotate = false;controls.autoRotateSpeed = 0.5;//设置相机距离原点的最远距离controls.minDistance = 1;//设置相机距离原点的最远距离controls.maxDistance = 2000;//是否开启右键拖拽controls.enablePan = true;}function render() {//让地球自转earth.rotation.y += 0.01;}//窗口变动触发的函数function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);}function animate() {//更新控制器render();//更新性能插件stats.update();controls.update();renderer.render(scene, camera);requestAnimationFrame(animate);}function draw() {//兼容性判断if (!Detector.webgl) Detector.addGetWebGLMessage();initGui();initRender();initScene();initCamera();initLight();initModel();initControls();initStats();animate();window.onresize = onWindowResize;}</script>
</html>

97 Three.js 使用 specularMap 设置高光贴图相关推荐

Three.js高光贴图(.specularMap)
Three.js高光贴图(.specularMap) 高光材质MeshPhongMaterial具有高光属性.specular,如果一个网格模型Mesh都是相同的材质,可以使用.specular属性设 ...
微信小程序首页index.js获取不到app.js中动态设置的globalData的原因以及解决方法
微信小程序首页index.js获取不到app.js中动态设置的globalData的原因以及解决方法参考文章: (1)微信小程序首页index.js获取不到app.js中动态设置的globalDat ...
用JS来动态设置CSS样式
常见的有以下几种 1. 直接设置style的属性某些情况用这个设置 !important值无效如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保留 - 号,就中括号的形式 ...
通过js获取PHP设置的cookie（全实例讲解）
制作网页我们通常都要做一个登陆界面,如果对于不是安全性要求很高的网站,这个登录界面我我们当然不希望频繁输入账户密码来验证身份,我们想要的是只要一次验证,就可以长时间保持登陆状态. session虽然可 ...
JavaScript(JS) 浏览器中设置启用或禁用
所有的现代浏览器都内置了对JavaScript的支持.通常,可能需要手动启用或禁用此支持.本章介绍在浏览器中启用和禁用JavaScript支持的过程:Internet Explorer.Firefox ...
用JS来动态设置CSS样式的八种方式
转自:微点阅读 https://www.weidianyuedu.com 用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性某些情况用这个设置 !important值无 ...
js批量操作html标签,js setattribute批量设置css样式的方法
我们在开发程序的时候都会出现要变换样式的情况,今天爱站技术频道就为大家简单介绍js setattribute批量设置css样式的方法,希望对你学习这方面知识有帮助! firefox等可以使用 var ...
怎么用JS来动态设置CSS样式
用JS来动态设置CSS样式,常见的有以下几种: 1. 直接设置style的属性某些情况用这个设置 !important值无效如果属性有"-"号,就写成驼峰的形式(如textAl ...
html jq固定div高度,js/jQuery获取/设置div的高度，宽度···
js/jQuery获取/设置html标签的高度等css属性· $(".out-div").height($(window).height() - $("#topDiv&q ...
js本地存储设置有效时长
js本地缓存设置有效时间以下举例为小程序(浏览器.vue.uniapp等都适用) 如需在其他环境下使用,对代码稍加修改就好(储存的写法). 用户进入这个页面后第一次去获取数据,然后存下处理好的数据和 ...

97 Three.js 使用 specularMap 设置高光贴图

简介

案例实现

案例代码

97 Three.js 使用 specularMap 设置高光贴图相关推荐

最新文章

热门文章