This is a experimental custom element that allows 3D objects (currently, OBJ and gLTF format) to be loaded into a document and rendered inline, just like any other external resource. Additionally, any CSS transforms applied to the element will be passed on to the 3D model, allowing complex objects to be placed and maniplulated using just CSS.
- Hello World - A barebones example.
- Transform tests - A set of rendering test cases.
- 3D Scene - An example of mixing standard HTML elements and models to create a 3D scene.
- Support for the gLTF and OBJ model formats - other formats will be added in the future.
- File format is currently determined by file extension (
.objfor OBJ and.gltf/.glbfor gLTF). - At the moment Safari doesn't scroll models because of a bug with
scrollTop. transform-style: flatisn't supported yet.
To use this custom element you'll need to include the three.js library, its accompanying OBJ loader and/or gLTF loader along with the custom element script:
<script src="js/three.min.js"></script>
<script src="js/three-obj-loader.js"></script>
<script src="js/model-element.min.js"></script>To bolster up browser support, you can also include a web components polyfill.
Adding a model to a page is as simple as adding the element and setting its src attribute:
<x-model src="/path/to/my-model.obj"></x-model>Here's a cut-and-paste example:
<!DOCTYPE html>
<html>
<head>
<style>
.model {
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<x-model class="model" src="/path/to/my-model.obj"></x-model>
<script src="js/three.min.js"></script>
<script src="js/three-obj-loader.min.js"></script>
<script src="js/model-element.min.js"></script>
</body>
</html>Models can be positioned and rotated using CSS transforms. Any transforms applied to a model element will also be applied to the model.
.model {
transform: translateZ(-200px) rotateY(45deg);
}If you have a perspective property value defined in your CSS, the model element will use it to render the object with the correct perspective. Omitting perspective (or setting it to zero) will result in objects rendered with orthographic projection.
Note: It's perfectly valid to nest perspective rules in CSS. However, models will only use the first perspective definition when walking up the DOM tree.
The model-element script creates a camera, scene, light source and a WebGL renderer. The DOM node returned by the renderer (a <canvas> element) is added to the document and configured to fill the viewport and sit above all other content. Additionally, pointer-events: none is set, allowing elements below to be interacted with.
Adding <x-model> elements to the DOM results in the model being loaded and added to the underling scene. Removing an element from the DOM will remove it from the scene.
The scene is re-rendered every frame. For each object in the scene, the renderer finds it's host node and walks up the DOM tree resolving any transforms, positions and scroll offsets. The resulting transform matrix is then applied to the object in the scene. Once all objects are updated the renderer repaints the scene to the layer. Objects now appear on-screen, synchronised with their host DOM node.
- Node / NPM
- Clone this repo.
- Install dependencies:
npm install - Build the project with the watch task:
npm start dev - Start editing...
npm start dist- builds the both the unminified and minified distribution files to the/dist/folder.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent