Threejs
文章平均质量分 95
MossGrower
世界是你们的,也是他们的,但是归根结底是我们程序猿的!!!
展开
-
13. Threejs案例-绘制3D文字
13. Threejs案例-绘制3D文字FontLoader一个用于加载 `JSON` 格式的字体的类。返回 `font`,返回值是表示字体的 `Shape` 类型的数组。其内部使用 `FileLoader` 来加载文件。.TextGeometry (文本缓冲几何体)一个用于将文本生成为单一的几何体的类。它是由一串给定的文本,以及由加载的 `font` (字体) 和该几何体 `ExtrudeGeometry` 父类中的设置所组成的参数来构造的。原创 2024-02-05 09:47:25 · 1438 阅读 · 0 评论 -
12. Threejs案例-绘制颜色渐变圆柱体
12. Threejs案例-绘制颜色渐变圆柱体法线网格材质(MeshNormalMaterial)一种把法向量映射到RGB颜色的材质。构造函数(Constructor)MeshNormalMaterial( parameters : Object )parameters - (可选)用于定义材质外观的对象,具有一个或多个属性。材质的任何属性都可以从此处传入(包括从Material继承的任何属性)。原创 2024-02-04 13:22:25 · 930 阅读 · 0 评论 -
11. Threejs案例-绘制网格状圆环扭结
11. Threejs案例-绘制网格状圆环扭结圆环缓冲扭结几何体(TorusKnotGeometry)创建一个圆环扭结,其特殊形状由一对互质的整数,p和q所定义。如果p和q不互质,创建出来的几何体将是一个环面链接。原创 2024-02-04 09:47:10 · 836 阅读 · 0 评论 -
10. Threejs案例-绘制网格状圆环
10. Threejs案例-绘制网格状圆环TorusGeometry (圆环缓冲几何体)一个用于生成圆环几何体的类。根据圆环和材质创建网格原创 2024-02-02 11:03:47 · 875 阅读 · 0 评论 -
9. Threejs案例-绘制空心扇形和实心扇形
9. Threejs案例-绘制空心扇形和实心扇形创建一个新的圆形几何体,参数分别是:半径、扇形的分段数、起始角度、扫略角度。这里设置了起始角度和扫略角度,以创建扇形效果。创建一个新的材质,设置颜色为绿色,并开启线框模式 (wireframe) 以显示为空心效果 创建一个新的圆形几何体,参数分别是:半径、扇形的分段数、起始角度、扫略角度。这里设置了起始角度和扫略角度,以创建扇形效果。注意这里的分段数较少,所以显示为实心效果。 创建一个新的材质,设置颜色为绿色,以显示为实心效果。注意这里没有设置wiref原创 2024-02-02 10:51:36 · 581 阅读 · 0 评论 -
7. Threejs案例-追随鼠标移动和实现视差效果
7. Threejs案例-追随鼠标移动和实现视差效果定义一个包含图片URL的数组,这些图片将被用于立方体纹理的六个面,使用CubeTextureLoader创建一个立方体纹理,并加载上面定义的图片URLs,创建一个3D场景,并设置其背景为上面创建的立方体纹理,创建一个ParallaxBarrierEffect效果实例,用于实现视差屏障效果,并将渲染器传入该效果中设置其尺寸大小以匹配窗口大小,使用ParallaxBarrierEffect效果来渲染3D场景。这个效果可能会产生视差效果,使得前景和背景在不同的原创 2024-02-01 15:54:47 · 740 阅读 · 0 评论 -
8. Threejs案例-SVG渲染器和WEBGL渲染器对比
8. Threejs案例-SVG渲染器和WEBGL渲染器对比SVGRenderer 被用于使用 SVG 来渲染几何数据创建SVG渲染器,并设置其大小为窗口大小创建WebGL渲染器,开启抗锯齿功能,并设置其大小为窗口大小创建三个线段,设置其材质、大小和旋转属性,并将它们添加到场景中创建三个线段,设置其材质、大小和旋转属性,并将它们添加到场景中原创 2024-02-01 16:34:10 · 1509 阅读 · 0 评论 -
6. Threejs案例-物理引擎模拟小球下落和碰撞
6. Threejs案例-物理引擎模拟小球下落和碰撞异步加载并初始化Ammo物理引擎。Ammo是一个开源的物理引擎,常用于3D游戏和模拟。将球体网格添加到物理引擎中,并设置其质量为1使用物理引擎设置球体的真实位置原创 2024-01-31 13:39:33 · 1134 阅读 · 0 评论 -
5. Threejs案例-制作半色调和旋转效果
5. Threejs案例-制作半色调和旋转效果在场景中添加雾效果,颜色为黑色,近雾距离为1,远雾距离为1000,创建一个立方体的几何体,参数分别是:长度、宽度和高度,段数在X、Y和Z轴上分别是2、2和2,创建一个EffectComposer实例,用于在渲染过程中应用后期效果,创建一个RenderPass实例,用于将场景渲染到帧缓冲中,定义HalftonePass效果所需的参数,包括形状、半径、旋转角度等视觉效果参数原创 2024-01-31 13:15:31 · 759 阅读 · 0 评论 -
4. Threejs案例-制作线框和图片纹理效果
4. Threejs案例-制作线框和图片纹理效果使用TextureLoader加载一张图片作为纹理,然后设置这个纹理的各向异性过滤比例为4创建一个新的基本材质,使用上面加载的纹理作为贴图创建另一个新的3D物体,同样由几何体和材质构成,但这次使用的是上面加载的纹理材质创建一个EffectComposer对象,用于管理后期效果(如模糊、景深等)的渲染过程将场景添加到EffectComposer中,以便进行后期渲染处理创建一个SMAAPass对象,用于实现运动模糊效果。这里还指定了输出画面的宽度和高度。原创 2024-01-30 09:59:17 · 684 阅读 · 0 评论 -
3. Threejs案例-制作模糊效果
3. Threejs案例-制作模糊效果创建一个EffectComposer对象,用于实现后期特效(如模糊)创建一个RenderPass对象,用于将场景渲染到屏幕上将RenderPass添加到EffectComposer中,以便进行后期处理创建一个TriangleBlurShader对象,用于实现模糊效果禁用模糊效果,开始时不会应用模糊效果设置模糊效果的参数值,这里将模糊效果设置为沿着x和y方向都偏移0.05个单位将模糊效果添加到EffectComposer中,以便在渲染过程中应用模糊效果原创 2024-01-30 09:40:30 · 953 阅读 · 0 评论 -
# 2. Threejs案例-绘制线框世界地图
Threejs案例-绘制线框世界地图遍历myWorldGeometry.features数组,数组中的每个元素代表一个世界地图的特性,获取当前特性(国家)的经纬度坐标数组的长度,遍历当前特性(国家)的经纬度坐标数组,调用drawWorldLine函数绘制线条,参数为当前坐标和特性索引、子特性索引如果坐标点存在,则调用drawWorldLine函数,参数为当前坐标和特性索引、子特性索引创建一个新的THREE.Geometry对象,用于存储3D对象的几何信息原创 2024-01-29 13:32:28 · 866 阅读 · 0 评论 -
1. Threejs案例-机械手动画
# 1. Threejs案例-机械手动画创建一个新的JSONLoader对象,用于加载3D模型,使用load方法异步加载一个3D模型文件,创建一个SkinnedMesh对象,该对象表示一个带有骨骼动画的3D网格,使用MeshLambertMaterial作为材质,设置颜色为0xf4b397,并开启skinning属性以支持骨骼动画创建一个新的Tween对象,旋转手指的骨骼,旋转手腕的骨骼原创 2024-01-29 10:11:50 · 170 阅读 · 0 评论 -
Three.js 基础- 第 2 章 - 几何体BufferGeometry
Three.js 基础- 第 2 章 - 几何体BufferGeometry1. 几何体顶点位置数据和点模型2. 线模型对象3. 网格模型(三角形概念)4. 构建一个矩形平面几何体5. 几何体顶点索引数据6. 顶点法线数据7. 查看threejs自带几何体顶点8. 旋转、缩放、平移几何体原创 2023-04-14 16:11:56 · 1347 阅读 · 1 评论