Hacktoberfest 2026:维护者为十月标记出来的 issue,仍然开放、适合新手。 浏览 Hacktoberfest issue

Adding a mesh to the scene graph by extending Node breaks in 0.7.0

未关闭
#414 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
4/5
预计耗时
3-5 天
新手友好度
35/100
Issue 类型
缺陷
描述清晰度
基本清楚
活跃度
停滞
技术栈
javascript

调研方向

使用 engine 0.7.0 和全新的 npm 安装,复现 Vizzy waves 分支中的回归问题。阅读 src/Grid.js 和 src/index.js,重点关注 Grid 的构造、场景图中的放置以及 Background 的设置;当 mesh 可以通过扩展 Node 再次添加,且背景不再遮挡平面时,即表示完成。

由索引模型根据 Issue 内容生成。

描述

When working on my visualizer I had everything working in 0.6.2 (https://github.com/psyrendust/Vizzy/tree/feat/waves). But when doing a fresh npm installI'm getting seeing an issue in 0.7.0. I was able to get it partially working again in this branch (https://github.com/psyrendust/Vizzy/tree/bug/waves). Below are the changes I used to get things working again.

I also had to remove my background because it's placement in the scene graph is different and now cuts my plane in half only allowing you to see a small portion of the wave.

diff --git a/src/Grid.js b/src/Grid.js
index 29b1882..70450a4 100644
--- a/src/Grid.js
+++ b/src/Grid.js
@@ -53,13 +53,12 @@ const vizzyVS = Material.vizzyVS(null, {
   }
 });

-export default class Grid extends Node {
-  constructor(audio) {
-    super();
+export default class Grid {
+  constructor(node, audio) {
     // gl_PointSize = 20.0;

-
-    this
+    this.node = node;
+    this.node
       .setAlign(0.5, 0.5, 0.5)
       .setOrigin(0.5, 0.5, 0.5)
       .setMountPoint(0.5, 0.5, 0.5)
@@ -71,9 +70,9 @@ export default class Grid extends Node {
     this.clock = FamousEngine.getClock();
     this.audio = audio;

-    this.mesh = new Mesh(this);
+    this.mesh = new Mesh(this.node);
     this.geometry = new DynamicGeometry();
-    this.dragRotation = new DragRotation(this);
+    this.dragRotation = new DragRotation(this.node);

     this.plane = new Plane({
       detailY: this.audio.getData().TIMEBUFFER - 1,
diff --git a/src/index.js b/src/index.js
index ccb31e8..9db0d9d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -29,12 +29,13 @@ class Background extends Node {
       .setAlign(0.5, 0.5, 0.5)
       .setOrigin(0.5, 0.5, 0.5)
       .setMountPoint(0.5, 0.5, 0.5)
-      .setProportionalSize(1, 1)
+      .setProportionalSize(1, 1, 1)
       .setPosition(0, 0, 0);
     this.opacity = new Opacity(this);
     this.opacity.set(0);
     this.el = new DOMElement(this, {
       properties: {
+        'z-index': '0',
         width: '100%',
         height: '100%',
         background: "#00b9d7",
@@ -69,10 +70,10 @@ class Vizzy {
     this.camera = new Camera(this.scene);
     this.camera.setDepth(120);
     this.root = this.scene.addChild()
-    this.background = this.root.addChild(new Background());
+    // this.background = this.root.addChild(new Background());
     this.lights = this.root.addChild(new Lights());
     this.audio = new Audio(this.root);
-    this.grid = this.root.addChild(new Grid(this.audio));
+    this.grid = new Grid(this.root.addChild(), this.audio);
     this.data = {};
     this.refreshRate = new RefreshRate(100);
     this.id = this.root.addComponent(this);
@@ -80,17 +81,17 @@ class Vizzy {
   }
   onUpdate() {
     this.data = this.audio.getData();
-    this.refreshRate.throttle(() => {
-      if (this.data.fftBufferFloat[0]) {
-        if (this.data.fftBufferFloat[0][this.data.fftSize - 8] > -90) {
-          this.background.show();
-        } else {
-          this.background.hide();
-        }
-      } else {
-        this.background.hide();
-      }
-    });
+    // this.refreshRate.throttle(() => {
+    //   if (this.data.fftBufferFloat[0]) {
+    //     if (this.data.fftBufferFloat[0][this.data.fftSize - 8] > -90) {
+    //       this.background.show();
+    //     } else {
+    //       this.background.hide();
+    //     }
+    //   } else {
+    //     this.background.hide();
+    //   }
+    // });
     this.grid.updateItems(this.data);
     this.root.requestUpdateOnNextTick(this.id);
   }
主要语言
JavaScript
星标
1.7k
派生
249
PR 合并指标
30 天内没有已合并 PR

环境准备

  • 没有 Dockerfile 或 Docker Compose 文件
  • 没有 Pull Request 模板
  • 阅读贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

Famous/engine 的其他 Issue

查看 Famous/engine 的全部 Issue

相似的 Issue

更多 JavaScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。