XDX ( 西电X )

提供统一 API , 供其他组使用

需要下载两个包, @tweenjs/tween.js 以及 three

• npm install @tweenjs/tween.js
• npm install three
• 用 yarn 也行

初始化

初始化语句尽量放在 mounted 中

初始化最简单语句

const dom = document.querySelector('#canvas')
// dom 元素为 canvas 对象
const xdx = new XDX.APP({
    canvas: dom
})

需要相机自由移动

xdx.addCameraControl()

添加灯光效果

// 默认添加的为环境光
// type 默认值为 1, color 默认值为 0x999999, intensity 为 0.5
xdx.addLight()

// 有返回值, 返回值是 灯的对象

// 非默认的光
// 参数介绍, 
// type: 1 是环境光, 任何地方都有这个光; 2 是点光, 就像家里的圆形灯
// color: 是光发出的颜色
// intensity: 光的强度, 0-1, 建议全部光源加一起等于 1
xdx.addLight({type: 1, color: 0x888888, intensity: 0.5})

添加模型

添加远程对象

 // 返回的是 promise 对象, then 中获取模型对象
 let promise = xdx.addModel('/model/dog.FBX')
 let dogModel;
 promise.then(model => {
     xdx.scene.add(model)
     model.scale.set(0.4, 0.4, 0.4)
     model.position.set(0, -40, 0)
     dogModel = model;
	 // 注册模型点击事件
     xdx.addModelEvent(model, 'click')
     // 添加模型后可以对模型进行一些操作, 比如 model.position.set(x, x, x);
 })

添加已有对象

// 添加线型灯
addMesh('lineLight')