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

• ModelRenderer
  • new ModelRenderer(options)
  • .init()
  • .loadModel([url])
  • .displayModel(object)

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 |