Как вывести файл .glb на сайте?

Question

Имеется файл с 3d моделью .glb, возможно ли как то вывести эту 3d на сайт без сторонних сервисов? Попадались ток сторонник сервисы формировки кода вставки.

Answer 1

По сути .glb и есть .gltf, так что его получится отобразить модулем GLTFLoader у библиотеки Three.js, без проблем.

Проверить свою модель онлайн можно в редакторе Three.js - ссылка.
Или в "средстве просмотра" GLTF форматов - ссылка

Answer 2

Вот, сейчас только такое нарыл:

[ https://codepen.io/meyu/pen/mdrjyOd ]

Возможно, на сайте codepen.io поищи ещë реализацию, она бывает разной.

Я так понимаю, что существуют подключаемые к JS библиотеки, а ещë существуют методы подключения к рендерингу онлайн, но это уже будет рендеринг в облаке.

Я пробовал чатГПТ спрашивать на эту тему, а он только выдавал нерабочий код. Информацию искать самостоятельно тоже трудно, потому как эти технологии ещë сырые, но всë таки уже что-то вырисовывается.

Answer 3

Вот ещë ссылка на сайт codepen.io, там можно ознакомиться с работающим кодом на glb viewer, через библиотеку three.js.

import { GLTFLoader } from
 'https://unpkg.com/[email protected]/examples/jsm/loaders/GLTFLoader.js';

const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
};
const canvas = document.querySelector('canvas.webgl');

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100);
camera.position.set(4, 1, - 4);
scene.add(camera);

const controls = new THREE.OrbitControls(camera, canvas)
controls.enableDamping = true;

const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
  alpha: true
});
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

const ambientLight = new THREE.AmbientLight('#fff');
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight('#fff', 1);
directionalLight.position.set(0.25, 3, -2.25);
scene.add(directionalLight);

const gltfLoader = new GLTFLoader();

gltfLoader.load(
  'https://raw.githubusercontent.com/charl0tee/codepen-assets/master/Strawberries.glb', 
 (gltf) => {
    gltf.scene.scale.set(5, 5, 5);
    scene.add(gltf.scene);
});

window.addEventListener('resize', () => {
    // Update sizes
    sizes.width = window.innerWidth;
    sizes.height = window.innerHeight;

    // Update camera
    camera.aspect = sizes.width / sizes.height;
    camera.updateProjectionMatrix();

    // Update renderer
    renderer.setSize(sizes.width, sizes.height);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
});

const tick = () =>
{
    // Update controls
    controls.update();
    renderer.render(scene, camera);

    window.requestAnimationFrame(tick);
}

tick();

* {
  margin: 0;
  padding: 0;
}

html,
body {
  overflow: hidden;
}

.webgl {
  position: fixed;
  top: 0;
  left: 0;
  outline: none;
  background: radial-gradient(#FAD6A6, #F06966);
}

<canvas class="webgl"></canvas>

<!-- Strawberries by Jarlan Perez [CC-BY] 
     (https://creativecommons.org/licenses/by/3.0/) via Poly Pizza 
     (https://poly.pizza/m/5n1vYWflaFt) -->

БЛОГ НА HUSL

Как вывести файл .glb на сайте?

Ответы (3 шт):