chore: release v2.24.1 - #2827
Conversation
- fix: 修复气泡图 (PointLayer fill) 默认动画参数开启导致动画异常的 bug - feat: 升级 @antv/l7-three 集成，优化 ThreeRenderService 和 BaseLayer - docs: 补充 L7-Three 相关文档说明 - examples: 新增 three 相关示例 (animation/buildings/earthquake/particles/shader)
|
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request prepares for the Highlights
Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request is a version release focused on integrating and upgrading @antv/l7-three, primarily involving a significant upgrade of the Three.js dependency from 0.115.0 to 0.182.0 and adapting core code for WebGL2 context and new Three.js APIs. New three related examples have been added, and documentation has been updated to reflect the new renderer: 'device' requirement. A security audit was conducted, and no vulnerabilities meeting Medium, High, or Critical severity were detected. The overall quality of the upgrade is high, with a minor suggestion for improving the animation loop in a new example by using layer.setUpdate() for better integration with L7's rendering cycle.
| const clock = new THREE.Clock(); | ||
|
|
||
| const animate = () => { | ||
| const time = clock.getElapsedTime(); | ||
|
|
||
| animatedObjects.forEach((obj) => { | ||
| if (obj.type === 'rotate') { | ||
| obj.mesh.rotation.z += obj.speed; | ||
| obj.mesh.rotation.x += obj.speed * 0.5; | ||
| } else if (obj.type === 'pulse') { | ||
| const scale = obj.initialScale + Math.sin(time * 3 + obj.speed * 100) * 0.3; | ||
| obj.mesh.scale.set(scale, scale, scale); | ||
| } else if (obj.type === 'wave') { | ||
| const positions = (obj.mesh.geometry as THREE.PlaneGeometry).attributes.position | ||
| .array as Float32Array; | ||
| const originals = obj.mesh.userData.originalPositions as Float32Array; | ||
|
|
||
| for (let i = 0; i < positions.length; i += 3) { | ||
| const x = originals[i]; | ||
| const y = originals[i + 1]; | ||
| positions[i + 2] = | ||
| Math.sin(x * 0.001 + time) * 500 + Math.cos(y * 0.001 + time) * 500; | ||
| } | ||
|
|
||
| (obj.mesh.geometry as THREE.PlaneGeometry).attributes.position.needsUpdate = true; | ||
| obj.mesh.geometry.computeVertexNormals(); | ||
| } | ||
| }); | ||
|
|
||
| requestAnimationFrame(animate); | ||
| }; | ||
|
|
||
| animate(); |
There was a problem hiding this comment.
使用 requestAnimationFrame 创建独立的动画循环可能会导致性能问题和潜在的内存泄漏（如果图层被移除，循环不会停止）。
建议使用 layer.setUpdate() 来与 L7 的渲染循环集成。当在图层上启用 .animate(true) 时，传递给 setUpdate 的回调函数将在每一帧执行。这可以确保动画与 L7 的渲染同步，并得到妥善管理。
const clock = new THREE.Clock();
layer.setUpdate(() => {
const time = clock.getElapsedTime();
animatedObjects.forEach((obj) => {
if (obj.type === 'rotate') {
obj.mesh.rotation.z += obj.speed;
obj.mesh.rotation.x += obj.speed * 0.5;
} else if (obj.type === 'pulse') {
const scale = obj.initialScale + Math.sin(time * 3 + obj.speed * 100) * 0.3;
obj.mesh.scale.set(scale, scale, scale);
} else if (obj.type === 'wave') {
const positions = (obj.mesh.geometry as THREE.PlaneGeometry).attributes.position
.array as Float32Array;
const originals = obj.mesh.userData.originalPositions as Float32Array;
for (let i = 0; i < positions.length; i += 3) {
const x = originals[i];
const y = originals[i + 1];
positions[i + 2] =
Math.sin(x * 0.001 + time) * 500 + Math.cos(y * 0.001 + time) * 500;
}
(obj.mesh.geometry as THREE.PlaneGeometry).attributes.position.needsUpdate = true;
obj.mesh.geometry.computeVertexNormals();
}
});
});| const clock = new THREE.Clock(); | ||
|
|
||
| const animate = () => { | ||
| const time = clock.getElapsedTime(); | ||
|
|
||
| // 更新着色器 uniforms | ||
| scanShaderMaterial.uniforms.uTime.value = time; | ||
| energyShaderMaterial.uniforms.uTime.value = time; | ||
| rippleShaderMaterial.uniforms.uTime.value = time; | ||
|
|
||
| // 旋转扫描效果 | ||
| scanMesh.rotation.y = time * 0.5; | ||
|
|
||
| // 更新数据流位置 | ||
| streams.forEach((stream) => { | ||
| stream.mesh.position.y += stream.speed; | ||
| if (stream.mesh.position.y > 5000) { | ||
| stream.mesh.position.y = 0; | ||
| } | ||
| // 透明度随高度变化 | ||
| const opacity = 1.0 - stream.mesh.position.y / 5000; | ||
| (stream.mesh.material as THREE.MeshBasicMaterial).opacity = opacity * 0.6; | ||
| }); | ||
|
|
||
| requestAnimationFrame(animate); | ||
| }; | ||
|
|
||
| animate(); |
There was a problem hiding this comment.
与 three-animation 示例类似，这里使用 requestAnimationFrame 创建了一个独立的动画循环。为了获得更好的性能并避免潜在的内存泄漏，建议使用 layer.setUpdate() 将动画逻辑集成到 L7 的渲染循环中。
const clock = new THREE.Clock();
layer.setUpdate(() => {
const time = clock.getElapsedTime();
// 更新着色器 uniforms
scanShaderMaterial.uniforms.uTime.value = time;
energyShaderMaterial.uniforms.uTime.value = time;
rippleShaderMaterial.uniforms.uTime.value = time;
// 旋转扫描效果
scanMesh.rotation.y = time * 0.5;
// 更新数据流位置
streams.forEach((stream) => {
stream.mesh.position.y += stream.speed;
if (stream.mesh.position.y > 5000) {
stream.mesh.position.y = 0;
}
// 透明度随高度变化
const opacity = 1.0 - stream.mesh.position.y / 5000;
(stream.mesh.material as THREE.MeshBasicMaterial).opacity = opacity * 0.6;
});
});
1 participant
[English Template / 英文模板]
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
📝 更新日志
☑️ 请求合并前的自查清单