![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
threejs
漏刻有时
数据可视化和地图可视化技术研究
展开
-
Threejs入门进阶实战案例(6):对象的通用属性/函数
Threejs 3D对象的通用属性与函数,属性值可以直接通过console.log查看,具体如下表格:属性/函数描述position决定对象相对于其父对象的位置,大部分情况下一个对象的父对象是THREE.Scene()对象rotation对象的局部旋转,单位为弧度scale控制对象的缩放up空间向上的方向,缺省是THREE.Vector3(0, 1, 0)translateX/ranslateY/ranslateZ(distance)沿X/Y/Z轴平移原创 2020-06-29 16:59:45 · 618 阅读 · 0 评论 -
Threejs入门进阶实战案例(5):坐标系理解时辅助坐标系的使用
从2D到3D最大的思维模式就是平面思维到空间思维的模式,如果不能在脑中自动补齐3D坐标轴,则后续牵涉到的网格模型(mesh)、照相机(camere)、灯光(light)以及多个几何体(geometry)进行空间布局时,都是严重的思维障碍。因此在了解threejs的坐标系时,先使用辅助坐标系类,会更直观。 /* 辅助坐标系 */ // 辅助坐标系 参数250表示坐标系大小,可以根据场景大小去设置; var axesHelper = new THREE.AxesH原创 2020-06-29 14:50:24 · 1582 阅读 · 0 评论 -
Threejs入门进阶实战案例(4):addEventListener() 方法自适应窗口显示的方案
addEventListener() 方法调整照相机和渲染器尺寸。 /* 窗口变动触发 */ function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight);原创 2020-06-28 15:44:45 · 1620 阅读 · 1 评论 -
Threejs入门进阶实战案例(3):视频贴图的解决方案
Texture纹理贴图需要使用TextureLoader()异步加载图片,而视频纹理(VideoTexture)创建一个使用视频来作为贴图的纹理对象时,需要在当前文档创建使用的Video元素。原创 2020-06-28 14:58:30 · 1712 阅读 · 1 评论 -
Threejs入门进阶实战案例(2):正常静态渲染和渲染动画的解决方案
function fetchData(cb) { // 通过 setTimeout 模拟异步加载 setTimeout(function () { cb({ categories: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"], data: [5, 20, 36, 10, 10, 20] ...原创 2020-06-28 14:30:02 · 770 阅读 · 0 评论 -
Threejs入门进阶实战案例(1):使用TextureLoader进行map贴图显示黑色的解决方案
为什么要学习Three.js?数据可视化的需要,也是数据可视化具备商业潜质的有效补充。原创 2020-06-28 14:26:13 · 3073 阅读 · 8 评论