时间戳

首页 > 解决方案 > 在同一画布中为 p5.js 和 babylon.js 绘制元素

html - 在同一画布中为 p5.js 和 babylon.js 绘制元素

问题描述

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

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

createCanvas(640,480, WEBGL)

方法 2：使用不同的库。我决定使用babylon.js

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

  <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创建的canvas与babylon.js不同。我希望显示器是一个而不是两个单独的窗口。怎么做？谢谢！

标签： htmlhtml5-canvasp5.jsbabylonjs

解决方案

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!

推荐阅读