models-viewer-basic
v1.0.7
Published
A tool for compiling and transforming Three.js scenes, camera and renderer
Maintainers
Readme
models-viewer-basic V1
how testing and developer the library
- git clone https://github.com/DBDeve/models-viewer-basic
- npm install
- npm create vite@latest test
- select vanilla
- select javascript
- npm install three
- cd test
- npm install
- npm run dev
- add import {viewer} from '../../lib/viewer.js'
how install and create a project with the package
- npm create vite@latest project-name
- select vanilla
- select javascript
- cd project-name
- npm install models-viewer-basic
- add this tag to index.html file:
<div id="canvasContainer"></div>- add this code for default configuration
import { viewer } from 'models-viewer-basic';
const isProd = process.env.NODE_ENV === 'production';
const basePath = isProd ? '/dist' : '';
let model;
window.loadModel =async function () {
let config = {
"scene": {
"model": {"filePath": `${basePath}/file_model_name`},
"environment": `${basePath}/file_hdri_name`
},
"renderer":{
"canvas": {
"insertIn": "canvasContainer",
},
"Size": {
"modality":"fullScreen",
},
},
"camera":{
"basic": {
"angle": { "x": 3.7, "y": 1.5},
"distance": 1.7,
},
"controls": {
"rotate": { "vertical":{"min":0,"max":360}, "orizontal":{"min":-Infinity,"max":Infinity}},
"zoom": {"min": 2, "max": 4 },
"pan":true,
"effect":{
"damping":{ "factor": 0.05 }
}
},
},
};
model = await viewer.createInstance(config);
}
window.addEventListener('DOMContentLoaded', loadModel);