Three.js - 设置高光贴图

最新推荐文章于 2024-05-27 09:11:29 发布

「已注销」

最新推荐文章于 2024-05-27 09:11:29 发布

阅读量3.8k

点赞数

分类专栏： threejs

本文链接：https://blog.csdn.net/ithanmang/article/details/82464129

版权

通过高光贴图可以实现部分区域反光，像素值为白色的地方会发光，黑色的不会反光，高光的颜色默认为灰黑色。

1、示例

示例
https://ithanmang.gitee.io/threejs/home/201809/20180906/02-specular-texture.html
效果
这里写图片描述
可以通过调节颜色，来让海洋反射出不同的色彩

2、实现步骤

2.1、设置材质的`specularMap`属性

加载进来的是一张黑白图，白色的会反光黑色部分不会反光.

material.specularMap = new THREE.TextureLoader().load('../../textures/planets/EarthSpec.png')；

这里写图片描述

2.2、设置，高光的颜色`specular`

material.specular = new THREE.Color(0x3366ff);

2.3、设置`shininess`

shininess是高光的反光度，默认值为30，值越大，反光点越集中

material.shininess = 2;

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

最低0.47元/天解锁文章

「已注销」

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Three.js - 设置高光贴图

通过高光贴图可以实现部分区域反光，像素值为白色的地方会发光，黑色的不会反光，高光的颜色默认为灰黑色。1、示例示例 http://www.ithanmang.com/threeJs/home/201809/20180906/02-specular-texture.html 效果可以通过调节颜色，来让海洋反射出不同的色彩2、实现步骤2.1、设置材质的specularMa...
复制链接

扫一扫