Adding 3D Models to your Website

The DIY way

Diego González
Mar 22 · 8 min read
do it yourself: add a 3D model to a web page using web components

TLDR;

Tech we will use

Web Components

Web Components logo

3D Engine

3D Model

glTF format

JS Promises

Putting it all together

<model-3d background-color="#000000" src="/models/3Dmodel.glb"></model-3d>

Include BabylonJS

const bjs = document.createElement('script');
bjs.src = 'https://cdn.babylonjs.com/babylon.js';
bjs.async = false;
document.head.appendChild(bjs);

Setup 3D Environment

3D origami fox on a web page

Load the 3D model

const assetsManager = new BABYLON.AssetsManager(scene);
const meshTask = assetsManager.addMeshTask('glb task', '', path[0], path[1]);
meshTask.onSuccess = function (task){
task.loadedMeshes[0].position = BABYLON.Vector3.Zero();
}
...assetsManager.load();

Monitor changes to attributes

static get observedAttributes(){
return ['src', 'background-color'];
}
Observable attributes working for the Web Component

More to come

The *not so nice* other side

Acknowledgements

Samsung Internet Developers

Writings from the Samsung Internet Developer Relations Team. For more info see our disclaimer: https://samsunginter.net/about-blog

Thanks to Daniel Appelquist and Ada Rose Cannon.

Diego González

Written by

stereoparallaxer & Samsung Developer Advocate

Samsung Internet Developers

Writings from the Samsung Internet Developer Relations Team. For more info see our disclaimer: https://samsunginter.net/about-blog