在同一画布中绘制 p5.js 和巴比伦.js元素

Question

我想在我的画布上创建 3D 形状，但我正在使用ml5.js和posenet示例。我能想到两种方法：

方法1：使用WEBGL渲染器。但是，它不起作用。需要 WEBGL 渲染器才能使 3D 形状运行，对吧？当我将其与 ml5 一起使用时，以下内容不起作用.js示例：

createCanvas(640,480, WEBGL)

方法 2：使用其他库。我决定使用babylon.js

但它要求我先创建一个画布元素，然后再进行 diplay。

<canvas id="renderCanvas" touch-action="none"></canvas> 
var canvas = document.getElementById("renderCanvas"); // Get the canvas element 
var engine = new BABYLON.Engine(defaultCanvas0, true); // Generate the BABYLON 3D engine
//  Add the create scene function 

问题：p5 创建的画布与巴比伦.js的画布不同。我希望显示是一个单独的窗口，而不是两个单独的窗口。怎么做？谢谢！

Answer 1

AFAIK 您不能在画布的同一 webgl 上下文中使用两个渲染器。 这意味着，您需要选择一个渲染器来绘制 3D 形状。

画布创建可以是代码的一部分，因此您实际上不必已经在 HTML 中拥有画布。Babylon.js只需要在引擎的构造函数中进行画布：

var canvas = document.createElement("canvas");
// style your canvas
canvas.style.width = "100px";
canvas.style.height = "100px";
// add to wherever you want
document.body.appendChild(canvas);
// use this canvas to init babylon
var engine = new BABYLON.Engine(canvas, true);
// do your thing!