Three.js - MeshPhongMaterial 用于光亮表面的材质

作者：凡人多烦事01 | 2024-02-16 18:26:35

踩

meshphongmaterial

该材料使用非基于物理的Blinn-Phong模型来计算反射系数。与在MeshLambertMaterial中使用的Lambertian模型不同，它可以模拟带有高光的闪亮表面（如漆木）。
示例：https://ithanmang.gitee.io/threejs/home/201808/20180807/02-meshPhongMaterial.html

属性

名称	描述
color	材料的颜色，默认为白色
emissive	材质本身发出的颜色，不受其它光照影响，默认为黑色
shininess	光滑度，指定高光部分的亮度，默认值为30
specular	材料高光部分的颜色，默认值为`0x111111`深灰色，如果把它的颜色设置为跟`color`颜色一样的话，会得到类似金属一样的材质，设置成灰色，则看起来更像塑料

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MeshPhongMaterial 用于光亮表面的材质</title>
    <style>
        body {
   
            margin: 0;
            overflow: hidden; /*溢出隐藏*/
        }
    </style>
    <script src="../../libs/build/three-r93.min.js"></script>
    <script src="../../libs/examples/js/controls/OrbitControls.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="../../libs/examples/js/Detector.js"></script>
</head>
<body>
<script>

    let stats = initStats();
    let scene, camera, renderer, controls, guiControls;
    let directionalLightHelper;

    // 场景
    function initScene() {
   

        scene = new THREE.Scene();
        scene.background = new THREE.Color(0xB0E2FF);
        scene.fog = new THREE.Fog(scene.background, 1, 5000);
    }

    // 相机
    function initCamera() {
   

        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 5000);
        camera.position.set(0, 0, 250);
        camera.lookAt(new THREE.Vector3(0, 0, 0));

    }

    // 渲染器
    function initRenderer() {
   

        renderer = new THREE.WebGLRenderer({
   antialias
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/96086