devbox
小小林熬夜学编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

three.js之材质_meshphongmaterial

作者：小小林熬夜学编程 | 2024-02-16 18:27:15

赞

踩

meshphongmaterial

文章目录

专栏目录请点击

简介

  • 所谓材质，就是平常我们所说的塑料材质，金属材质，纤维材质等
  • 实质上所有材质都是WebGL着色器代码的封装

常用材质

  1. 点材质:PointsMaterial
  2. 线材质
    1. LineBasicMaterial:线基础材质
    2. LineDashedMaterial:虚线材质
  3. 网格材质
    1. MeshBasicMaterial:网格基础材质
    2. MeshLambertMaterial:网格Lambert材质,暗淡、漫反射
    3. MeshPhongMaterial:网格Phong材质,高亮表面、镜面反射
    4. PBR材质,比MeshPhongMaterial效果更好
      1. MeshStandardMaterial
      2. MeshPhysicalMaterial
    5. MeshDepthMaterial:网格深度材质
    6. MeshNormalMaterial:网格法向量材质
  4. 精灵Sprite材质:SpriteMaterial
  5. 自定义着色器材质
    1. RawShaderMaterial
    2. ShaderMaterial

点材质

点材质一般是点模型来进行使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        body {
            margin: 0;
            overflow: hidden;
            /* 隐藏body窗口区域滚动条 */
        }
    </style>
    <!--引入three.js三维引擎-->
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
    <!-- 引入threejs扩展控件OrbitControls.js -->
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/controls/OrbitControls.js"></script>
</head>

<body>
    <script>
        /**
         * 创建场景对象Scene
         */
        var scene = new THREE.Scene();
        /**
         * 创建网格模型
         */
        var geometry = new THREE.SphereGeometry(100, 25, 25); //创建一个球体几何对象
        // 创建一个点材质对象
        var material = new THREE.PointsMaterial({
            color: 0x0000ff, //颜色
            size: 3, //点渲染尺寸
        });
        //点模型对象  参数：几何体  点材质
        var point = new THREE.Points(geometry, material);
        scene.add(point); //网格模型添加到场景中
        /**
         * 光源设置
         */
        //点光源
        var point = new THREE.PointLight(0xffffff);
        point.position.set(400, 200, 300); //点光源位置
        scene.add(point); //点光源添加到场景中
        //环境光
        var ambient = new THREE.AmbientLight(0x444444);
        scene.add(ambient);
        /**
         * 相机设置
         */
        var width = window.innerWidth; //窗口宽度
        var height = window.innerHeight; //窗口高度
        var k = width / height; //窗口宽高比
        var s = 150; //三维场景显示范围控制系数，系数越大，显示的范围越大
        //创建相机对象
        var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
        camera.position.set(200, 300, 200); //设置相机位置
        camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
        /**
         * 创建渲染器对象
         */
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height); //设置渲染区域尺寸
        renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
        document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

        // 渲染函数
        function render() {
            renderer.render(scene, camera); //执行渲染操作
        }
        render();
        //创建控件对象  相机对象camera作为参数   控件可以监听鼠标的变化，改变相机对象的属性
        var controls = new THREE.OrbitControls(camera, renderer.domElement);
        //监听鼠标事件，触发渲染函数，更新canvas画布渲染效果
        controls.addEventListener('change', render);
    </script>
</body>

</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

渲染如下
在这里插入图片描述

  1. 因为我们用来球模型，然后用点的材质来进行装饰，所以渲染出来的样子是这个样子的
var geometry = new THREE.SphereGeometry(100, 25, 25); //创建一个球体几何对象
// 创建一个点材质对象
var material = new THREE.PointsMaterial({
    color: 0x0000ff, //颜色
    size: 3, //点渲染尺寸
});
//点模型对象  参数：几何体  点材质
var point = new THREE.Points(geometry, material);
scene.add(point); //网格模型添加到场景中

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

线材质

一般用到线模型(也就是Line等线模型)的时候会用到线材质

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <style>
    body {
      margin: 0;
      overflow: hidden;
      /* 隐藏body窗口区域滚动条 */
    }
  </style>
  <!--引入three.js三维引擎-->
  <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
  <!-- 引入threejs扩展控件OrbitControls.js -->
  <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/controls/OrbitControls.js"></script>
</head>

<body>
  <script>
    /**
     * 创建场景对象Scene
     */
    var scene = new THREE.Scene();
    /**
     * 创建网格模型
     */
     var geometry = new THREE.BoxGeometry(100, 100, 100);//立方体几何体
     // var geometry = new THREE.SphereGeometry(100, 25, 25);//立方体几何体
     // 直线基础材质对象
     // var material = new THREE.LineBasicMaterial({
     //   color: 0x0000ff
     // });
     // 虚线材质对象：产生虚线效果
     var material = new THREE.LineDashedMaterial({
       color: 0x0000ff,
       dashSize: 10,//显示线段的大小。默认为3。
       gapSize: 5,//间隙的大小。默认为1
     });
     var line = new THREE.Line(geometry, material); //线模型对象
     //  computeLineDistances方法  计算LineDashedMaterial所需的距离数组
     line.computeLineDistances();
     scene.add(line); //点模型添加到场景中
    /**
     * 光源设置
     */
    //点光源
    var point = new THREE.PointLight(0xffffff);
    point.position.set(400, 200, 300); //点光源位置
    scene.add(point); //点光源添加到场景中
    //环境光
    var ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient);
    /**
     * 相机设置
     */
    var width = window.innerWidth; //窗口宽度
    var height = window.innerHeight; //窗口高度
    var k = width / height; //窗口宽高比
    var s = 150; //三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(200, 300, 200); //设置相机位置
    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
    /**
     * 创建渲染器对象
     */
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height); //设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

    // 渲染函数
    function render() {
      renderer.render(scene, camera); //执行渲染操作
    }
    render();
    //创建控件对象  相机对象camera作为参数   控件可以监听鼠标的变化，改变相机对象的属性
    var controls = new THREE.OrbitControls(camera,renderer.domElement);
    //监听鼠标事件，触发渲染函数，更新canvas画布渲染效果
    controls.addEventListener('change', render);
  </script>
</body>

</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

渲染如下

在这里插入图片描述
如果我们换成实线材质，那么渲染就如下

var material = new THREE.LineBasicMaterial({
       color: 0x0000ff
});

  • 1
  • 2
  • 3

在这里插入图片描述

网格模型

在three.js中提供的网格类材质比较多，我们先大致了解一下

  1. 基础网格材质MeshBasicMaterial，不受由方向光源影响，没有棱角感
var material = new THREE.MeshBasicMaterial({
  color: 0x0000ff,
})

  • 1
  • 2
  • 3

在这里插入图片描述

  1. MeshLambertMaterial材质可以实现网格Mesh表面与光源的漫反射光照计算，有了光照计算，物体表面就会产生棱角感
var material = new THREE.MeshLambertMaterial({
  color: 0x00ff00,
});

  • 1
  • 2
  • 3

在这里插入图片描述

  1. MeshPhongMaterial和MeshLambertMaterial相同可以实现光源和网格表面的漫反射的光照计算，还可以产生高光效果
var material = new THREE.MeshPhongMaterial({
  color: 0xff0000,
  specular:0x444444,//高光部分的颜色
  shininess:20,//高光部分的亮度，默认30
});

  • 1
  • 2
  • 3
  • 4
  • 5

在这里插入图片描述

材质和模型的对应关系

  1. 点材质 点模型Points
  2. 线材质 线条类型的模型
    1. Line
    2. LineLoop
    3. LineSegments
  3. 网格材质
    1. 网格模型:Mesh
    2. 骨骼模型:SkinnedMesh
  4. 精灵材质 精灵模型:Sprite

属性

公有属性

所有材质的基类都是Material 点击

  • 只要是Material 的属性，那么他其他的材质对象，他都会有
  • 除公有属性之外，不同类型的属性也会有各自的私有属性

side

这就是一个公有属性:定义将要渲染哪一面 - 正面，背面或两者都渲染

  • 矩形平面plangegeometry的网络模型插入场景后看不到，一个球体或立方体网格模型如何正面显示，背面不显示，都可以通过.side属性来进行设置

opacity

  • 通过opacity属性可以设置材质的透明度，他的范围是0.0~1.0之间，其中0表示完全透明，1表示完全不透明
  • 使用当前属性的时候，一般要需要设置材质属性transparent为true，如果没有设置为true，材质会保持完全不透明的状态

私有属性

  1. 点材质有自己特有的属性size
  2. 高光材质特有的高光颜色属性specular等
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/96094
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号