@3dlook/model-renderer

3D model renderer library based on three.js

Usage no npm install needed!

<script type="module">
  import 3dlookModelRenderer from 'https://cdn.skypack.dev/@3dlook/model-renderer';
</script>

README

Model Renderer

3D model renderer library based on three.js

Installation

You can install this module as npm package using the following command:

npm install --save @3dlook/model-renderer

Example of usage

You need to create a container for canvas renderer

<div class="canvas-container"></div>

And also specify styles for this element

.canvas-container {
  width: 1280;
  height: 720px;
}

Then you can import ModelRenderer class into your javascript file, create a class instance and init renderer:

import ModelRenderer from '@3dlook/model-renderer';

const renderer = new ModelRenderer({
  // container element CSS selector
  container: '.canvas-container',
  // 3d model url
  model: 'https://example.com/3d-model-file.obj',
});

// initialize renderer
renderer.init();

renderer.loadModel()
  .then(model => renderer.displayModel(model))
  .catch(err => alert(err.message));

API

ModelRenderer

ModelRenderer class

Kind: global class

new ModelRenderer(options)

ModelRenderer constructor

Param Type Description
options Object options

modelRenderer.init()

Model render screen initializer

Kind: instance method of ModelRenderer

modelRenderer.loadModel([url])

Load .obj model file

Kind: instance method of ModelRenderer

Param Type Description
[url] string url to obj file. Default value is set in the constructor options

modelRenderer.displayModel(object)

Display model on canvas

Kind: instance method of ModelRenderer

Param Type Description
object any = obj file data