models-viewer-basic

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);