使用手册

INFO

您的浏览器得支持WebGL标准，推荐使用主流浏览器Chrome、Edge和Safari，建议iOS设备升级系统到15+版本(支持WebGL2)。

简介

Myway 3D 通过 JavaScript 语言把踏得网在线商品3D定制服务以简洁的方式开放给 Web 应用开发者，使得 Web 开发者能够很快在网页、网页应用、微信公众号中快速集成衣服、鞋帽、日用品、家装等物品在线定制功能，给目标用户带来个性化购物体验。

Myway 3D使用了当前主流的Web3D开发库Three.js，和R3F框架类似，Myway和Three.js之间是一种松耦合关系，可以很方便的和已有Three.js工程集成，也可以和传统2D网页集成。 Myway 3D架构和Stone 3D类似，内部实现了ECS (Entity-Component-System) 模式，以便于扩展到新的应用领域。

集成方法

Step. 1: 引入three.js

首先，得在html页面中引入three.js库，方式如下：

html

<script type="importmap">
  {
      "imports": {
          "three": "https://techbrood.com/threejs/r154/build/three.module.js",
          "three/addons/": "https://techbrood.com/threejs/r154/examples/jsm/"
      }
  }
</script>

<script type="importmap">
  {
      "imports": {
          "three": "https://techbrood.com/threejs/r154/build/three.module.js",
          "three/addons/": "https://techbrood.com/threejs/r154/examples/jsm/"
      }
  }
</script>

Step. 2: 引入sdk

页面得为 sdk 提供一个容器元素，比如：

html

<main id="myway3" class="column"></main>

<main id="myway3" class="column"></main>

然后使用 ES6 Module 方式来集成 sdk 到js 脚本中：

import { Myway } from './myway.module.js'

import { Myway } from './myway.module.js'

Step. 3: SDK初始化

Myway 对象是 SDK 的内置入口对象，其他对象都通过Myway来访问。

调用 init 接口来初始化该对象,初始化完成会执行一个回调函数onReady，应用的后续逻辑需要放在回调里实现。

init(appId, appKey, containerId, options, onReady)

init(appId, appKey, containerId, options, onReady)

参数	说明	类型
appId	应用程序唯一标识	String
appKey	应用程序密钥	String
containId	Dom容器的id	String，默认为myway3
options	可选参数列表	Object，比如：{outline: true, outlineColor: 0xffff00}, 将启用模型选中边缘高亮功能，且颜色为黄色
onReady	初始化完成的回调函数	Function

其中 appid 和 appkey 通过上海踏得商务授权来获取。未经授权禁止商用。

在 onReady 回调中我们可以访问核心组件来完成不同的功能操作。

options 包含如下可用参数：

{Boolean} [outline]: 是否启用模型选中边缘高亮功能
{Hexdecimal} [outlineColor]：边缘高亮的颜色
{Boolean} [snapping]: 用户移动模型时是否启用吸附效应
{Boolean} [zoom]: 是否可以缩放
{Boolean} [rotate]: 是否可以旋转
{Boolean} [pan]: 是否可以平移
{Float} [zoomSpeed]: 控制器的缩放速度
{Float} [rotateSpeed]: 控制器的旋转速度
{Float} [panSpeed]: 控制器的平移速度
{Boolean} [enableDamping]: 控制器是否开启阻尼效应
{Boolean} [lockVertical]: 是否锁定垂直旋转
{Boolean} [shadow]: 是否开启阴影效果，注意开启阴影会牺牲一些性能

核心组件

Myway对象直接包含的核心子对象有：Stage 对象和 Cloth 对象（用于服装定制），其他定制对象暂未开放。 Stage 表示 3d 空间，是一个单例对象，直接通过 myway 实例的myStage 成员变量来获取，而 Cloth 可能有多件，通过 new Myway.Cloth 来创建。

Stage

代表3D空间对象，用来控制空间背景、对象渲染、模型操作、数据导出等。该对象是Myway内置创建的单例对象，可以通过Myway.stage来获取。

TIP

stage对象封装了three.js的场景对象，如要获取three.js的原生scene对象，可以通过Myway.stage.scene成员变量来获取。

设置背景图片

用来设置3d场景中的背景图片。

setBackgroundImage (url)

setBackgroundImage (url)

参数	说明	类型
url	图片链接	String

返回：无

设置HDR环境

用来设置3d场景中的HDR环境。

setEnvironment (url)

setEnvironment (url)

参数	说明	类型
url	HDR图片链接，可以是一张等距图片，也可以是6张图片的数组	String或者Array

返回：无

代码示例：

// case1: single equirectangular image
stage.setEnvironment('sunset.hdr')

// case2: six images
stage.setEnvironment(['px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr'])

// case1: single equirectangular image
stage.setEnvironment('sunset.hdr')

// case2: six images
stage.setEnvironment(['px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr'])

获取光照

用来获取场景中的光源数据。

getLights()

getLights()

返回：光源数据数组，格式为 [{type, light}, ...]。

调节光照

用来调节场景中的光源参数，比如强度、颜色等。

tuneLight(light, intensity, color, position, groundColor)

tuneLight(light, intensity, color, position, groundColor)

参数	说明	类型
light	光照对象	Object3D, 该对象为THREE.js中相关光照对象，比如THREE.AmbientLight, THREE.DirectionalLight ...
intensity	光照强度	Float，默认为 1.0
color	光照颜色	Hexadecimal color，比如：0xff0000 表示红色。对于半球光，该参数为顶部颜色。
position	光照位置，可选。	Array[3]，格式为[x, y, z]，该参数对环境光无效。
groundColor	底部颜色，可选。	Hexadecimal color，比如：0xff0000 表示红色，该参数仅对半球光有效。

返回：无

TIP

light参数可以通过getLights来获取

代码示例：

let lights = stage.getLights()
let light = lights[0]
stage.tuneLight(light, 0.5, 0xffffff)

let lights = stage.getLights()
let light = lights[0]
stage.tuneLight(light, 0.5, 0xffffff)

切换光照

用来控制某个光源的启用或禁用。

toggleLight(light)

toggleLight(light)

参数	说明	类型
light	光照对象	Object3D, 该对象为THREE.js中相关光照对象，比如THREE.AmbientLight, THREE.DirectionalLight ...

导出图片

把当前3D场景导出为图片

exportImage (download)

exportImage (download)

参数	说明	类型
download	是否下载。true表示自动下载；false表示返回图片源数据	Boolean

返回：无

导出模型

把当前场景导出为模型

exportModel ()

exportModel ()

合并模型

把若干同材质的商品部件合并为同一个部件

merge(objects, parent, options)

merge(objects, parent, options)

参数	说明	类型
objects	合并部件的模型	Array : Mesh
parent	合并后模型的父对象	Object3D
options	可选的合并选项	Object

返回：如果合并成功，返回合并后的模型（mesh），如失败返回undefined

options可以包含如下选项：

{String} [name] 合并后模型的命名
{String} [mode] 合并方式：'hide' 表示隐藏合并前的源部件, 'clean' 表示清除合并前的源部件, 缺省为 'hide'
{Boolean} [addToParent] 是否添加到父级对象，默认为添加
{Boolean} [addToMemo] 是否记录到备忘录系统，默认为false
{Float} [delta] 合并对象z方向的偏移，防止多个合并对象之间的z-fighting

Cloth

代表被定制的对象，这里是衣服对象，用来控制服装的相关操作。

构造函数

Cloth (options)

Cloth (options)

参数	说明	属性名	类型
options	参数列表对象	autofit	Boolean，如为true，表示3D模型大小自动适配
		fitMode	String，表示适配模式，可以是'local'或'world'，local表示以模型对象的包围盒中心点来对齐，world表示以模型对象的世界坐标来对齐
		fitOffset: 1.8	Float，表示适配偏移量，用来微调适配尺寸的大小
		hooks	定义一组回调函数。

返回：Cloth实例对象。

Hooks回调函数列表:

贴片被选中：onLabelSelected(selectedLabel)
贴片移动：onLabelMoved(selectedLabel)
贴片旋转：onLabelRotated(selectedLabel)
贴片大小调整：onLabelResized(selectedLabel)
贴片被删除：onLabelDeleted(selectedLabel)

其中函数参数 selectedLabel 为选中的贴片。

衣服部件被选中：onClothSelected(selectedComponent)

其中函数参数 selectedComponent 为选中的衣服部件对象。

加载模型

用来加载单个模型，模型格式目前支持.glb或者.my（myway加密数据格式）

load (url, replace, mount, onReady, onProgress, onError)

load (url, replace, mount, onReady, onProgress, onError)

参数	说明	类型
url	模型文件的链接	String ( .glb或.my文件)
replace	是否替换已有模型	Boolean, 默认为true
mount	是否立马挂载到场景中	Boolean, 默认为true
onReady	加载完成的回调函数	Function(Group), 该回调函数的参数为加载完成的模型组合对象
onProgress	加载过程回调	Function(progress)，该回调函数的参数为一个位于[0,100]之间的进度数值
onError	出错处理	Function(error)，error为错误信息

返回：无。

批量加载模型

加载多部件衣服模型，模型格式目前支持.glb或者.my（myway加密数据格式）

loadAll (models, replace, mount, onReady, onProgress, onError)

loadAll (models, replace, mount, onReady, onProgress, onError)

参数	说明	类型
models	模型部件定义列表，每个模型部件的定义格式为{name, url}键值对	Array, 示例如下：[{name:'领子', url:'assets/models/领子.glb'}, {name:'下摆', url:'assets/models/下摆.glb'}]
replace	是否替换已有模型	Boolean
mount	是否立马挂载到场景中	Boolean
onReady	加载完成的回调函数	Function(Group)，该回调函数的参数为加载完成的模型组合对象
onProgress	加载过程回调	Function(progress)，该回调函数的参数为一个位于[0, 100]之间的进度数值
onError	出错处理	Function(error)，error为错误信息

返回：无。

设置贴图

设置衣服部件的贴图

setTextureByName (name, url)

setTextureByName (name, url)

参数	说明	类型
name	衣服部件的名字	String，，如：'body'
url	图片文件的链接	String ( .jpg 或者.png 图片)

返回：无。

设置贴图尺寸

设置衣服部件贴图的尺寸

setTextureSizeByName (name, size)

setTextureSizeByName (name, size)

参数	说明	类型
name	衣服部件的名字，如：body	String
size	贴图重复度，重复度越大，图片所占尺寸越小	Integer (整数，如 5)

返回：无。

绘制图案

在当前选中的衣服部件上绘制图案，比如企业Logo

TIP

该接口需要存在当前选中的衣服部件，这可以通过用户点击或触摸来选中部件，或者通过setSelectedLabel接口来设置

drawArt (url, name)

drawArt (url, name)

参数	说明	类型
url	图案文件的链接，支持.png, .jpg格式	String

返回：无。

绘制文本

在当前选中的衣服部件对象上绘制文本，比如企业Slogan

TIP

该接口需要存在当前选中的衣服部件，这可以通过用户点击或触摸来选中部件，或者通过setSelectedLabel接口来设置

drawText(text, name, fill)

drawText(text, name, fill)

参数	说明	类型
text	字符串	String
name	文本标签的名字	String
fill	是否填充	Boolean

返回：无。

设置颜色

设置当前选中的衣服部件的底色

setColor (url)

setColor (url)

参数	说明	类型
color	颜色值	Hexadecimal，如 0xff0000 表示红色

返回：无。

设置图案尺寸

setLabelSize (size, label)

setLabelSize (size, label)

参数	说明	类型
size	尺寸	Float，如 1.2
label	贴片对象	Object，可选，默认为当前选中的贴片对象

返回：无。

设置图案颜色

setLabelColor (color, label)

setLabelColor (color, label)

参数	说明	类型
color	颜色值	Hexadecimal，如 0xff0000 表示红色
label	贴片对象	Object

返回：无。

设置图案厚度

通过法线贴图来微调贴片视觉厚度

setLabelThickness (label, thickness, url)

setLabelThickness (label, thickness, url)

参数	说明	类型
label	贴片对象	Object
thickness	厚度	String，可以是'none', 'thin', 'normal', 'thick'
url	法线贴图的链接	String

返回：无。

设置图案颜色贴图

设置贴片图案的颜色贴图（漫反射贴图）

setLabelColorMap (url, repeat, label)

setLabelColorMap (url, repeat, label)

参数	说明	类型
url	颜色贴图的链接	String
repeat	设置颜色贴图的尺寸。可选，默认为[1, 1]	Array[2]，比如[1, 1]表示x=1, y=1
label	给定的贴片对象。可选，默认为当前选中的贴片对象	Object

返回：无。

设置图案复合贴图

一次性设置图案贴片的多个贴图

setLabelCompositeMap (maps, color, label)

setLabelCompositeMap (maps, color, label)

参数	说明	类型
maps	贴图数组	Array，支持两种输入格式： 1）可以是简单的图片链接数组，如：['/assets/art/1_color.png', '/assets/art/1_normal.png', '/assets/art/1_alpha.png']，第1个参数会被当做颜色贴图的链接，第2个参数会被当做法线贴图的链接，第3个参数会被当做透明贴图的链接。 2）也可以是贴图对象数组，如：[{type: 'color', url: '/assets/art/1_color.png', repeat: [1, 1]}, {type:'normal', url: '/assets/art/1_normal.png', scale: 1}, {type: 'alpha', url: '/assets/art/1_alpha.png'}]，其中repeat用来定义颜色贴图的尺寸，scale用来定义法线贴图的尺寸。
color	颜色值，可选，如未设置则表示不混合颜色	Hexadecimal，如 0xff0000 表示红色
label	贴片对象，可选，如未设置则默认为当前选中的label对象	Object

获取当前选中的图案对象

获取当前选中的图案(贴片)对象

getSelectedLabel ()

getSelectedLabel ()

返回：当前选中的对象，如无，则返回null。

设置当前选中的图案对象

设置某个图案贴片为当前选中的对象

setSelectedLabel(label)

setSelectedLabel(label)

参数	说明	类型
label	贴片对象	Object

返回：无。

根据图层信息绘制图案

根据图层信息设置某个图案贴片为当前选中的对象，这个方法通常用于场景数据恢复。

drawArtAtLayer(url, name, urlNormal, layerInfo)

drawArtAtLayer(url, name, urlNormal, layerInfo)

参数	说明	类型
url	图案文件链接	String，支持.jpg和.png格式
name	图案贴片的名字	String
urlNormal	法线贴图的链接，可选	String
layerInfo	图层信息	Object，具体结构参见LayerInfo的定义。

根据图层信息绘制文本

设置某个图案贴片为当前选中的对象，，这个方法通常用于场景数据恢复。

drawTextAtLayer(text, name, fill, layerInfo)

drawTextAtLayer(text, name, fill, layerInfo)

参数	说明	类型
text	文本字符串	String
name	文本贴片的名字	String
fill	是否填充，可选	Boolean，默认为false
layerInfo	图层信息	Object，具体结构参见LayerInfo的定义。

获取图层信息

获取指定贴片对象的图层信息。

getLayerInfo(label)

getLayerInfo(label)

参数	说明	类型
label	贴片对象	Object

返回LayerInfo对象。

LayerInfo

{
  type, // label type, 'art' or 'text'
  text, // label text, if type is 'text'
  label, // label object
  target, // the object which the label attached to
  pos, // label position, [x, y, z]
  rot, // label rotation in radians, [x, y, z]
  size, // label size
  color, // label color
  angle // label angle
}

{
  type, // label type, 'art' or 'text'
  text, // label text, if type is 'text'
  label, // label object
  target, // the object which the label attached to
  pos, // label position, [x, y, z]
  rot, // label rotation in radians, [x, y, z]
  size, // label size
  color, // label color
  angle // label angle
}

水平反转图案贴图

水平反转图案贴图。

flipXLabel(label)

flipXLabel(label)

参数	说明	类型
label	贴片对象	Object

垂直反转图案贴图

垂直反转图案贴图。

flipYLabel(label)

flipYLabel(label)

参数	说明	类型
label	贴片对象	Object

置顶图案

把图案放置在所有图案的最上层。

bringLabelToFront(label)

bringLabelToFront(label)

参数	说明	类型
label	贴片对象	Object

置底图案

把图案放置在所有图案的最下层。

sendLabelToBack(label)

sendLabelToBack(label)

参数	说明	类型
label	贴片对象	Object

上移图案

把图案的层级向上移动一层。

moveLabelForward(label)

moveLabelForward(label)

参数	说明	类型
label	贴片对象	Object

下移图案

把图案的层级向下移动一层。

moveLabelBackward(label)

moveLabelBackward(label)

参数	说明	类型
label	贴片对象	Object

对齐图案

把图案放在目标商品部件的预置位置。

alignLabel(mode)

alignLabel(mode)

参数	说明	类型
mode	对齐模式	String，可以是'left', 'right', 'center', 'full'，默认值为'center'

mode 选项说明

left 靠商品部件的左边缘对齐
right 靠商品部件的右边缘对齐
center 居中对齐
full 扩展图案为最大化覆盖商品部件

裁剪功能

Myway内置支持在线裁剪功能，裁剪的方式有直线裁剪、折线裁剪和二阶曲线裁剪。裁剪功能通过Cloth对象的裁剪器（Tailor）对象来提供。

启用裁剪

startSlice()

startSlice()

返回：无。

调用示例：

cloth.tailor.startSlice()

cloth.tailor.startSlice()

设置裁剪颜色

setScissorColor(color)

setScissorColor(color)

参数	说明	类型
color	颜色	Hexadecimal，如 0xff0000 表示红色

返回：无。

代码示例：

cloth.tailor.setScissorColor(0xff0000)

cloth.tailor.setScissorColor(0xff0000)

设置裁剪层

setSliceLayers(layers)

setSliceLayers(layers)

用于衣服部件的多层裁剪

参数	说明	类型
layers	裁剪层数组	Array，如 ['front', 'back']，表示同时对包含front和back命名的对象进行裁剪

代码示例：

cloth.tailor.setSliceLayers(['front', 'back'])

cloth.tailor.setSliceLayers(['front', 'back'])

启用裁剪吸附

如果启用了吸附功能，则当前裁剪点如果很靠近之前的一个裁剪点，则当前点会被自动吸附到邻近裁剪点。

enableSnap()

enableSnap()

代码示例：

cloth.tailor.enableSnap()

cloth.tailor.enableSnap()

镂空功能

Myway内置支持在线镂空功能，目前支持的方式有椭圆形镂空。镂空功能通过Cloth对象的裁剪器（Tailor）对象来提供。

启用镂空

startHollow()

startHollow()

启用毛边效果

如果启用毛边效果，那么镂空的边缘会有类似牛仔裤破损边缘的效果。

enableRoughEdge()

enableRoughEdge()

代码示例：

cloth.tailor.enableRoughEdge()
cloth.tailor.startHollow()

cloth.tailor.enableRoughEdge()
cloth.tailor.startHollow()

自定义数据的保存和恢复

Myway引擎内部使用备忘录来实现数据的自动保存和恢复，也就是说当应用层在调用API时，引擎会记录相关数据用于自动保存和恢复。如果应用层想自行实现数据的保存和恢复，可以在合适的时候禁用和启用引擎内置的自动保存机制，以免产生冗余数据或发生数据冲突。

INFO

应用层自定义的数据可以放在toJSONMeta（参见Storage章节相关接口）数据的userData属性中，也可以单独存放。自定义的数据一般需要包含所调用api的名称和参数，然后在数据恢复时使用相同的参数再次调用api。

启用自动保存

用来启用Myway内部商品（如衣服）的自动保存机制。默认是启用的。

enableAutoSave: ()

enableAutoSave: ()

代码示例：

cloth.enableAutoSave()

cloth.enableAutoSave()

禁用自动保存

用来禁用myway内部商品（如衣服）的自动保存机制。

disableAutoSave: ()

disableAutoSave: ()

代码示例：

cloth.disableAutoSave()

cloth.disableAutoSave()

数据保存

Myway对象内置提供了数据保存功能，用来把定制完成的商品信息输出为数据，应用层可以把数据保存到本地下载或者上传到云端。为了提高存储和传输效率，数据保存接口仅保存源数据，尽可能使用链接的方式来引用外部资源。

toJSONMeta()

toJSONMeta()

返回：json格式的商品定制信息。

数据恢复

用来加载之前保存过的商品定制信息，格式为json。

fromJSONMeta: (json, stage, onLoaded, onModelLoaded, onLabelLoaded)

fromJSONMeta: (json, stage, onLoaded, onModelLoaded, onLabelLoaded)

参数	说明	类型
json	商品定制信息	json格式
stage	stage对象	Stage，通过Myway.stage来获取
onLoaded	所有数据加载完成的回调	Function
onModelLoaded	模型数据加载完成的回调	Function，回调参数为加载好的模型
onLabelLoaded	贴片数据加载完成的回调	Function

代码示例：

Myway.fromJSONMeta(json, stage, 
  () => {}, 
  (g) => {
    console.log('model loaded')
    
    stage.center(g, 2.5) // auto center the stage
  }, () => {
    console.log('label loaded')
  })

Myway.fromJSONMeta(json, stage, 
  () => {}, 
  (g) => {
    console.log('model loaded')
    
    stage.center(g, 2.5) // auto center the stage
  }, () => {
    console.log('label loaded')
  })

INFO

Myway内部使用备忘录模式来实现数据的保存和恢复。用户操作被保存在备忘录系统中。如果需要清除备忘录，可以调用 Myway.clearMemo() 方法。

工具箱

Myway内置提供了一些工具库，比如图片处理库：ImageUtils

ImageUtils

ImageUtils图片库目前提供了常用的图片合成方法。

图像合成

merge: (images, onReady, options)

merge: (images, onReady, options)

参数	说明	类型
images	图片数组	Array，比如：['./1.jpg', './2.jpg']
onReady	合并完成后的回调函数	Function，合并后的图像是一个base64图片,通过该函数的参数来传递
options	可选参数，用来定义图像格式、质量、尺寸和合成模式等配置	Object，具体见下面的描述：options的选项列表

options的选项列表

format：图像格式，可以是 'image/png' 或 'image/jpeg'
quality: 图像质量，0到1之间的一个float数值，该选项只对jpeg格式的图像有效
width：合成的图像宽度，是一个integer数值，如：200
height：合成的图像高度, 是一个integer数值，如：200
crossOrigin：源图像获取时的跨域模式，是一个string，如果没有设置，图像获取时不使用CORS（跨域资源共享）。允许的取值参考 crossOrigin 选项说明。
size: 定义图像合成尺寸的选取方式，可以是 'max' 或 'min' 或 'first' 或 'last'，其中 'max' 表示取所有图像中尺寸的最大值，'min' 则表示取最小值，first表示取第一张图片的尺寸，last表示取最后一张图片的尺寸，这里first和last是merge函数images参数图像数组中元素的顺序。
compose: 定义图像合成方式，默认为正片叠底（multiply）。详细说明请参考 compose 选项说明。

crossOrigin 选项说明

anonymous 表示启用CORS（跨域资源共享），且当图片同源时发送证书。
use-credentials 表示启用CORS（跨域资源共享），且总是发送证书（无论图像是否同源）。

如果crossOrigin是空字符串 ("")，则等同于 "anonymous"。

compose 选项说明

multiply 这是默认值，表示源图片和目标图片使用乘法进行合成，对应公式为: color1 * color2 / 255 -> color
source-over 它表示绘制的图形将画在现有目标之上
destination-over 这个操作的值与前一个值相反，所以现在目标绘制在源之上
source-atop 这个操作会将源绘制在目标之上，但是在重叠区域上两者都是不透明的。绘制在其他位置的目标是不透明的，但源是透明的
destination-atop 这个操作与source-atop相反，目标绘制在源之上，其中在重叠区域上两者都是不透明的，但绘制在其他位置的源是不透明的，而目标变成透明的
source-in 在源与目标重叠的区域只绘制源。而不重叠的部分都变成透明的
destination-in 这个操作与source-in相反，在源与目标重叠的区域保留目标
source-out 在与目标不重叠的区域上绘制源．其他部分都变成透明的
destination-out 在与源不重叠的区域上保留目标。其他部分都变成透明的
lighter 这个值与顺序无关，如果源与目标重叠，就将两者的颜色值相加。得到的颜色值的最大取值为255，结果就是白色
copy 这个值与顺序无关，只绘制源，覆盖掉目标
xor（异或）这个值与顺序无关，只绘制出不重叠的源与目标区域。所有重叠的部分都变成透明的

代码示例：

Myway.ImageUtils.merge(['./1.jpg', './2.jpg'], ( mergedImage ) => {
    // do you stuff with the merged image
    // for example: cloth.setLabelColorMap(mergedImage)
  }, {
    size: 'first',
    compose: 'multiply'
  })

Myway.ImageUtils.merge(['./1.jpg', './2.jpg'], ( mergedImage ) => {
    // do you stuff with the merged image
    // for example: cloth.setLabelColorMap(mergedImage)
  }, {
    size: 'first',
    compose: 'multiply'
  })

资产保护

Myway除了支持开放的gltf标准模型外，也支持自定义格式的模型数据，后缀为.my。使用方法如下：

在命令行下运行myway.exe工具来把glb文件转换为my文件：

bash

myway 1.glb

myway 1.glb

执行成功后会自动在当前目录下生成同名my文件，如1.my

在网页程序中把加载的url换成1.my，如：

cloth.load('assets/models/my/1.my', true, ()=>{
  // your codes here...
})

cloth.load('assets/models/my/1.my', true, ()=>{
  // your codes here...
})

WARNING

资产保护工具链是可选插件，需要单独授权。

使用手册 ​

简介 ​

集成方法 ​

Step. 1: 引入three.js ​

Step. 2: 引入sdk ​

Step. 3: SDK初始化 ​

核心组件 ​

Stage ​

设置背景图片 ​

设置HDR环境 ​

获取光照 ​

调节光照 ​

切换光照 ​

导出图片 ​

导出模型 ​

合并模型 ​

Cloth ​

构造函数 ​

Hooks回调函数列表: ​

加载模型 ​

批量加载模型 ​

设置贴图 ​

设置贴图尺寸 ​

绘制图案 ​

绘制文本 ​

设置颜色 ​

设置图案尺寸 ​

设置图案颜色 ​

设置图案厚度 ​

设置图案颜色贴图 ​

设置图案复合贴图 ​

获取当前选中的图案对象 ​

设置当前选中的图案对象 ​

根据图层信息绘制图案 ​

根据图层信息绘制文本 ​

获取图层信息 ​

LayerInfo ​

水平反转图案贴图 ​

垂直反转图案贴图 ​

置顶图案 ​

置底图案 ​

上移图案 ​

下移图案 ​

对齐图案 ​

mode 选项说明 ​

裁剪功能 ​

启用裁剪 ​

设置裁剪颜色 ​

设置裁剪层 ​

启用裁剪吸附 ​

镂空功能 ​

启用镂空 ​

启用毛边效果 ​

自定义数据的保存和恢复 ​

启用自动保存 ​

禁用自动保存 ​

数据保存 ​

数据恢复 ​

工具箱 ​

ImageUtils ​

图像合成 ​

options的选项列表 ​

crossOrigin 选项说明 ​

compose 选项说明 ​

资产保护 ​

使用手册

简介

集成方法

Step. 1: 引入three.js

Step. 2: 引入sdk

Step. 3: SDK初始化

核心组件

Stage

设置背景图片

设置HDR环境

获取光照

调节光照

切换光照

导出图片

导出模型

合并模型

Cloth

构造函数

Hooks回调函数列表:

加载模型

批量加载模型

设置贴图

设置贴图尺寸

绘制图案

绘制文本

设置颜色

设置图案尺寸

设置图案颜色

设置图案厚度

设置图案颜色贴图

设置图案复合贴图

获取当前选中的图案对象

设置当前选中的图案对象

根据图层信息绘制图案

根据图层信息绘制文本

获取图层信息

LayerInfo

水平反转图案贴图

垂直反转图案贴图

置顶图案

置底图案

上移图案

下移图案

对齐图案

mode 选项说明

裁剪功能

启用裁剪

设置裁剪颜色

设置裁剪层

启用裁剪吸附

镂空功能

启用镂空

启用毛边效果

自定义数据的保存和恢复

启用自动保存

禁用自动保存

数据保存

数据恢复

工具箱

ImageUtils

图像合成

options的选项列表

crossOrigin 选项说明

compose 选项说明

资产保护