A typescript port of Three.js CSS3DRenderer, with small tweaks and enhancements.
Originally from:
http://www.emagix.net/academic/mscs-project/item/camera-sync-with-css3-and-webgl-threejs
Based On:
mrdoob/three.js & ivee-tech/three-css3drenderer
npm i -S three three-css3d
import {Scene, PerspectiveCamera} from 'three'; import {CSS3DRenderer, CSS3DSprite, CSS3DObject} from 'three-css3d'; // Create Scene, camera and renderer const scene = new Scene(); const camera = new PerspectiveCamera(50, 1, 0, 500); const renderer = new CSS3DRenderer(); document.body.appendChild(renderer.domElement); // Create DOM for CSS3D const objectDOM = document.createElement('div'); const spriteDOM = document.createElement('div'); // Update style, content for your DOM // ... // Create CSS3D Objects const object = new CSS3DObject(objectDOM); const sprite = new CSS3DSprite(spriteDOM); // Change the 3D property of CSS3D Objects // ... // Add to your scene scene.add(object, sprite); // Render, on each frame, or manually renderer.render(scene, camera);
class CSS3DRenderer()
CSS3DRenderer.domElement
Container element of CSS3D Scene.
CSS3DRenderer.cameraElement
Camera element of CSS3D transform.
CSS3DRenderer.getSize()
Get the size of container element.
CSS3DRenderer.setSize(width: number, height: number)
Set the size of container element.
CSS3DRenderer.render(scene: three.Scene, camera: three.Camera)
Update CSS3D scene.
class CSS3DObject(element: HTMLElement) extends three.Object3D
element: Target DOM Element.
CSS3DObject.copy(source: CSS3DObject, recursive: boolean)
Copy content from another CSS3DObject.
see: three.Object3D for more detail.
class CSS3DSprite(element: HTMLElement, spriteRatio:number = 1) extends CSS3DObject
element: Target Sprite DOM Element.
spriteRatio: The ratio for sprite rotation compensation, 1 for full sprite, 0 for normal 3D object.
CSS3DSprite.spriteRatio
Value of current spriteRatio