- 博客(217)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 63. Three.js案例-不同材质属性来增强3D对象的真实感
使用Three.js创建一个包含两个立方体的3D场景，其中一个立方体应用了法向贴图以增强立体效果，而另一个则仅使用普通贴图。文中还讲解了环境光、聚光灯以及相关材质属性的设置方法。
2025-03-13 09:46:32
1095
原创 62. Three.js案例-创建多彩旋转立方体
通过`BoxGeometry`生成立方体几何结构，利用`MeshBasicMaterial`为每个面分配随机颜色，并通过`WebGLRenderer`进行渲染。
2025-03-03 09:38:57
869
原创 61. Three.js案例-彩色旋转立方体创建与材质应用
案例详细演示使用Three.js创建彩色旋转立方体的完整流程。通过WebGLRenderer初始化三维场景，配置PerspectiveCamera相机参数，使用BoxGeometry构建立方体结构，结合MeshBasicMaterial为每个面赋予随机颜色。
2025-03-03 09:32:04
1120
原创 60. Three.js案例-创建一个带有随机颜色面的旋转立方体
使用Three.js库创建一个带有随机颜色面的旋转立方体，并通过OrbitControls实现相机的交互控制。详细讲解了WebGLRenderer、Scene、PerspectiveCamera、OrbitControls、BoxGeometry、MeshBasicMaterial和Mesh等核心概念及其实现方法。
2025-01-09 09:21:39
1049
原创 59. Three.js案例-创建并渲染一个四面体的效果
使用Three.js创建并渲染一个四面体。通过配置WebGLRenderer实现抗锯齿效果，利用PerspectiveCamera设置合适的视角参数，结合TetrahedronGeometry生成四面体几何体，并采用MeshNormalMaterial展示其法线方向的颜色变化。
2025-01-09 09:12:36
852
原创 58. Three.js案例-创建一个带有红蓝配置的半球光源的场景
使用Three.js创建一个带有红蓝配置的半球光源的场景，并在其中添加一个旋转的球体。通过设置不同的光照参数，可以观察到球体表面材质的变化。文章涵盖了WebGLRenderer、PerspectiveCamera、HemisphereLight、SphereGeometry等核心知识点
2025-01-08 09:42:54
1303
原创 57. Three.js案例-创建一个带有聚光灯和旋转立方体的3D场景
使用Three.js创建一个带有聚光灯和旋转立方体的3D场景。通过设置WebGLRenderer、PerspectiveCamera、SpotLight以及BoxGeometry等核心组件，实现了一个动态的3D视觉效果。
2025-01-08 09:36:11
1087
原创 56. Three.js案例-创建一个包含点光源和旋转立方体的3D场景
使用Three.js创建一个包含点光源和旋转立方体的3D场景。详细讲解了WebGLRenderer、Scene、PerspectiveCamera、PointLight、PointLightHelper、BoxGeometry和MeshPhongMaterial等核心组件的用法。
2025-01-07 09:28:58
1036
原创 55. Three.js案例-创建立方体并添加光源辅助线
使用Three.js创建一个旋转的立方体，并为其添加方向光源及其辅助线。通过WebGL渲染器，用户可以在浏览器中查看到一个不断旋转的立方体，同时可以看到方向光源对立方体的影响以及光源的辅助线。文章详细讲解了WebGLRenderer、Scene、PerspectiveCamera、DirectionalLight、DirectionalLightHelper、BoxGeometry、MeshPhongMaterial等知识点
2025-01-07 09:20:51
653
原创 54. Three.js案例-创建正交照相机辅助工具
使用Three.js创建一个包含透视照相机和正交照相机的3D场景。通过创建一个绿色线框球体并使其沿特定轨迹运动，展示了正交照相机和透视照相机的不同特性。文中还讲解了WebGLRenderer、Scene、PerspectiveCamera、OrthographicCamera、CameraHelper、SphereBufferGeometry和MeshBasicMaterial等核心概念及其参数配置。
2025-01-06 09:29:03
850
原创 53. Three.js案例-使用样条曲线绘制3D图形
使用Three.js库创建一个基于样条曲线的3D图形，并为其添加纹理映射和线框盒。首先，我们创建了一个WebGL渲染器来处理图形渲染；接着，通过透视投影相机设置了观察视角；然后，利用三角函数生成了一组二维向量作为样条曲线上的点，再通过这些点构建出旋转体几何体，并赋予适当的材质和纹理；最后，为了更好地展示这个3D模型，还为其添加了一个红色的线框盒。
2025-01-06 09:18:18
873
原创 52. Three.js案例-创建实心和空心立方体
使用Three.js库创建一个包含实心和空心立方体的3D场景。首先详细讲解了WebGLRenderer渲染器、PerspectiveCamera透视相机、Scene场景、AmbientLight环境光、BoxGeometry立方体几何体、MeshNormalMaterial材质以及EdgesHelper边缘辅助线等核心组件的功能与用法。
2025-01-03 09:27:53
755
原创 51. Three.js案例-创建透明立方体
使用Three.js创建并渲染两个具有不同透明度的立方体。通过配置WebGLRenderer、PerspectiveCamera、Scene、AmbientLight、BoxGeometry和MeshNormalMaterial等组件，实现了一个简单的三维场景。
2025-01-03 09:22:12
1276
原创 50. Three.js案例-创建了一个带有纹理映射的立方体
使用Three.js创建一个带有纹理映射的立方体，并在立方体的一个面上添加文字。文章涵盖了`WebGLRenderer`、`PerspectiveCamera`、`Scene`、`AmbientLight`、`CubeGeometry`、`MeshBasicMaterial`、`CanvasTexture`等知识点，以及如何通过`requestAnimationFrame`实现动画效果。
2025-01-02 13:51:01
1033
原创 49. Three.js案例-使用Three.js创建旋转的骰子模型
使用Three.js库构建一个动态旋转的骰子模型。通过创建WebGL渲染器、透视相机、场景以及添加环境光和带纹理的立方体几何体，最终实现了骰子在白色背景下自动旋转的效果。此外，还讲解了关键类如`WebGLRenderer`、`PerspectiveCamera`、`Scene`等的具体用法及其构造函数中的重要参数含义。
2025-01-02 13:42:47
899
原创 48. Three.js案例-创建一个带有雾化效果深度感的立方体
使用Three.js创建一个带有雾化效果的简单立方体，并将其渲染到网页上。通过配置`WebGLRenderer`、`Scene`、`FogExp2`、`PerspectiveCamera`、`BoxGeometry`和`MeshLambertMaterial`，我们能够实现一个具有深度感的3D场景。
2024-12-31 09:23:39
1007
原创 47. Three.js案例-创建一个带有雾化效果的场景
使用 Three.js 创建一个带有雾化效果的 3D 场景，并在其中渲染一个圆球。通过设置WebGLRenderer、Scene、PerspectiveCamera、SpotLight 和 SphereGeometry 等关键组件，实现了逼真的光照和雾化效果。
2024-12-31 09:16:11
639
原创 46. Three.js案例-创建颜色不断变化的立方体模型
使用Three.js创建一个带有自定义着色器的旋转立方体。通过WebGLRenderer、Scene、PerspectiveCamera等基础组件，结合ShaderMaterial实现动态颜色变化的立方体。
2024-12-30 09:29:24
1547
原创 45. Three.js案例-创建绿色的球体模型
使用Three.js库在网页中创建并渲染一个绿色球体。通过讲解`WebGLRenderer`、`PerspectiveCamera`、`Scene`、`SpotLight`、`SphereGeometry`和`MeshLambertMaterial`等核心类的构造器和方法
2024-12-30 09:20:59
991
原创 44. Three.js案例-创建地球模型
使用Three.js创建并渲染100个立方体。通过配置`WebGLRenderer`、`PerspectiveCamera`、`Scene`、`BoxGeometry`和`MeshDepthMaterial`等组件，实现了立方体的创建和渲染。
2024-12-26 09:19:32
1046
原创 42. Three.js案例-绘制渐变色线条
使用Three.js库创建一个WebGL场景，并在其中绘制一条具有渐变颜色的线条。通过详细讲解`WebGLRenderer`、`Scene`、`PerspectiveCamera`、`Geometry`、`Vector3`、`Color`、`LineBasicMaterial`和`Line`等核心概念
2024-12-25 09:17:27
724
原创 41. Three.js案例-绘制魔方
如何使用Three.js创建一个包含27个立方体的魔方，并通过OrbitControls实现交互式相机控制。文章涵盖了WebGLRenderer、Scene、PerspectiveCamera、BoxGeometry、MeshBasicMaterial、Mesh及OrbitControls等核心知识点，
2024-12-24 09:22:17
893
原创 40. Three.js案例-绘制虚线空心矩形
使用 Three.js 绘制一个虚线空心矩形。通过创建 WebGL 渲染器、场景、透视相机以及使用 BufferGeometry 和LineDashedMaterial 来实现这一效果
2024-12-24 09:13:04
893
原创 39. Three.js案例-绘制指定弧度半球体
使用 Three.js 创建并渲染一个剖分后的球体。通过设置 WebGLRenderer 的抗锯齿属性、定义 PerspectiveCamera的视角及位置、创建 SphereGeometry 并应用 MeshNormalMaterial 来实现这一效果。
2024-12-23 14:00:31
1015
原创 38. Three.js案例-绘制半球体
利用Three.js库中的关键组件——WebGLRenderer、Scene、PerspectiveCamera、SphereGeometry和MeshNormalMaterial，在HTML页面中创建并渲染一个半球体。通过调整摄像机的角度和位置，结合适当的材质设置，能够生成具有视觉冲击力的效果。
2024-12-23 13:53:41
1058
原创 37. Three.js案例-绘制部分球体
如何使用Three.js库绘制一个部分球体，并详细讲解了`WebGLRenderer`、`Scene`、`PerspectiveCamera`、`SphereGeometry`和`MeshNormalMaterial`等核心类的使用方法。
2024-12-19 09:54:44
1446
原创 36. Three.js案例-创建带光照和阴影的球体与平面
是Three.js中最常用的渲染器，用于将场景渲染到网页上。使用Three.js创建一个带有光源和阴影的基本场景。通过创建渲染器、场景、相机、点光源、球体和平面，展示了如何设置光照和阴影效果
2024-12-19 09:49:47
1668
原创 35. Three.js案例-创建带阴影的球体与平面
是Three.js中用于渲染场景的主要类之一，它负责将场景中的对象渲染到画布上。如何使用Three.js创建一个带有阴影的球体和平面。通过设置渲染器、场景、相机、方向光、球体几何体、网格和平面几何体，实现了球体投射阴影并在平面上显示的效果
2024-12-18 09:37:16
593
原创 34. Three.js案例-创建球体与模糊阴影
使用 Three.js 创建一个带有模糊阴影的球体，并将其放置在一个平面上。通过 `WebGLRenderer` 渲染器、`Scene`场景、`PerspectiveCamera` 相机、`DirectionalLight` 方向光、`SphereBufferGeometry` 球体几何体、`Mesh` 网格对象、`PlaneGeometry` 平面几何体和 `MeshStandardMaterial` 标准材质等核心类，实现了球体投射出的阴影会根据光源的位置和强度产生模糊效果。
2024-12-18 09:27:09
1514
原创 33. Three.js案例-创建带阴影的球体与平面
如何使用 Three.js 创建一个带有阴影的球体和平面的 3D 场景。通过创建 WebGL 渲染器、场景、相机、聚光灯、球体和平面，并启用阴影映射功能，最终实现了动态的3D 效果
2024-12-17 09:30:20
996
原创 32. Three.js案例-创建带阴影的球体
如何使用Three.js创建一个带有阴影的球体并将其放置在一个支持接收阴影的平面上。通过详细的代码解析和知识点讲解，帮助读者理解Three.js中关键类的使用方法，如`WebGLRenderer`、`Scene`、`PerspectiveCamera`、`DirectionalLight`、`SphereBufferGeometry`、`Mesh`和`PlaneGeometry`等
2024-12-17 09:23:31
912
原创 31. Three.js案例-创建并旋转地球模型
使用Three.js库创建一个地球模型并实现地球的自转效果。通过创建WebGL渲染器、透视相机、场景、环境光、球体几何体、纹理加载器、网格Phong材质等组件，最终实现了地球的动态显示。
2024-12-16 09:38:02
971
原创 30. Three.js案例-绘制并渲染圆弧
如何使用 Three.js 绘制并渲染一个圆弧。通过创建 `WebGLRenderer` 渲染器、`Scene` 场景、`PerspectiveCamera` 相机以及`ArcCurve` 圆弧曲线，最终实现了圆弧的绘制和渲染。
2024-12-16 09:30:30
946
原创 29. Three.js案例-自定义平面图形
使用 Three.js 创建自定义平面图形并进行拉伸处理。通过 `WebGLRenderer` 渲染器、`Scene` 场景、`PointLight` 点光源、`PerspectiveCamera` 透视相机、`Shape` 平面图形类、`Path` 路径类、`ExtrudeGeometry` 拉伸几何体类、`Mesh` 网格类以及`OrbitControls` 轨道控制器，实现了自定义平面图形的绘制和动画效果。
2024-12-13 09:34:05
1239
原创 28. Three.js案例-创建圆角矩形并进行拉伸
如何使用 Three.js 创建一个圆角矩形并进行拉伸。通过 `WebGLRenderer` 渲染器、`PerspectiveCamera` 透视相机、`Scene`场景、`PointLight` 点光源、`Shape` 形状、`ExtrudeGeometry` 拉伸几何体、`Mesh` 网格和 `MeshPhongMaterial`网格Phong材质等核心组件，详细讲解了每个组件的构造器和常用方法。最后，通过 `OrbitControls` 轨道控制器实现了相机的交互控制。
2024-12-13 09:27:09
1160
原创 27. Three.js案例-创建与动画化矩形
使用Three.js创建并动画化多个矩形。通过使用`ExtrudeGeometry`，我们可以在指定路径上拉伸二维形状以创建三维模型。同时，通过`requestAnimationFrame`实现动态变化的动画效果。本文详细讲解了`WebGLRenderer`、`PerspectiveCamera`、`Scene`、`PointLight`、`Shape`、`ExtrudeGeometry`、`MeshPhongMaterial`和`OrbitControls`等核心类的使用方法和参数。
2024-12-12 09:16:25
628
原创 26. Three.js案例-自定义多面体
使用 Three.js 创建并渲染一个自定义多面体。通过定义顶点和面，我们可以创建出任意形状的多面体，并对其进行渲染。文章详细讲解了`WebGLRenderer`、`Scene`、`PerspectiveCamera`、`SpotLight`、`PolyhedronGeometry`、`MeshLambertMaterial`、`Mesh` 和`OrbitControls` 等类的构造器和常用方法。
2024-12-12 09:09:01
1301
原创 25. Three.js 案例 - 使用Three.js绘制空心与实心三角形
本文介绍了如何使用 Three.js 在 WebGL 渲染器中绘制空心和实心三角形。通过点击按钮，可以在场景中动态地绘制这两种类型的三角形。文章详细讲解了`WebGLRenderer`、`Scene`、`PerspectiveCamera`、`AmbientLight`、`Geometry`、`Line`、`Shape`、`ShapeGeometry`、`Mesh`、`LineBasicMaterial` 和 `MeshLambertMaterial` 等关键类的使用方法和参数。
2024-12-11 09:31:02
583
unity3d制作地图指示光标
2024-12-13
虚幻引擎打包成web后，内嵌到网页中，网页的事件和状态如何和网页沟通。
2024-03-22
threejs controls指向那个三维坐标
2023-10-24
TA创建的收藏夹 TA关注的收藏夹
TA关注的人