THREE.js(二):设置材质线条宽度(lineWidth) 无效

问题:项目在使用线模型  Line 对应线材质LineBasicMaterial 的线宽属性.lineWidth,是无效果的,官网给出的解释如下:

可以通过 Line2 方式解决:

/** 添加线条宽度测试*/
private addLineTestCode(): void {
      
        // 1. 赋值空间点坐标,三个一组
        var pointArr = [0, 0, 0, 0, 10, 0];
           
        // 2. 创建 LineGeometry,并设置空间点
        var geometry = new LineGeometry();
        geometry.setPositions(pointArr);
        // 3. 创建 LineMaterial,设置颜色和线宽
        var material = new LineMaterial({
            color: 0xff0000,
            linewidth: 15
        })
        // 4. 设置材质分辨率
        material.resolution.set(window.innerWidth, window.innerHeight);
        // 5. 创建 Line2
        var line = new Line2(geometry, material);
        // 6. 计算下线条长度
        line.computeLineDistances();
        // 7. 添加到场景
        this.scene.add(line)
    }

运行代码可以看到:

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
three.js 中,要绘制线条,可以使用 THREE.LineTHREE.LineSegments 对象。以下是一个简单的例子: ```javascript // 创建一个几何体,包含两个点 var geometry = new THREE.Geometry(); geometry.vertices.push(new THREE.Vector3(-10, 0, 0)); // 第一个点坐标 geometry.vertices.push(new THREE.Vector3(10, 0, 0)); // 第个点坐标 // 创建一个材质设置线条的颜色和宽度 var material = new THREE.LineBasicMaterial({ color: 0xff0000, // 红色 linewidth: 2, // 线条宽度 }); // 创建线条对象 var line = new THREE.Line(geometry, material); // 将线条添加到场景中 scene.add(line); ``` 上面的代码创建了一个由两个点组成的线条,颜色为红色,宽度为 2。 如果想要绘制多条线段,可以使用 THREE.LineSegments 对象。和 THREE.Line 不同的是,THREE.LineSegments 中的每两个相邻的顶点都会被视为一条线段,因此需要提供一个 indices 数组来指定哪些顶点应该被组合成线段。 下面是一个绘制多条线段的例子: ```javascript // 创建一个几何体,包含多个点 var geometry = new THREE.Geometry(); geometry.vertices.push(new THREE.Vector3(-10, 0, 0)); geometry.vertices.push(new THREE.Vector3(-5, 5, 0)); geometry.vertices.push(new THREE.Vector3(0, 0, 0)); geometry.vertices.push(new THREE.Vector3(5, -5, 0)); geometry.vertices.push(new THREE.Vector3(10, 0, 0)); // 指定哪些顶点应该被组合成线段 geometry.setIndex([0, 1, 1, 2, 2, 3, 3, 4]); // 创建一个材质设置线条的颜色和宽度 var material = new THREE.LineBasicMaterial({ color: 0x00ff00, // 绿色 linewidth: 2, // 线条宽度 }); // 创建线段对象 var lineSegments = new THREE.LineSegments(geometry, material); // 将线段添加到场景中 scene.add(lineSegments); ``` 上面的代码创建了由多个点组成的线段,颜色为绿色,宽度为 2。其中,indices 数组指定了哪些顶点应该被组合成线段。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值