01、Mybatis的三剑客
303 2023-04-03 02:48:49
本博文主要记录如何使用three.js绘制物体的边框及修改其lineWidth。three.js是个技术点比较多,查询资料又比较少的框架,单单就这个修改lineWidth就是一个坑。先放一个动态的效果图,需要的小伙伴可以看下相关实现。
开始的时候,我是使用LineSegments来实现的,线的材质使用LineBasicMaterial,但是发现无论linewidth设置多少,呈现出来的都是1
因此修改实现方式,这里直接可看懂的代码:
// 引入新的线的材质类import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js';import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js';import { Line2 } from 'three/examples/jsm/lines/Line2.js';// 设置边框const edgesGeometry = new LineGeometry();const pointArr = this.getLinePoint(points);const lineMaterial = new LineMaterial({ color: 0xdd2222, linewidth: 2, // 这里表示线的宽度 transparent: true}); edgesGeometry.setPositions(pointArr); lineMaterial.resolution.set(window.innerWidth, window.innerHeight);
这里的重点在于pointArr
的值,其实就是线的连线的顶点坐标,我这里的demo是个立方体,因此是按立方体的8个点,把立方体的12条线连接其来:
// 获取边框的点连线数据 getLinePoint(points): Array<any> { // 立方体的8个顶点坐标 let [p0, p1, p2, p3, p4, p5, p6, p7] = points; //顺着点 保证12条线都连上即可 let pointLine = [ p0, p1, p2, p3, p0, p4, p5, p6, p7, p4, p4, p7, p3, p2, p6, p5, p1 ]; let arr = []; pointLine.forEach(item => { arr.push(item.x) arr.push(item.y) arr.push(item.z) }) return arr; }
我觉得学习3d的这个框架只能边查阅资料,边尝试,这个也是我们第一次学着用,把使用过程中遇到的坑记录下来,便于查阅。