logo标签列表

p5js 冲突：2D 和 3D 渲染。

javascriptp5.js
3
我是一名p5js和代码的初学者。我正在为我的一个课程制作一个（希望是）交互式网站，它使用两个分别由DOM控制的不同的草图。我认为3D和2D渲染模式彼此冲突。这两个草图单独运行时都能正常工作。在Chrome开发者中，我收到以下错误信息：“p5.js:16124 Uncaught not supported in p2d. Please use webgl mode”。以下是我的代码：
HTML
<html>
<head>
  <meta charset="UTF-8">
  <script language="javascript" type="text/javascript" src="libraries/p5.js"></script>
<script language="javascript" src="libraries/p5.dom.js"></script>
  <script language="javascript" type="text/javascript" src="sketch.js"></script>
  <script language="javascript" type="text/javascript" src="sketch2.js"></script>
  <style> body {padding: 0; margin: 0;} </style>
</head>

<body>
<div id="text" style="background: none; position: absolute; color: white; font-family: avenir,sans-serif; width: 250px; margin-left: 140px; margin-top: 50px; line-height: 15pt; font-size: 9pt; z-index:1;">
<p>
text
</p>
</div>

<div id="myContainer" style="background:none; position:absolute; z-index:-1; width:100%;height:100%;"></div>

<div id="myContainer2" style="background:none; position:absolute; z-index:-2; width:100%;height:100%;"></div>

</body>
</html>

草图 1

function setup(){
  var myCanvas = createCanvas(windowWidth, windowHeight,WEBGL);
  myCanvas.parent('myContainer2');
}

function draw(){
  background(0,0,0);
  rotateY(frameCount * 0.01);

  for(var j = 0; j < 50; j++){
    push();
    for(var i = 0; i < 80; i++){
      translate(sin(frameCount * 0.02 + j) * 150, sin(frameCount * 0.1 + j) * 110, i * 0.9);
      rotateZ(frameCount * 0.04);
      push();
      sphere(10, 15, 5); 
      pop();
    }
    pop();
  }
}

Sketch 2

var input, button;

function setup() {

  // create canvas
  var myCanvas = createCanvas(windowWidth, windowHeight);
  myCanvas.parent('myContainer');
  background(255,255,255,0);

  input = createInput();
  input.position(140, 675);

  button = createButton('Share');
  button.position(280, 676);
  button.mousePressed(greet);

  textAlign(CENTER)
  textSize(15);
}

function greet() {
  var name = input.value();

  for (var i=0; i<1; i++) {
    push();
    fill(255,255,0);
    translate(random(width), random(height));
    text(name, 0, 0);
    pop();
  }
}
1个回答
0

这个操作不适用于2D（GitHub）。如果您想要反转x坐标并创建对象镜像，只需设置translate并对所有x坐标使用-x。

line(this.mirroring*0.5*grid_step, 0, this.mirroring*0.5*grid_step, 0.5*grid_step);
line(this.mirroring*2.5*grid_step, 0, this.mirroring*2.5*grid_step, 0.5*grid_step);
line(this.mirroring*0.5*grid_step, 0.25*grid_step, this.mirroring*2.5*grid_step, 0.25*grid_step);

这里的 this.mirroring 可以是 -1 或 1。当 this.mirroring = -1 时，reverse 被切换。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接