Three.js - 线段几何体材质

最新推荐文章于 2024-02-16 16:41:19 发布

「已注销」

最新推荐文章于 2024-02-16 16:41:19 发布

阅读量968

点赞数 1

分类专栏： threejs

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

版权

线段几何体材质，分为LineBasicMaterial和LineDashedMaterial，线段上只有顶点没有面。

LineBasicMaterial：通过线段基础材质，可以设置线段的颜色、宽度和连接点。
LineDashedMaterial：虚线材质的基本属性跟基础线段材质一样，但是可以指定短划线的和间距空格的长度。

示例：https://ithanmang.gitee.io/threejs/home/201808/20180808/01-LineBasicMaterial.html

LineBasicMaterial 属性

名称	描述
color	指定线框的颜色默认为白色，如果指定vertexColors，这个属性会被忽略
linewidth	指定线框的宽度，默认为1，在`WebGLRenderer`不支持该属性
linecap	线框端点形状，属于2D画布lineCap属性，它被WebGL渲染器忽略
linejoin	线框节点外观，属于2D画布lineCap属性，它被WebGL渲染器忽略

LineDashedMaterial 属性

lineDashedMaterial除了与LineBasicMaterial有一样的属性外，还具有几个额外的属性。

名称	描述
dashSize	虚线的长度，默认为3
gapSize	中间缝隙的大小，默认为1
scale	虚线的缩放比例，默认为1，若这个值小于1dashSize和gapSize就会增大，小于1则变小

注意：虚线材质，需要计算线段之间的距离，所以需要添加这行代码 lines.computeLineDistances()，否则显示的是实线。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LineBasicMaterial 和 LineDashedMaterial 线段几何材质</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, lines, controls, guiControls;

    /* 场景 */
    function initScene() {
   

        scene = new THREE.Scene();

    }

    /* 相机 */
    function initCamera() {
   

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

最低0.47元/天解锁文章

「已注销」

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Three.js - 线段几何体材质

线段几何体材质，分为LineBasicMaterial和LineDashedMaterial，线段上只有顶点没有面。LineBasicMaterial：通过线段基础材质，可以设置线段的颜色、宽度和连接点。 LineDashedMaterial：虚线材质的基本属性跟基础线段材质一样，但是可以指定短划线的和间距空格的长度。示例：01-LineMaterial.htmlLineBasi...
复制链接

扫一扫