Как объединить рендеры three.js с другими элементами HTML?
Я очень новичок в программировании, stackoverflow и вообще во всем этом. Так что, пожалуйста, потерпите меня.
Я сделал простые сцены, используя Three.js, и некоторые эффекты, используя HTML Canvas отдельно. Я хотел бы знать, можно ли как-то объединить их или вообще, как объединить холст рендерера Three.js с другими элементами HTML.
Мой текущий код включает в себя что-то вроде:
var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.domElement.id = 'WebGLCanvas';
document.body.appendChild(renderer.domElement);
Ответы 1
Полная интеграция содержимого WebGL и элементов HTML невозможна. Вы можете расположить элементы HTML поверх элемента холста средства визуализации или наоборот. Установив флаг alpha для THREE.WebGLRenderer на true, вы можете поместить холст рендерера поверх другого HTML-контента.
Однако следует помнить, что содержимое WebGL всегда обрабатывается отдельно. Невозможно объединить 3D-объекты, такие как сетки, линии или облака точек, с элементами HTML, поэтому они сортируются и отображаются вместе.
Использование ТРИ.CSS3Dрендерер в сочетании с THREE.WebGLRenderer — хороший пример правильного использования. Посмотрите следующую демонстрацию, которая показывает, как оба средства визуализации интегрированы в простое приложение.
https://threejs.org/examples/css3d_orthographic.html
Термин «рендеринг» в контексте THREE.CSS3DRenderer несколько вводит в заблуждение, поскольку он просто преобразует элементы HTML в соответствии с преобразованием 3D-объектов. В любом случае, что делает sketchfab на своей стартовой странице, так это интегрирует элемент холста в обычный веб-сайт. Конечно, в этом нет ничего особенного и легко сделать. Я имел в виду более продвинутые сценарии;)
Ааа... тогда не могли бы вы предложить какой-нибудь учебник, который объясняет, как добиться результата SketchFab? Я подчеркнул так просто как, потому что я знаю, что это может быть нубский вопрос, но почему-то я просто не могу понять это....
Может быть так: jsfiddle.net/ztjLfsm0. Как видите, вы можете разместить элемент холста на обычном веб-сайте, а затем использовать его в качестве поверхности для рисования для THREE.WebGLRenderer.
Пожалуйста, примите ответ, если он был вам полезен ;)
Аааа, спасибо... но THREE.CSS3DRenderer все еще рендерит 3D-объекты, да? Я бы хотел, чтобы 3D-модель была интегрирована в обычную веб-страницу. Например, здесь, есть 3D-модель на синем фоне и какой-то текст рядом с ней в том же пространстве. Что-то вроде просто, поскольку это должно быть как-то возможно, нет?