@3dlook/model-renderer 中文文档教程
Model Renderer
基于 three.js 的 3D 模型渲染器库
Installation
您可以使用以下命令将此模块安装为 npm 包：
npm install --save @3dlook/model-renderer
Example of usage
您需要为画布渲染器创建一个容器
<div class="canvas-container"></div>
并为此元素指定样式
.canvas-container {
width: 1280;
height: 720px;
}
然后您可以将 ModelRenderer 类导入到您的 javascript 文件中，创建类实例和初始化渲染器：
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 类
Kind：全局类
new ModelRenderer(options)
ModelRenderer 构造函数
| Param | Type | Description |
|---|---|---|
| options | Object | options |
modelRenderer.init()
模型渲染屏幕初始化器
种类：ModelRenderer
的实例方法
modelRenderer.loadModel([url])
加载.obj模型文件
| Param | Type | Description |
|---|---|---|
| [url] | string | url to obj file. Default value is set in the constructor options |
modelRenderer.displayModel(object)
在画布上显示模型
| Param | Type | Description |
|---|---|---|
| object | any | = obj file data |
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 |
