const threeBehavior = Behavior({
|
methods: {
|
updateThreeMatrix() {
|
// 同步 VKCamera 矩阵信息到 Three Camera
|
if (VKCamera) {
|
// VK接管相机矩阵
|
this.camera.matrixAutoUpdate = false
|
|
// VK ViewMatrix 返回列主序
|
this.camera.matrixWorldInverse.fromArray(VKCamera.viewMatrix)
|
this.camera.matrixWorld.getInverse(this.camera.matrixWorldInverse)
|
|
const projectionMatrix = VKCamera.getProjectionMatrix(NEAR, FAR)
|
|
// projectionMatrix[0] = projectionMatrix[0] / 2;
|
// projectionMatrix[5] = projectionMatrix[5] / 2;
|
|
// VK 返回列主序
|
// 设置 投影矩阵
|
this.camera.projectionMatrix.fromArray(projectionMatrix)
|
this.camera.projectionMatrixInverse.getInverse(this.camera.projectionMatrix)
|
}
|
|
|
// 存在model，更新矩阵
|
if (this.modelWrap && this.points3d && this.shoeTransform) {
|
// console.log('toUpdate')
|
const THREE = this.THREE;
|
|
// 顶点偏移矩阵
|
const positionMat = new THREE.Matrix4();
|
// 认为点 0 0 0
|
positionMat.setPosition(0, 0, 0);
|
|
// Anchor返回矩阵，实际上就是完整的 modelView matrix
|
const anchorMatrix = new THREE.Matrix4();
|
// 目前返回的是行主序矩阵
|
anchorMatrix.set(
|
this.shoeTransform[0], this.shoeTransform[1], this.shoeTransform[2], this.shoeTransform[3],
|
this.shoeTransform[4], this.shoeTransform[5], this.shoeTransform[6], this.shoeTransform[7],
|
this.shoeTransform[8], this.shoeTransform[9], this.shoeTransform[10], this.shoeTransform[11],
|
this.shoeTransform[12], this.shoeTransform[13], this.shoeTransform[14], this.shoeTransform[15],
|
);
|
// 两者叠加
|
// const modelWorld = positionMat.multiply(anchorMatrix);
|
|
const modelWorld = anchorMatrix;
|
|
const pos = new THREE.Vector3();
|
const quaternion = new THREE.Quaternion();
|
const scale = new THREE.Vector3();
|
|
// 解析出 实际的 信息
|
modelWorld.decompose(pos, quaternion, scale );
|
console.log(pos, quaternion, scale);
|
|
// 设置到容器节点上
|
this.modelWrap.position.set(pos.x, pos.y, pos.z);
|
this.modelWrap.quaternion.set(quaternion.x, quaternion.y, quaternion.z, quaternion.w);
|
this.modelWrap.scale.set(scale.x, scale.y, scale.z);
|
|
if (this.model) {
|
// 先把模型放置在脚踝
|
// this.model.position.set(this.points3d[0].x, this.points3d[0].y, this.points3d[0].z);
|
}
|
|
if (this.hintBoxList && this.hintBoxList.length > 0) {
|
// console.log('ready to set', this.hintBoxList);
|
// 存在提示列表，则更新点信息
|
for (let i = 0; i < this.hintBoxList.length; i++) {
|
const hintBox = this.hintBoxList[i];
|
hintBox.position.set(this.points3d[i].x, this.points3d[i].y, this.points3d[i].z);
|
}
|
// console.log('seted', this.hintBoxList);
|
}
|
|
|
// debug 用信息
|
if (!loggerOnce) {
|
// console.log('positionMat', positionMat);
|
// console.log('anchorMat', anchorMat);
|
// console.log('modelWorld', modelWorld);
|
|
// console.log('projectionMatrix', this.camera.projectionMatrix);
|
|
// console.log('this.modelWrap.position', this.modelWrap.position);
|
// console.log('this.modelWrap.quaternion', this.modelWrap.quaternion);
|
// console.log('this.modelWrap.scale', this.modelWrap.scale);
|
|
// console.log('domSize', this.data.domWidth, this.data.domHeight)
|
// VK 直接数值
|
console.log('joints', Array.from(this.points3d))
|
console.log('viewMatrix', Array.from(VKCamera.viewMatrix))
|
console.log('projectionMatrix', Array.from(VKCamera.getProjectionMatrix(NEAR, FAR)))
|
console.log('anchorTransform', Array.from(this.shoeTransform));
|
|
loggerOnce = true;
|
}
|
}
|
|
// 渲染 Three 场景
|
this.renderer.autoClearColor = false
|
this.renderer.state.setCullFace(this.THREE.CullFaceBack)
|
this.renderer.render(this.scene, this.camera);
|
// 为什么去掉这句话会画不出来，我感觉大概率是YUV的面朝向错了
|
this.renderer.state.setCullFace(this.THREE.CullFaceNone)
|
},
|
addShoeHintBox() {
|
const THREE = this.THREE;
|
|
const wrap = this.modelWrap;
|
|
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
|
const boxScale = 0.3;
|
|
const hintBoxList = [];
|
for (let i = 0; i < 8; i++) {
|
const colorHex = (i * 2).toString(16);
|
const material = new THREE.MeshPhysicalMaterial( {
|
metalness: 0.0,
|
roughness: 0.5,
|
color: parseInt(`${colorHex}${colorHex}${colorHex}${colorHex}${colorHex}${colorHex}`, 16),
|
});
|
const mesh = new THREE.Mesh( geometry, material );
|
mesh.position.set(0, 0, 0);
|
mesh.scale.set(boxScale, boxScale, boxScale);
|
wrap.add( mesh );
|
hintBoxList.push(mesh);
|
}
|
|
this.hintBoxList = hintBoxList;
|
},
|
},
|
})
|
|
export default threeBehavior;
|
