Как объединить рендеры three.js с другими элементами HTML?

Question

Я очень плохо знаком с программированием, 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);

Answer 1

Полная интеграция содержимого WebGL и элементов HTML невозможна. Вы можете расположить элементы HTML поверх элемента canvas средства визуализации или сделать это наоборот. Установив флаг alpha для THREE.WebGLRenderer равным true, вы можете поместить холст средства визуализации поверх другого содержимого HTML.

Однако следует помнить, что контент WebGL всегда отображается отдельно. Невозможно объединить трехмерные объекты, такие как сетки, линии или облака точек, с элементами HTML, чтобы они сортировались и отображались вместе.

Использование THREE.CSS3DRenderer в сочетании с THREE.WebGLRenderer является хорошим примером для правильного использования. Посмотрите следующую демонстрацию, которая показывает оба рендера, интегрированные в простое приложение.

https://threejs.org/examples/css3d_orthographic.html