THREE.js开荒小记（二）：无效宽度linewidth的Line 和无效阔threshold的Line2

前两天遇到一个问题，使用 THREE.Line 画出来的线通过属性调整宽度无效。

首先简单介绍一下 THREE.Line 这个类；

这个是在场景中画出线所使用的类，构造函数由2个参数组成：THREE.LineBasicMaterial（材质）、THREE.Geometry（几何体）

简单的说，材质主要控制线的颜色，宽度等；几何体主要控制线段断点的位置等；

line的使用方式：

let geometry = new THREE.Geometry();
geometry.vertices.push(PointsA,PointsB);let material = new THREE.LineBasicMaterial({linewidth: 2,//此处不起效果color: 'red'
});let line = new THREE.Line(geometry, material);
SCENE.add(line2);

所以宽度的问题出在材质上，经过网上一番查找，发现很多人也遇到了相同的问题，给出的解决方案是使用 Line2，

line2的使用方式：

let geometry2 = new THREE.LineGeometry();
var pointArr = [this.model.start.x,this.model.start.y,this.model.start.z,this.model.end.x,this.model.end.y,this.model.end.z]
geometry2.setPositions(pointArr);let material2 = new THREE.LineMaterial({linewidth: 2,color: 'red'
});
material2.resolution.set(window.innerWidth+100,window.innerHeight+100);//这句如果不加宽度仍然无效
let line2 = new THREE.Line2(geometry2, material2);
SCENE.add(line2);

然而事情并没有就此结束……

换用Line2以后又出现了新的问题：原来使用Line的时候,鼠标在很接近线的时候就可以换成手型，但是换成Line2以后必须鼠标在线上时候才能变为手型；

这个问题让我又去看了three里面选中物体的原理。这里简单给大家介绍一下：

three里面有个相机的概念，因为本身我的场景是空间直角坐标系，所以选取物体就有相机镜头向量，鼠标悬停位置，在这2个点之间有条射线，又通过相机属性中的远近2个参数来调节这个问题，最终反映到映射物体的几何体上有个threshold属性来操作这个问题，我们姑且称之为“阔”。现在的问题就变成了如何才能让阔生效。

几经波折，最终在THREE.LineSegments2中找到了问题所在：

var isInside = ssOrigin3.distanceTo( closestPoint ) < lineWidth * 0.5;

上面这行代码中最后返回的值是决定是否判定为悬置状态，其中的ssOrigin3是鼠标位置，closestPoint是几何体到鼠标位置的最近距离的点，ssOrigin3.distanceTo( closestPoint )是两点之间的距离，lineWidth是线的宽度。综上所述，鼠标必定在线宽上才可以展示位悬停状态。

因此，最终的解决方案为，引出THREE.LineSegments2.raycast方法，重置这个0.5，让threshold属性加入运算即可解决。

文中资料引用自：

http://www.webgl3d.cn/threejs/docs/#api/zh/objects/Line

作者：sunnysnow0527 出处：https://mp.csdn.net/console/article 欢迎转载，也请保留这段声明。谢谢！

THREE.js开荒小记（二）：无效宽度linewidth的Line 和无效阔threshold的Line2相关推荐

H5案例分享：jquery.qrcode.js生成简易二维码
近期做项目需要生成二维码,并且解码获取信息,jquery.qrcode.js生成二维码比较的方便,写个教程分享给大家.欢迎大家测试留言,我会改进代码. 现在二维码越来越流行啦,支付扫二维码,关注扫二维 ...
jquery二维码生成插件jquery.qrcode.js在线生成二维码
一代巨匠金庸先生驾鹤西去,谢谢您的作品,陪我度过儿时的时光 –2018.10.31 一.场景再现由于业务需求,经常会将访问链接分享给别人,方便其他客户访问我们的业务.在本周的需求中,我们需要根据地址 ...
使用js+html生产二维码
使用js生产二维码如何使用js+html生产二维码 1.网页源码 <!DOCTYPE html> <html><head><meta charset=&qu ...
微信小程序图表插件wxcharts.js使用小记，Echarts.js，推荐uCharts.js
一.wxcharts.js 参考地址:https://github.com/xiaolin3303/wx-charts/issues/58 参数含义参考:https://www.cnblogs.com ...
three.js 弹出二维图片
three.js 弹出二维图片代码 // 创建平面let geometry = new THREE.PlaneGeometry(30, 30);let plan_texture = THREE.Im ...
利用jquery的qrcode.js插件生成二维码的两种方式的使用
2019独角兽企业重金招聘Python工程师标准>>> 利用jquery的qrcode.js插件生成二维码的额两种方式,canvas(即画布)方式和table方式(原文地址http: ...
编辑器js获取浏览器高度和宽度值(转)
js获取浏览器高度和宽度值网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: docume ...
（五）JS基础知识二（通过图理解原型和原型链）【三座大山之一，必考！！！】
JS基础知识二(原型和原型链) 提问 class 继承类型判断(instanceof) 原型原型关系基于原型的执行规则原型链说明提问如何准确判断一个变量是不是数组 class的原型本质 ...
gnuplot绘图程序中对线型(linetype)、点型(pointtype)、线条宽度(linewidth)、点大小(pointsize)、图样
作者:magj77 原作网址:http://blog.sina.com.cn/s/blog_6a5f098201013tvb.html 在NS2的gnuplot绘图程序中对线型(linetype).点 ...
Python学习 Day28 JS函数（二）
JS函数(二) (一)return关键字关键字return一般结合函数一起使用.而且需要注意,这个关键字一般只能在函数体中使用作用: 1.函数体中如果遇见关键字return,函数体后面语句不再执行 ...

THREE.js开荒小记（二）：无效宽度linewidth的Line 和无效阔threshold的Line2

THREE.js开荒小记（二）：无效宽度linewidth的Line 和无效阔threshold的Line2相关推荐

最新文章

热门文章

THREE.js开荒小记（二）：无效宽度linewidth的Line 和 无效阔threshold的Line2

THREE.js开荒小记（二）：无效宽度linewidth的Line 和 无效阔threshold的Line2相关推荐

最新文章

热门文章

THREE.js开荒小记（二）：无效宽度linewidth的Line 和无效阔threshold的Line2

THREE.js开荒小记（二）：无效宽度linewidth的Line 和无效阔threshold的Line2相关推荐