#html #three.js #html5-canvas
#HTML #three.js #html5-холст
Вопрос:
Я очень новичок в программировании, 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-элементы поверх элемента canvas средства визуализации, или вы можете сделать это наоборот. Установив alpha флаг THREE.WebGLRenderer to true , вы можете разместить холст средства визуализации поверх другого содержимого HTML.
Однако следует иметь в виду, что содержимое WebGL всегда отображается отдельно. Невозможно объединить 3D-объекты, такие как сетки, линии или облака точек, с элементами HTML, чтобы они сортировались и отображались вместе.
Использование THREE.CSS3DRenderer в сочетании с THREE.WebGLRenderer является хорошим примером правильного использования. Посмотрите следующую демонстрацию, в которой показаны оба средства рендеринга, интегрированные в простое приложение.
Комментарии:
1. Аааа, спасибо… но THREE.CSS3DRenderer все еще рендерит 3D-объекты, да? Я бы хотел, чтобы 3D-модель была интегрирована на обычной веб-странице. Например, здесь есть 3D-модель на синем фоне и текст рядом с ней в том же пространстве. Что-то настолько простое , как это, должно быть как-то возможно, нет?
2. Термин «рендеринг» в контексте
THREE.CSS3DRendererнесколько вводит в заблуждение, поскольку он просто преобразует элементы HTML в соответствии с преобразованием 3D-объектов. В любом случае, то, что sketchfab делает на своей начальной странице, — это интеграция элемента canvas в обычный веб-сайт. Конечно, в этом нет ничего особенного, и это легко сделать. Я имел в виду более сложные сценарии 😉3. Ааа … тогда не могли бы вы предложить какой-нибудь учебник, объясняющий, как добиться результата sketchfab? Я подчеркнул так просто, потому что знаю, что это может быть вопрос новичка, но почему-то я просто не могу в этом разобраться….
4. Может быть, так: jsfiddle.net/ztjLfsm0 . Как вы можете видеть, вы можете поместить элемент canvas на обычный веб-сайт, а затем использовать его в качестве поверхности для рисования
THREE.WebGLRenderer.5. Пожалуйста, примите ответ, если он был вам полезен 😉