在纯 javascript 中使用 processing.js 时为 3d 画布导入 processing.webgl答案

【问题标题】：Importing processing.webgl for 3d canvas when using processing.js in pure javascript在纯 javascript 中使用 processing.js 时为 3d 画布导入 processing.webgl
【发布时间】：2012-02-28 20:13:02
【问题描述】：

我想在 processing.js 中使用一些 3D 形状。

我知道，如果我使用处理“语言”，我就可以

import processing.webgl.*

编译器会忽略导入语句。

但是我目前正在使用纯 javascript 进行编码，我不清楚如何执行此操作。

有人可以帮忙吗？

编辑

为了更准确地了解我的问题，我的设置函数如下所示：

p.setup = function() {
    p.size(100, 100, P3D);
}

我收到 P3D 未定义

【问题讨论】：

标签： javascript canvas html5-canvas processing.js

【解决方案1】：

Processing vs. 中绘制 3D 形状的过程Processing.js 几乎相同。如果您只在 Processing.js 中开发，则无需导入任何内容。相反，只需在调用 size 时传递 P3D、OPENGL 或 WEBGL：

void setup(){
  size(100, 100, P3D); // Can also be OPENGL or WEBGL
  translate(width/2, height/2);
  box(20);
}

编辑

以下是在纯 JavaScript 中使用 Processing.js 的一些 HTML （我的代码来自：http://js.processing.org/learning）

<script src="processing.js"></script>

<canvas id="cvs"></canvas>

<script>
function sketchProc(p) {
  // It makes more sense to use WEBGL if only developing in JavaScript
  p.size(100, 100, p.WEBGL);
  p.translate(p.width/2, p.height/2);
  p.box(20);
}

var canvas = document.getElementById("cvs");
var pjs = new Processing(canvas, sketchProc);
</script>

【讨论】：

您的评论让我找到了正确的答案，但实际上并不是正确的答案，如果您将示例方法转换为纯 javascript，我会给您打勾。

【解决方案2】：

所以我需要做的就是更改我的size() 调用，使其看起来像这样：

p.size(100, 100, p.P3D);

我需要通过处理对象p.P3D 访问P3D 常量。

【讨论】：