Question

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

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

createCanvas(640,480, WEBGL)

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

但是它要求我先创建一个canvas元素，然后执行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创建的画布与babylon.js的画布不同。我希望显示是一个而不是两个单独的窗口。怎么做？谢谢！

Answer 1

同样，您不能在画布的同一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!

在同一画布中绘制p5.js和babylon.js的元素

1 个答案: