Threejs 设置线条宽度(lineWidth) 无效问题

在编写Three.js的时候，设置线模型Line对应线材质LineBasicMaterial的线宽属性lineWidth，是无效的。官方解释

Due to limitations of the OpenGL Core Profile with the WebGL renderer on most platforms linewidth will always be 1 regardless of the set value.

即由于opengl核心库文件的限制，webgl渲染器在大部分平台上linewidth一直是1，无视你设置的值；

这里通过Line2方式解决(亲测可用)

1 导入相关包

import * as THREE from 'three'
import OrbitControls from 'three-orbitcontrols'
import { Line2 } from 'three/examples/jsm/lines/Line2'
import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry'
import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial'

2 创建线条模型

var geometry = new LineGeometry()
var pointArr = [-100, 0, 0,-100, 100, 0]
geometry.setPositions(pointArr)
var material = new LineMaterial({color: "red",linewidth: 15})
material.resolution.set(window.innerWidth, window.innerHeight)
var line = new Line2(geometry, material)
line.computeLineDistances()
scene.add(line)

Threejs 设置线条宽度(lineWidth) 无效问题相关推荐

gnuplot绘图程序中对线型(linetype)、点型(pointtype)、线条宽度(linewidth)、点大小(pointsize)、图样
作者:magj77 原作网址:http://blog.sina.com.cn/s/blog_6a5f098201013tvb.html 在NS2的gnuplot绘图程序中对线型(linetype).点 ...
wsm在html中设置td高度无效,td为什么设置了宽度却无效
如下图所示,我对td设置了196px,结果computed显示的却是233px. 百度说什么对table设置如下,也不起作用~~ border-collapse: collapse; border-s ...
matlab设置线条颜色宽度线型
matlab设置线条颜色宽度线型 2010-11-02 14:03 多组变量绘图:plot(x1, y1, 选项1, x2, y2, 选项2, --) 上面的plot格式中,选项是指为了区分多条画出曲 ...
html5点线的设置,html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点...
如果你还不知道canvas是什么,可以看看. 在学画画的时候,线条是最基本的了,而线条的连接可以组成任何图形.在canvas中也是如此. 在开始之前我们先拿出画布和画笔: 复制代码代码如下: var ...
php网页制作添加线条,html5Canvas实现画直线与设置线条的样式-
这篇文章主要介绍了关于html5 Canvas实现画直线与设置线条的样式,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下在学画画的时候,线条是最基本的了,而线条的连接可以组成任何图形. ...
php 画直线,html5 Canvas实现画直线与设置线条的样式
这篇文章主要介绍了关于html5 Canvas实现画直线与设置线条的样式,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下在学画画的时候,线条是最基本的了,而线条的连接可以组成任何图形. ...
在html5绘制直线的两个方法,html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点...
如果你还不知道Canvas是什么,可以看看上一篇. 在学画画的时候,线条是最基本的了,而线条的连接可以组成任何图形.在Canvas中也是如此. 在开始之前我们先拿出画布和画笔: 复制代码代码如下: v ...
[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)
上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...
R语言使用dplyr聚合统计分组数据、ggplot2可视化分组线图、使用geom_line函数自定义设置线条类型、粗细、颜色(Change line types + colors by groups)
R语言ggplot2可视化分组线图.使用geom_line函数自定义设置线条类型.宽度(粗细.).颜色(Change line types by groups.Change line types + ...
table设置列宽度
遇到一个表格不能设置宽度(table有宽度,有一两列需要设固定大小的宽度并希望看到展现出来的宽度值与设定的一样,其他的列则可以根据剩余宽度自动填充,但是显示出来的宽度比实际设置的值多了几个像素)这个问 ...

Threejs 设置线条宽度(lineWidth) 无效问题

1 导入相关包

2 创建线条模型

Threejs 设置线条宽度(lineWidth) 无效问题相关推荐

最新文章

热门文章