37 Three.js高级材质THREE.MeshPhongMaterial_three meshphongmaterial 为黑色

作者：Monodyee | 2024-02-16 18:27:35

踩

three meshphongmaterial 为黑色

前言

快乐度过了愉快了国庆，感觉自己浪费了很多时间，但是却感觉很值。然后再看一下钱包，发现激发了很大的学习的热情。我的笔记会一直更新，也希望自己的笔记能够帮助更多的人。

简介

通过THREE.MeshPhongMaterial，可以创建一种光亮的材质。与MeshLambertMaterial中使用的Lambertian模型不同，它可以模拟具有镜面高光的光泽表面（如上漆木材）。

名称	描述
ambient	这是材质的环境色。它与上一章讲过的环境光源一起使用。这个颜色会与环境光源提供的颜色相乘。默认值为白色
emissive	这是该材质发射的颜色。它其实并不想一个光源，只是一种纯粹的、不受其他光照影响的颜色。默认值为黑色。
specular	该属性指定该材质的光亮程度及高光部分的颜色。如果将它设置成与color属性相同的颜色，将会得到一个更加类似金属的材质。如果将它设置成灰色（grey），材质将变得更像塑料
shininess	该属性指定镜面高光部分的亮度。默认值为30
metal	如果此属性设置为true，Three.js会使用稍微不同的方式计算像素的颜色，以使物体看起来更像金属。要注意的是，这个效果非常小
wrapAround	如果这个属性设置为true，则启动半lambert光照技术。有了它，光下降得更微妙。如果网格有粗糙、黑暗的地区，启用此属性阴影将变得柔和并且分布更加均匀
wrapRGB	当wrapAround属性设置为true时，可以使用THREE.Vector3来控制光下降得速度

简单使用

首先实例化一个THREE.MeshPhongMaterial的实例化对象

        var sphereMaterial = new THREE.MeshPhongMaterial({color:0xeeeeee});1

然后赋值颜色给网格，并将模型添加到场景当中即可

        var sphereGeometry = new THREE.SphereGeometry(10,30,30);
        var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
        scene.add(sphere);1
2
3

使用案例

这里写图片描述

案例查看地址：http://www.wjceo.com/blog/threejs/2018-02-12/39.html

图片截取的质量有问题，但是我们能清楚的看到和MeshLambertMaterial材质的区别，这种材质能够更明显的表现高亮材质的效果。
球体就有高光的亮点，平面模型上面都有高光发光位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        html, body {
            margin: 0;
            height: 100%;
        }

        canvas {
            display: block;
        }

    </style>
</head>
<body onload="draw();">

</body>
<script src="https://johnson2heng.github.io/three.js-demo/lib/three.js"></script>
<script src="https://johnson2heng.github.io/three.js-demo/lib/js/controls/OrbitControls.js"></script>
<script src="https://johnson2heng.github.io/three.js-demo/lib/js/libs/stats.min.js"></script>
<script src="https://johnson2heng.github.io/three.js-demo/lib/js/libs/dat.gui.min.js"></script>
<script>
    var renderer;
    function initRender() {
        renderer = new THREE.WebGLRenderer({antialias: true});
        renderer.setSize(window.innerWidth, window.innerHeight);
        //告诉渲染器需要阴影效果
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 默认的是，没有设置的这个清晰 THREE.PCFShadowMap
        document.body.appendChild(renderer.domElement);
    }

    var camera;
    function initCamera() {
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(0, 40, 100);
        camera.lookAt(new THREE.Vector3(0, 0, 0));
    }

    var scene;
    function initScene() {
        scene = new THREE.Scene();
    }

    //初始化dat.GUI简化试验流程
    var gui;
    function initGui() {
        //声明一个保存需求修改的相关数据的对象
        gui = {
        };
        var datGui = new dat.GUI();
        //将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）
    }

    var ambientLight,directionalLight;
    function initLight() {
        ambientLight = new THREE.AmbientLight("#111111");
        scene.add(ambientLight);

        spotLight = new THREE.PointLight("#ffffff");
        spotLight.position.set(15, 30, 10);

        //告诉平行光需要开启阴影投射
        spotLight.castShadow = true;

        scene.add(spotLight);
    }

    var cube,plane;
    function initModel() {

        //辅助工具
        var helper = new THREE.AxisHelper(10);
        scene.add(helper);

        //球体
        var sphereGeometry = new THREE.SphereGeometry(10,30,30);
        var sphereMaterial = new THREE.MeshPhongMaterial({color:0xeeeeee});
        var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
        sphere.position.set(-20,20,0);

        sphere.castShadow = true;

        scene.add(sphere);

        //立方体
        var cubeGeometry = new THREE.CubeGeometry(10,10,10);

        var cubeMaterial = new THREE.MeshPhongMaterial({color: 0x00ffff});

        cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        cube.position.x = 30;
        cube.position.y = 5;
        cube.position.z = -5;

        //告诉立方体需要投射阴影
        cube.castShadow = true;

        scene.add(cube);

        //底部平面
        var planeGeometry = new THREE.PlaneGeometry(5000, 5000, 20, 20);
        var planeMaterial = new THREE.MeshPhongMaterial({color: 0xaaaaaa});

        plane = new THREE.Mesh(planeGeometry, planeMaterial);
        plane.rotation.x = -0.5 * Math.PI;
        plane.position.y = -0;

        //告诉底部平面需要接收阴影
        plane.receiveShadow = true;

        scene.add(plane);

    }

    //初始化性能插件
    var stats;
    function initStats() {
        stats = new Stats();
        document.body.appendChild(stats.dom);
    }

    //用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放
    var controls;
    function initControls() {

        controls = new THREE.OrbitControls(camera, renderer.domElement);

        // 如果使用animate方法时，将此函数删除
        //controls.addEventListener( 'change', render );
        // 使动画循环使用时阻尼或自转 意思是否有惯性
        controls.enableDamping = true;
        //动态阻尼系数 就是鼠标拖拽旋转灵敏度
        //controls.dampingFactor = 0.25;
        //是否可以缩放
        controls.enableZoom = true;
        //是否自动旋转
        controls.autoRotate = false;
        //设置相机距离原点的最远距离
        controls.minDistance = 50;
        //设置相机距离原点的最远距离
        controls.maxDistance = 200;
        //是否开启右键拖拽
        controls.enablePan = true;
    }

    function render() {
        renderer.render(scene, camera);
    }

    //窗口变动触发的函数
    function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        render();
        renderer.setSize(window.innerWidth, window.innerHeight);

    }

    function animate() {
        //更新控制器
        render();

        //更新性能插件
        stats.update();

        controls.update();

        requestAnimationFrame(animate);
    }

    function draw() {
        initGui();
        initRender();
        initScene();
        initCamera();
        initLight();
        initModel();
        initControls();
        initStats();

        animate();
        window.onresize = onWindowResize;
    }
</script>
</html>
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190

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

37 Three.js高级材质THREE.MeshPhongMaterial_three meshphongmaterial 为黑色

前言

简介

相关属性

简单使用

使用案例