Three.js
文章平均质量分 73
threejs案例
布达拉三世
这个作者很懒,什么都没留下…
展开
-
理解Three.js的相机
Three.js创建的场景是三维的,而我们使用的显示器显然是二维的,相机就是抽象的定义了三维空间到二维显示器的投影方式。canvas的宽度设置为了600px*400px,若要保持横竖比例,照相机的水平距离是6、垂直距离是4(小编理解的类似给DOM元素设置背景图片一样,图片的宽高比要与元素的宽高比一致,不然图片会变形)。相机位置变化后(右上角轻微移动),观察物体的方向也改变了,故设置它看向原点方向,会有俯视感,看到更多的线;而设置相机初始化参数,只是改变了视景体,相机位置并未变化,一直看向原点,因此无变化。原创 2024-04-02 08:30:07 · 1117 阅读 · 0 评论 -
three.js昼夜切换,白天黑夜的实现(含源码)
加载三维场景模型,动态过渡至白天到黑夜,黑夜到白天,模拟虚拟世界。原创 2024-03-27 08:35:40 · 1284 阅读 · 0 评论 -
什么是WebGL和为什么用Three.js
Three.js是一个在浏览器里创造3D内容的 JavaScript库,它让我们能够更加轻松的为网页创建3D体验。原创 2024-03-22 08:51:26 · 1057 阅读 · 0 评论 -
Threejs 开发技巧
19. 着色器中尽量不用Perlin noise,会影响性能,除非用在动画中。可以使用烘焙的灯光或者自带的AmbientLight, DirectionalLight。如果变量不需要改变,我们使用全局定义代替在uniforms定义。20. 着色器代码中尽量避免使用if语句,用 clamp代替。当把模型进行UV拆分的时候,删除隐藏的面,并应用缩放。如果添加或者删除灯光,所有相关的材质都将重新编译。6. 少用阴影,可以用烘培的阴影替代。如果需要顶点动画,在顶点着色器里进行。10. 贴图 Textures。原创 2024-03-21 17:28:38 · 310 阅读 · 0 评论 -
Three.js快速入门
Three.js入门原创 2024-03-20 11:56:49 · 1055 阅读 · 0 评论 -
Three.js 创建 3D 地球
Three.js经常会和WebGL混淆, 但也并不总是,Three.js其实是使用WebGL来绘制三维效果的。WebGL是一个只能画点、线和三角形的非常底层的系统。想要用WebGL来做一些实用的东西通常需要大量的代码, 这就是Three.js的用武之地。它封装了诸如场景、灯光、阴影、材质、贴图、空间运算等一系列功能,让你不必要再从底层WebGL开始写起。原创 2024-03-14 09:43:10 · 2613 阅读 · 0 评论 -
Vue项目中使用Three.js开发三维IT机房
为了便于访问和区分模型,需要对模型进行规范命名,如机房中的IT机柜都是按照cabinet-001、cabinet-002、cabinet-003 命名的。假设IT机柜的名称都是唯一的,那我们便可以基于这个名称从后端获取相应机柜的详细信息。GLTF 模型文件包含了整个场景的数据,比如几何体、材质、动画、相机等。在建模软件中,同一类型的模型文件可以放入一个数组里,数组可以多层嵌套。当前的机房模型比较简单,没有使用数组,所有的Mesh对象都是平展开的。简化模型,能用贴图表现的细节,就用贴图。建模和导出gltf。原创 2024-03-13 09:53:19 · 2397 阅读 · 0 评论 -
Three.js 实现年会3D抽奖页面(含源码)
先存下照片墙、球、散乱三种状态的坐标点,然后切换抽奖状态时,同时切换,通过tween切换照片的位置,这样就实现了动画。代码几年前写的,挺垃圾的,没考虑性能,也没有做啥优化。写之前的那段时间,刚好逛博客,看到别个大神写的threejs版《元素周期表》,这效果大体有点近似。高清的星空壁纸,太大了,如果是有点动效的gif,那体积更大。中奖时的音乐,一段布灵布灵的铃声。抽奖嘛,光效果是不够的,还得有点音乐才好。抽奖的照片,还得在照片球的中间,位置。这个时候的动画,主要是两个:照片切换、照片球的转动。原创 2024-03-12 11:23:26 · 1353 阅读 · 0 评论