我是 p5js 和一般代码的初学者。我正在为我的一个类(class)开发一个(希望如此)交互式网站，该网站使用两个由 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();
}
}
草图 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();
}
}
最佳答案
此操作不适用于 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;反向切换
关于javascript - p5js 冲突的 2D 和 3D 渲染，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34192166/