models-viewer-basic V1

how testing and developer the library

1. git clone https://github.com/DBDeve/models-viewer-basic
2. npm install
3. npm create vite@latest test
4. select vanilla
5. select javascript
6. npm install three
7. cd test
8. npm install
9. npm run dev
10. add import {viewer} from '../../lib/viewer.js'

how install and create a project with the package

1. npm create vite@latest project-name
2. select vanilla
3. select javascript
4. cd project-name
5. npm install models-viewer-basic
6. add this tag to index.html file:

<div id="canvasContainer"></div>

7. 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`},
			//"noModel":{"Message":"message", "defaultPath":`${basePath}/file_model_name_default`},
			"environment": {"hdrFilePath": `${basePath}/file_hdri_name`}
		},
		"renderer":{
			"canvas": {
				"insertIn": "canvasContainer",
		    },
			"RenderSize": {
				"mobile": { "width": 0 , "height": 0},
				"tablet":{"width": 0 , "height": 0},
				"computer": { "width": 0, "height": 0}
			},
		},
		"camera":{
			"basic": {
				"angle": { "x": 3.7, "y": 1.5},
				"distance": { "initial": 1.7, "min": 2, "max": 4 },
				"position":{"x":0,"y":0,"z":0} 
			},
			"controls": {
				"rotate": { "vertical":{"min":0,"max":360}, "orizontal":{"min":-Infinity,"max":Infinity}},
				"zoom": {},
				"pan":{},
				"effect":{
					"damping":{ "factor": 0.05 }
				}
			},
		},

		
	};
	
	model = await viewer.createInstance(config);

}

window.addEventListener('DOMContentLoaded', loadModel);