L7集成threejs，onAddMeshs方法中提供的scene.add()添加three中Line2类型线失败

[wang-yuandong]

问题描述

L7集成threejs，ThreeLayer的onAddMeshs方法中提供的scene.add()添加three中Line2类型线失败，并报错

重现链接

https://codesandbox.io/p/sandbox/cranky-mcclintock-z4ps9z?file=%2Fsrc%2Fcomponents%2FTestLine.vue%3A1%2C1

重现步骤

预期行为

TestL7Line文件和TestLine文件引用同一个ccreateLineWithLine2方法，L7地图中线未出现，期望出现一条自地图中心119高度至左下方的线（由于世界坐标为0，0，0，所以另一端点较远，未在屏幕展示，可参考createLineWithLineBasic方法）

平台

• 操作系统: macOS
• 网页浏览器: Google Chrome 119.0.6045.105
• threejs: 0.115.0
• @antv/l7: ^2.19.6
• @antv/l7-three: ^2.19.6

屏幕截图或视频（可选）

threejs:

L7 with threejs:

补充说明（可选）

No response

[github-actions[bot]]

Hi @wang-yuandong, Please star this repo if you find it useful! Thanks :star:! 你好 @wang-yuandong。如果该仓库对你有用，可以 star 一下，感谢你的 :star:!

[github-actions[bot]]

hi @wang-yuandong, welcome!

[zhnny]

Three.js中的Line2对象在L7的绘制中存在问题，下图中的红色线条和蓝色圆形物体（分别是Line对象和Line2对象），其实Positions是相同的

const geometry = new LineGeometry();
geometry.setPositions(positions);
const matLine = new LineMaterial({
    color: 0x0000ff,
    linewidth: 0.1,
});
const line = new Line2(geometry, matLine);
line.computeLineDistances();
line.scale.set(1, 1, 1);
layer.setObjectLngLat(line, [center.lng + 0.01, center.lat], 0);
threeScene.add(line);

// THREE.Line ( THREE.BufferGeometry, THREE.LineBasicMaterial ) - rendered with gl.LINE_STRIP
const geo = new THREE.BufferGeometry();
geo.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
const matLineBasic = new THREE.LineBasicMaterial({
    color: 0xff0000,
    linewidth: 6
});
const line1 = new THREE.Line(geo, matLineBasic);
line1.computeLineDistances();
layer.setObjectLngLat(line1, [center.lng + 0.01, center.lat], 0);
threeScene.add(line1);

[lzxue]

问题描述

L7集成threejs，ThreeLayer的onAddMeshs方法中提供的scene.add()添加three中Line2类型线失败，并报错

重现链接

https://codesandbox.io/p/sandbox/cranky-mcclintock-z4ps9z?file=%2Fsrc%2Fcomponents%2FTestLine.vue%3A1%2C1

重现步骤

预期行为

TestL7Line文件和TestLine文件引用同一个ccreateLineWithLine2方法，L7地图中线未出现，期望出现一条自地图中心119高度至左下方的线（由于世界坐标为0，0，0，所以另一端点较远，未在屏幕展示，可参考createLineWithLineBasic方法）

平台

• 操作系统: macOS
• 网页浏览器: Google Chrome 119.0.6045.105
• threejs: 0.115.0
• @antv/l7: ^2.19.6
• @antv/l7-three: ^2.19.6

屏幕截图或视频（可选）

threejs:

L7 with threejs:

补充说明（可选）

No response https://l7.antv.antgroup.com/examples/engine/three/#basic_geometry 参照这个案例看看

[lzxue]

Three.js中的Line2对象在L7的绘制中存在问题，下图中的红色线条和蓝色圆形物体（分别是Line对象和Line2对象），其实Positions是相同的

const geometry = new LineGeometry();
geometry.setPositions(positions);
const matLine = new LineMaterial({
    color: 0x0000ff,
    linewidth: 0.1,
});
const line = new Line2(geometry, matLine);
line.computeLineDistances();
line.scale.set(1, 1, 1);
layer.setObjectLngLat(line, [center.lng + 0.01, center.lat], 0);
threeScene.add(line);

// THREE.Line ( THREE.BufferGeometry, THREE.LineBasicMaterial ) - rendered with gl.LINE_STRIP
const geo = new THREE.BufferGeometry();
geo.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
const matLineBasic = new THREE.LineBasicMaterial({
    color: 0xff0000,
    linewidth: 6
});
const line1 = new THREE.Line(geo, matLineBasic);
line1.computeLineDistances();
layer.setObjectLngLat(line1, [center.lng + 0.01, center.lat], 0);
threeScene.add(line1);

应该是 LineGeometry 和 BufferGeometry 有区别一个是标注，一个是顶点坐标