Какими инструментами добавляете 3d модели на веб страницу? Есть какой стандарт на 2022 год?

Я слышал о thee.js и о babylon.js, я так понимаю, в наше время это этакие захватившие мир библиотеки для 3д в браузере?
Или как вы бы добавляли 3д модели на свою страницу с возможностью прокрутки, осмотра модели, и написания других скриптов с ней?

Дополнительно:

Содержание

1 Дополнительно:
2 Ответы:

thee.js и babylon.js сложные для таких задач, много лишнего надо писать и знать. Если именно для взаимодействия с моделями, то modelviewer отлично подходит и там есть онлайн редактор в который можно загрузить свою модель и сгенерировать код, быстро и просто.

Подойдет для какого-нибудь 3д логотипа который будет крутиться в углу?)
Niksak, Да, вполне. Я вот такую штуку недавно делал https://get-web.site/uploads/files/2022-09/1662292...
А спасибо, довольно простая штука, как я ее не нашел сам..
Из сервисов находил ток blend4web и еще какую-то шнягу
Niksak, Не за что, не забудьте отметить решением, если оно подходит.

Ответы:

Могу предложить такой вариант.

Так или иначе, надо смотреть в сторону WebGL, а там уже использовать наиболее удобные библиотеки.

Не так давно, любопытства ради, немножко гуглил сабж. Вот пара закладок с того поиска:

<model-viewer>
<circle-around>

Разрабы вебкита на данный момент в процессе реализации хтмл тега для нативной демонстрации 3д сцен, так что велосипедов городить не рекомендую

Этот процесс может на годы затянуться.
Чего именно нужно ждать?
McBernar, может и затянуться. В чем вопрос?

https://interline.by/kollekcii-mebeli-dlya-doma/na...

там есть внизу типа слайдер. жмем на 360 че-то там, открываем диспетчер задач и .. ваша видюха работает на кого-то. пакет походу гдет подменили, нет времени разбираться

+ Заказать

Для решения данной проблемы вы можете воспользоваться услугами фрилансеров. Мы выполним необходимую работу быстро и качественно.

- Есть ответ
- 09.04.2024
Ответить
Для добавления 3D моделей на веб-страницу вам могут пригодиться следующие инструменты:

1. Three.js - это популярная библиотека JavaScript, которая позволяет создавать и отображать 3D графику на веб-страницах. Она предоставляет множество функций для работы с 3D объектами, камерами, светом и т.д.

2. A-Frame - это фреймворк для создания виртуальной реальности на веб-страницах с использованием HTML. Он основан на Three.js и предоставляет удобные инструменты для работы с 3D объектами.

3. Babylon.js - еще одна мощная библиотека JavaScript для создания 3D графики на веб-страницах. Она поддерживает различные типы 3D объектов, анимаций, физики и другие возможности.

4. WebXR - это стандарт для создания виртуальной и дополненной реальности на веб-страницах. Он позволяет работать с устройствами виртуальной реальности и аугментированной реальности прямо в браузере.

В 2022 году стандарт на добавление 3D моделей на веб-страницы не имеет четкой формулировки, так как это область быстро развивающаяся. Однако, вышеупомянутые инструменты являются ведущими в этой области и предоставляют мощные возможности для работы с 3D графикой на веб-страницах. Каждый из них имеет свои особенности и преимущества, поэтому выбор инструмента зависит от ваших потребностей и уровня опыта в работе с 3D графикой.

Есть ответ
07.04.2024

Ответить

Для добавления 3D моделей на веб-страницу вам могут помочь различные инструменты и технологии. Наиболее популярными из них являются:

1. Three.js: Three.js является одним из самых популярных инструментов для создания 3D графики на веб-страницах. Он позволяет легко добавлять и анимировать 3D объекты, работать с освещением, тенями и другими эффектами.

2. Babylon.js: Babylon.js также является мощным инструментом для создания интерактивной 3D графики на веб-страницах. Он поддерживает множество функций, таких как физика, анимация и работа с текстурами.

3. A-Frame: A-Frame - это фреймворк для создания виртуальной реальности на веб-страницах с использованием HTML. Он основан на Three.js и позволяет быстро создавать 3D сцены с помощью простых HTML тегов.

Стандарт на 2022 год в области добавления 3D моделей на веб-страницы может быть определен как WebXR - это набор API, который позволяет создавать виртуальную и дополненную реальность на веб-страницах. Он поддерживается большинством современных браузеров и позволяет создавать более интерактивные и захватывающие пользовательские опыты.

Пример добавления 3D модели с использованием Three.js на веб-страницу:

    <title>3D Model Example</title>
    


    
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        const geometry = new THREE.BoxGeometry();
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        camera.position.z = 5;

        const animate = function () {
            requestAnimationFrame(animate);

            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;

            renderer.render(scene, camera);
        };

        animate();

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<title>3D Model Example</title>

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry();

const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

const cube = new THREE.Mesh(geometry, material);

scene.add(cube);

camera.position.z = 5;

const animate = function () {

requestAnimationFrame(animate);

cube.rotation.x += 0.01;

cube.rotation.y += 0.01;

renderer.render(scene, camera);

};

animate();

Этот пример создает простой куб с использованием Three.js и отображает его на веб-странице. Вы можете настроить его и добавить другие 3D модели с помощью различных инструментов, описанных выше.

Какими инструментами добавляете 3d модели на веб страницу? Есть какой стандарт на 2022 год?

Дополнительно:

Ответы:

Оставить комментарий Отменить

Ответы

Ежедневно, круглосуточно

Какими инструментами добавляете 3d модели на веб страницу? Есть какой стандарт на 2022 год?

Дополнительно:

Ответы:

Оставить комментарий Отменить

Ответы

Метки

Ежедневно, круглосуточно