❤️❤️--three.js
文章平均质量分 78
web可视化3d技术-three.js的学习
suoh's Blog
My life is a straight line,turning just for you.
展开
-
【three.js】坐标辅助器和轨道控制器
结合上一篇基本的3d页面代码,我们在里面添加坐标辅助器,也就是x y z轴坐标系,这样可以更直观的查看物体的位置。现在我们设置的立方体是自动旋转的,如果我们不想让他自己旋转,想手动拖拽,如何实现呢?查看效果,z轴不显示是因为,z轴是正对我们脸部,从我们正面看就是一个点。其实就是可以让拖拽或者放大缩小的行为不那么生硬,可以使其慢慢停止下来。看效果 ,用鼠标拖动并松开鼠标时,会慢慢停止,而不是立马停止。为了让z轴显示出来,我们修改相机的位置。效果,可以自动旋转,也可拖拽。这时就用到了轨道控制器。原创 2023-10-09 14:33:35 · 518 阅读 · 0 评论 -
【three.js】结合vue进行开发第一个3d页面
如果我们想要不断的渲染,让它动起来,看到它不同方位的形状,需要调用渲染函数,如下所示。效果:由于我们设置的是从z轴看这个正方体,因此正对z轴看到的是平面。此时就完成了在vue中开发的一个简单的3d页面。回车后,依次输入项目名,选择vue和Js开发。新建一个项目目录,在集成终端打开,输入。将上面的静态渲染改为下面的旋转动画渲染。接下来我们开始安装three。然后安装依赖并运行项目。原创 2023-10-09 11:36:27 · 2089 阅读 · 0 评论 -
【three.js】简介和本地部署
实现企业网站三维呈现,让企业形象更直观、更立体地展现给客户,打破传统平面展示模式,打造智慧、个性、创新的企业形象。因此我们可以访问b站大佬在国内搭建好的本地three.js官网,大家访问如下链接即可,当然也可以自己搭建,下面有讲解。什么是点、线、面、几何体、材质、物体、场景、相机、渲染器、动画、控制器等基础概念,搞定一个最基础的场景和3d物体的显示。接着3d渲染要真实性,肯定离不开PBR,详细了解什么是PBR,PBR基于物理的光照原理的渲染,。由于访问three.js官网是国外的网站,非常慢。原创 2023-10-08 11:33:13 · 3102 阅读 · 1 评论