基础构成 🌎

命名空间

CTS

CTS 为框架默认命名空间，使用该框架开发时都需要统以 CTS. 开始，CTS已经将threejs原生的属性函数引入，所以也可以直接像使用Three.一样直接使用。

开发时尽量不要使用 CTS 为变量名或者命名空间，避免框架无法正常使用。

Three.JS

Three.JS是基于WebGL的Javascript开源框架，简言之，就是能够实现3D效果的JS库。

WebGL

WebGL是一种Javascript的3D图形接口，把JavaScript和OpenGL ES 2.0结合在一起。

主要组件

在Three.js中，有了场景（scene）、相机（camera）和渲染器（renderer）这3个组建才能将物体渲染到网页中去。

1）场景

场景是一个容器，可以看做摄影的房间，在房间中可以布置背景、摆放拍摄的物品、添加灯光设备等。

2）相机

相机是用来拍摄的工具，通过控制相机的位置和方向可以获取不同角度的图像。

3）渲染器

渲染器利用场景和相机进行渲染，渲染过程好比摄影师拍摄图像，如果只渲染一次就是静态的图像，如果连续渲染就能得到动态的画面。在JS中可以使用requestAnimationFrame实现高效的连续渲染。

安装方式

npm i cts-sdk

引入

import CTS from 'cts-sdk'

全局属性

version

框架版本号

ready

框架主入口，使用框架时必须以这个开始，否则无法构建 3D 场景

global.CTS = CTS //将 DC 变量设置为全局，方便在工程中使用
CTS.ready(() => {
  let viewer = new CTS.Viewer('scene-container') //初始化场景
})

CTS.Viewer

3D 场景主要接口，在给定的 DivId 中构建三维场景，如果是VUE，可直接传入this.$refs.scene

example

<div id="viewer-container"></div>

let viewer = CTS.Viewer('viewer-container')
global.viewer = viewer // 添加到全局变量

[warning] 如果开发使用的是 Vue 这样的 MVVM 框架，不要将 viewer、scene、camera 添加到数据模型中。由于 3D 场景中会不停的刷新每一帧，如果将数据添加到数据模型中，长时间的话会导致浏览器的压力增大而奔溃。

creation

constructor(id,[options])

构造函数
- 参数
  - {String} id：容器 ID
- 返回值 viewer

properties

{Element} dcContainer：框架自定义容器 readonly
{Object} renderer：渲染器 readonly，详情参考：Renderer
{Object} scene：场景 readonly，详情参考：Scene
{Object} camera：相机 readonly，详情参考：Camera
{Object} controls：控制器 readonly，详情参考：Controls
{Object} clock：时钟，详情参考：Clock
{Object} animateEventList：动画函数数组 readonly
{Object} stats：帧率监视器 readonly
{Element} canvas：canvas 节点 readonly

methods

addStats()

添加帧率监视器
removeStats()

移除帧率监视器

addAnimate(animate)

添加全局的动画事件

参数
- {Funtion} fun：函数
- {Object} content：函数参数
返回值 animate

这里以状态监视器为例，创建函数，并且添加到全局的动画函数数组里面去

/**
* 状态更新
* @param statsControls
*/
_statsUpdate (statsControls) {
  statsControls.update()
}

/**
* 添加状态监测
*/
addStats () {
  if (!this.statsControls) this.statsControls = new Stats()
  this.statsControls.dom.style.position = 'absolute'
  this.viewerDom.appendChild(this.statsControls.dom)
  // 添加到动画
  this.statsUpdateObject = {
    fun: this._statsUpdate, // 函数名称，函数在上面
    content: this.statsControls // 绑定传入的参数
  }
  this.addAnimate(this.statsUpdateObject)
}

removeAnimate(animate)

添加全局的动画事件
- 参数
  - {Funtion} fun：函数
  - {Object} content：函数参数
- 返回值(添加的时候返回的值) animate
startSelectEvent(mouseType, isSelect, callback)

开始鼠标选中事件
- 参数
  - {Funtion} mouseType：函数 JavaScript鼠标事件
  - {bool} isSelect：函数参数
  - {funtion} callback：回调函数
stopSelectEvent()

关闭鼠标事件
startFirstPersonMove(model, position, speed, moveIndex)

改变场景模式
- 参数
  - {CtsModel} sceneMode：模型对象CtsModel
  - {Array} position：坐标对象[0,0,0]
  - {Number} speed：移动速度
  - {Number} moveIndex：模型动画

Viewer-API文档