袋鼠云研发手记 | Easy[V]数据可视化揭秘:Threejs倒影解析
Posted 袋鼠云技术团队
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了袋鼠云研发手记 | Easy[V]数据可视化揭秘:Threejs倒影解析相关的知识,希望对你有一定的参考价值。
袋鼠云研发手记
作为一家创新驱动的科技公司,袋鼠云每年研发投入达数千万,公司80%员工都是技术人员,()、()等产品也在不断迭代。在进行产品研发的过程中,技术小哥哥们能文能武,不断提升产品性能和体验的同时,也把这些提升和优化过程记录下来,现录入“袋鼠云研发手记”专栏中,以和业内童鞋们分享交流。
袋鼠云前端团队
知乎专栏@DTUX
袋鼠云UX团队拥有十多名专家级别、经验丰富的前端开发工程师,支撑公司大数栈产品线的不同子项目的开发需求,具体包括数据中台产品「数栈」与数据可视化产品Easy[V]两大块。
在长期的项目实践与产品迭代过程中,团队成员在 React 技术栈、数据可视化技术、前端工程化等细分领域上不断深耕探索,积累了丰富的经验与最佳实践,并分享在知乎专栏@DTUX:https://zhuanlan.zhihu.com/c_109929958
第六期
Easy[V]数据可视化揭秘:Threejs倒影解析
文 | 围墙 袋鼠云高级前端开发工程师
<script src="js/objects/Reflector.js"></script>
var geometry = new THREE.CircleBufferGeometry(40, 64);
var groundMirror = new THREE.Reflector(geometry, {
textureWidth: WIDTH * window.devicePixelRatio,
textureHeight: HEIGHT * window.devicePixelRatio
});
1
构建虚拟相机
reflectorWorldPosition.setFromMatrixPosition( scope.matrixWorld );
cameraWorldPosition.setFromMatrixPosition( camera.matrixWorld );
rotationMatrix.extractRotation( scope.matrixWorld );
normal.set( 0, 0, 1 );
normal.applyMatrix4( rotationMatrix );
// 计算相机位置到反射平面位置到向量
view.subVectors( reflectorWorldPosition, cameraWorldPosition );
// 当向量与反射面当法向量夹角说明相机在反射面的背面,则直接返回不进行倒影的渲染
if ( view.dot( normal ) > 0 ) return;
// 得到反射向量的反向量
view.reflect( normal ).negate();
// 投影面位置加上该向量得到虚拟相机的位置
view.add( reflectorWorldPosition );
rotationMatrix.extractRotation( camera.matrixWorld );
lookAtPosition.set( 0, 0, - 1 );
lookAtPosition.applyMatrix4( rotationMatrix );
lookAtPosition.add( cameraWorldPosition );
target.subVectors( reflectorWorldPosition, lookAtPosition );
target.reflect( normal ).negate();
target.add( reflectorWorldPosition );
virtualCamera.position.copy( view );
virtualCamera.up.set( 0, 1, 0 );
virtualCamera.up.applyMatrix4( rotationMatrix );
virtualCamera.up.reflect( normal );
virtualCamera.lookAt( target );
virtualCamera.far = camera.far;
virtualCamera.updateMatrixWorld();
virtualCamera.projectionMatrix.copy( camera.projectionMatrix );
2
将虚拟相机的渲染结果映射到投影面上
textureMatrix.set(
0.5, 0.0, 0.0, 0.5,
0.0, 0.5, 0.0, 0.5,
0.0, 0.0, 0.5, 0.5,
0.0, 0.0, 0.0, 1.0
);
textureMatrix.multiply( virtualCamera.projectionMatrix );
textureMatrix.multiply( virtualCamera.matrixWorldInverse );
textureMatrix.multiply( scope.matrixWorld );
vUv = textureMatrix * vec4( position, 1.0 );
3
调试完善
reflectorPlane.setFromNormalAndCoplanarPoint( normal, reflectorWorldPosition );
reflectorPlane.applyMatrix4( virtualCamera.matrixWorldInverse );
clipPlane.set( reflectorPlane.normal.x, reflectorPlane.normal.y, reflectorPlane.normal.z, reflectorPlane.constant );
var projectionMatrix = virtualCamera.projectionMatrix;
q.x = ( Math.sign( clipPlane.x ) + projectionMatrix.elements[ 8 ] ) / projectionMatrix.elements[ 0 ];
q.y = ( Math.sign( clipPlane.y ) + projectionMatrix.elements[ 9 ] ) / projectionMatrix.elements[ 5 ];
q.z = - 1.0;
q.w = ( 1.0 + projectionMatrix.elements[ 10 ] ) / projectionMatrix.elements[ 14 ];
clipPlane.multiplyScalar( 2.0 / clipPlane.dot( q ) );
projectionMatrix.elements[ 2 ] = clipPlane.x;
projectionMatrix.elements[ 6 ] = clipPlane.y;
projectionMatrix.elements[ 10 ] = clipPlane.z + 1.0 - clipBias;
projectionMatrix.elements[ 14 ] = clipPlane.w;
4
可视化工具
即使是没有设计经验或技术背景,通过组件拖拽、图层、画布等可视化操作方式,也可快速创造出美观酷炫的数据大屏。
袋鼠云数据可视化团队在Easy[V]—3D地图组件中集成了倒影特效,用户仅拖、拉、拽等简单操作,不用一行行码代码、调参数,即可轻松实现倒影效果,以下为操作视频:
欢迎了解袋鼠云数栈
或直接点击“阅读原文”查看
感兴趣的童鞋
可以微信后台留言和我们联系哦~
400-002-1024
了解数据中台解决方案&数栈
以上是关于袋鼠云研发手记 | Easy[V]数据可视化揭秘:Threejs倒影解析的主要内容,如果未能解决你的问题,请参考以下文章