Question

这里是初学者总数。我想在p5.js中的WebGl中渲染两个球体。单独地，它们的运动符合我的期望，但是当我将两个球体放到一块画布上时，其中一个球体总是会停止移动。

let redSphere;
let graySphere;

function setup() {
  createCanvas(500, 400, WEBGL);

  graySphere = new Ball(gray); 
  redSphere = new Ball(red);
}

function draw() {

  let x = mouseX-width/2; //xMotion -- follows the mouse
  let y = 0;              //yMotion -- stays at y = 0;
  let z = mouseY-height/2; //zMotion -- the sphere gets closer/larger as the mouse moves down the screen


    redSphere.show(        
        x,y,z
        );


    graySphere.show(
        -x,-y,-z
    );

}

期望：

对于x运动：我期望RED球作为mouseX朝相同的方向移动。我希望GREY球随着mouseX朝相反的方向移动。

对于y运动：我希望两个球都不会完全垂直移动，而是保持在y = 0。

对于z运动：我期望随着mouseY的增加（当鼠标向下拖动屏幕时），红色球体会变得更靠近。我希望随着mousey的增加，灰色球体会变得越来越虚弱。

结果：

灰色球体按预期工作

对于x运动： RED球根本不会水平移动，而不会跟随mouseX。

对于y运动： RED球似乎跟随mouseY，而不是完全不垂直移动。

对于z运动：红色的球体随着mouseY的增加而变得越来越小（因此变得更小），而不是变得更加紧密。

如何在p5.js中的WebGl中呈现多个对象？

0 个答案: