Рисование элементов для p5.js и babylon.js на одном холсте - PullRequest
Новая
       28

Рисование элементов для p5.js и babylon.js на одном холсте

2 голосов
/ 20 сентября 2019

Я хочу создать трехмерную фигуру на холсте, но я использую примеры ml5.js и posenet.Я мог бы подумать о двух способах:

Подход 1: Использование рендерера WEBGL.Но это не работает.WEBGL-рендерер необходим для запуска 3D-фигур, верно?Ниже приведено, что НЕ работает, когда я использую его с примером 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 отличается от такового в babylon.js.Я хочу, чтобы дисплей был одним, а не двумя отдельными окнами.Как это сделать?Спасибо!

1 Ответ

0 голосов
/ 27 сентября 2019

AFAIK нельзя использовать два средства визуализации в одном и том же контексте webgl холста.Это означает, что вам нужно будет выбрать один из средств визуализации, чтобы нарисовать вашу трехмерную фигуру.

Создание холста может быть частью кода, поэтому вам не обязательно уже иметь холст в своем 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!
...