0.0.7 • Published 5 days ago
viewer-3d-lit-loader v0.0.7
Viewer 3d Lit Loader
This is a simple loading component to show an amazing cube. It is a simple example to show how to use the LitElement to create a web component. The 3d model is created using the three.js library.
How to use
To use this component, you need to import the viewer-3d-lit-loader with npm:
npm install viewer-3d-lit-loaderThen, you can use the component in your HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Viewer 3d Lit Loader</title>
<script type="module" src="./node_modules/viewer-3d-lit-loader/dist/viewer-3d-lit-loader.js"></script>
</head>
<body>
<viewer-3d-lit-loader
width="400"
height="400"
lightColor="0xffffff"
cubeColor="0x000000"
bgColor="0x000000"
></viewer-3d-lit-loader>
</body>
</html>Properties
The component has the following properties:
width: The width of the component. Default is400.height: The height of the component. Default is400.lightColor: (optional) The hex color of the light. Default is#ffffff.cubeColor: (optional) The hex color of the cube. Default is#000000.bgColor: (optional) The hex color of the background. Default is#000000. (1)noAnimation: (optional) The cube does not rotate. Default isfalse.bgTransparent: (optional) The background is transparent. Default isfalse. (1)fullContent: (optional) The component takes the full width and height of the parent. Default isfalse. (2)
Note(1): If you want to use the
bgTransparentthebgColorproperties are ignored.Note(2): If you want to use the
fullContentthewidthandheightproperties are ignored.Warning: The
fullContentproperty cause expansive computation. Use it carefully.