Three.js前端三维图形开发案例集锦

第1章场景

001在场景中自定义光源绘制立方体

002使用正交照相机绘制多个立方体

003使用CameraHelper绘制正交照相机

004使用透视照相机绘制多个立方体

005使用CameraHelper绘制透视照相机

006使用透视照相机滚动浏览全景图

007使用鼠标拖曳功能查看并缩放全景图

008使用鼠标拖曳功能播放全景视频

009在场景中添加粒子实现星空背景

010使用六幅图像的天空盒设置背景

011使用一个图像文件创建天空盒

012使用TransformControls平移对象

013使用TransformControls拉伸对象

014使用TransformControls旋转对象

015使用DragControls任意拖曳对象

016使用OrbitControls任意缩放对象

017使用OrbitControls旋转照相机

018在多个对象中使用鼠标选择对象

019在鼠标单击对象时改变对象颜色

020使用线性雾设置场景的雾化效果

021使用线性雾渲染场景的多个对象

022使用指数雾设置场景的雾化效果

023在场景中使用ArrowHelper绘制箭头

024在场景中使用AxesHelper绘制坐标轴

025使用CSS3DRenderer渲染全景图

026使用CSS3DRenderer渲染三维对象

027使用SVGRenderer渲染线条宽度

028使用多个渲染器渲染相同的场景

029在场景中统一设置所有对象的材质

030在场景中统一调整所有对象的亮度

031使用JSON格式保存和加载网格对象

032使用JSON格式保存和加载整个场景

第2章几何体

033使用图像设置立方体的各个表面

034使用多个图像设置立方体的表面

035使用多种颜色设置立方体的表面

036使用视频设置立方体的各个表面

037使用颜色和视频设置立方体表面

038使用画布贴图设置立方体的表面

039使用画布动画设置立方体的表面

040使用天空盒背景设置立方体表面

041根据索引设置立方体face的材质

042隐藏或显示立方体的指定表面

043在场景中根据透明度绘制立方体

044在场景中绘制圆角化的立方体

045在场景中绘制居中显示的魔方

046在场景中围绕坐标轴旋转立方体

047在场景中根据名称旋转立方体

048在场景中绘制普通的圆柱体

049在场景中绘制被切割的圆柱体

050在场景中根据圆柱体绘制圆台

051在场景中根据圆柱体绘制沙漏

052在场景中绘制旋转的圆柱体

053在场景中实现动态缩放圆柱体

054在场景中绘制普通的圆锥体

055在场景中绘制被切割的圆锥体

056在经度方向上根据弧度绘制球体

057在纬度方向上根据弧度绘制球体

058在经纬度方向上根据弧度绘制球体

059在场景中以嵌套方式绘制多个球体

060在场景中同时绘制球体和圆柱体

061在场景中绘制持续旋转的球体

062在场景中绘制旋转的地球模型

063在场景中实现小球围绕大球旋转的效果

064在场景中围绕隐藏的中心旋转球体

065在场景中实现沿着轨道旋转球体的效果

066在场景中为球体添加弹跳动画

067在场景中绘制整周样条曲线图形

068在场景中绘制半周样条曲线图形

069在场景中绘制样条曲线及其图形

070在场景中绘制样条曲线的线框盒

071在场景中绘制旋转的圆环面

072在场景中绘制旋转的扇面

073在场景中绘制正弦样式的管子

074在场景中自定义曲线绘制管子

075在场景中自定义曲线绘制扭结

076在场景中自定义顶点绘制曲线

077在场景中绘制甜甜圈式的圆环

078在场景中根据弧度绘制半圆环

079在场景中绘制救生圈式的圆环

080在场景中绘制多次旋转的圆环结

081在场景中隐藏或显示圆环结

082在场景中绘制自定义多面体

083使用多面体方法绘制八面体

084使用多面体方法绘制四面体

085在场景中自定义顶点绘制凸面体

086在场景中绘制立方体的边框线

087在场景中绘制二十面体的边框线

088在场景中绘制十二面体的边框线

089在场景中使用虚线绘制对象边框

090在场景中绘制多条不连续的线段

091在场景中使用渐变色线条绘制图形

092在场景中自定义线条的宽度和颜色

093在场景中根据二维坐标绘制螺线

094在场景中根据三维坐标绘制螺线

095在场景中使用虚线绘制空心矩形

096在场景中根据路径拉伸圆角矩形

097在场景中根据路径拉伸多个矩形

098在场景中拉伸自定义的SVG图形

099在场景中根据顶点绘制空心三角形

100在场景中根据顶点绘制空心七边形

101在场景中根据顶点绘制空心五角星

102在场景中根据指定厚度绘制五角星

103在场景中沿着随机曲线拉伸五角星

104在场景中根据顶点绘制空心六角星

105在场景中根据边数绘制多边形

106在场景中使用曲线绘制桃心

107在场景中使用虚线绘制桃心

108在场景中根据厚度和斜角绘制桃心

109在场景中沿着桃心边线移动小球

110在场景中使用多个桃心构建球体

111在场景中根据半径和切片绘制圆

112在场景中根据指定参数绘制扇形

113在场景中根据指定参数绘制圆弧

114在场景中根据指定参数绘制椭圆

115通过自定义函数绘制克莱因瓶

116通过自定义函数绘制莫比乌斯环

117通过自定义函数绘制NURBS曲面

118通过自定义函数绘制波浪图形

119通过自定义函数绘制平面图形

120在场景中为平面图形添加波浪

121在场景中绘制法向量贴图波浪

122在场景中绘制太阳照射的波浪

123在场景中绘制自定义平面图形

124在平面图形的前后设置相同贴图

125在平面图形的前后设置不同贴图

126使用FontLoader加载字库绘制英文字母

127使用TTFLoader加载字库绘制数字

128在场景中绘制自定义的斜角字母

129在场景中加载中文字库绘制汉字

130使用精简的自定义字库绘制汉字

131在场景中绘制线条镂空的汉字

132使用自定义属性自定义线条颜色

133在场景中根据汉字实现汉字镜像

134在场景中加载中文字库绘制二维汉字

135在场景中的球体上添加文本标签

136在场景中的文本上添加火焰动画

137深度遍历在组中的多个子对象

138使用InstancedBufferGeometry

139使用InstancedMesh提升渲染性能

第3章光源

140绘制DirectionalLight光源产生的阴影

141模糊DirectionalLight光源产生的阴影

142绘制DirectionalLight光源的辅助线

143绘制PointLight光源产生的阴影

144绘制PointLight光源的辅助线

145绘制PointLight光源的光线阴影

146绘制SpotLight光源产生的阴影

147绘制SpotLight光源的辅助线

148绘制HemisphereLight光源的辅助线

149绘制RectAreaLight光源的辅助图形

150绘制多个光源照射球体产生的阴影

151在场景中自定义环境光的强度

152在场景中实现飘移的特殊光晕镜头

第4章材质

153使用MeshBasicMaterial设置表面颜色

154使用MeshBasicMaterial创建材质数组

155在MeshBasicMaterial中启用透明度

156在MeshBasicMaterial中使用普通贴图

157在MeshBasicMaterial中使用环境贴图

158自定义MeshBasicMaterial的贴图样式

159创建线框风格的MeshBasicMaterial

160使用MeshBasicMaterial混合其他材质

161根据视频创建MeshBasicMaterial材质

162在MeshStandardMaterial中使用ao贴图

163在MeshStandardMaterial中使用移位贴图

164在MeshMatcapMaterial中设置matcap

165使用MeshNormalMaterial创建多色表面

166使用MeshNormalMaterial创建多色字母

167使用MeshNormalMaterial绘制法向量

168在MeshNormalMaterial中设置着色器

169扁平化MeshNormalMaterial创建的球体

170使用MeshDepthMaterial淡化多个图形

171使用MeshDepthMaterial绘制随机图形

172使用MeshDepthMaterial绘制圆环结

173使用MeshDepthMaterial混合其他材质

174在场景属性中设置MeshDepthMaterial

175在MeshPhongMaterial中使用普通贴图

176在MeshPhongMaterial中使用高光贴图

177在MeshPhongMaterial中使用法向量贴图

178在MeshPhongMaterial中使用凹凸贴图

179在MeshPhongMaterial中镜像平铺贴图

180在MeshPhongMaterial中重复平铺贴图

181在MeshPhongMaterial中使用剪裁平面

182使用MeshLambertMaterial呈现局部照射

183在MeshLambertMaterial中使用普通贴图

184在MeshLambertMaterial中使用环境贴图

185在MeshLambertMaterial中使用光照贴图

186设置MeshLambertMaterial贴图重复方式

187在MeshLambertMaterial中实现发光的效果

188在MeshLambertMaterial中实现形变动画

189在MeshLambertMaterial中启用反射特效

190使用SpriteMaterial绘制平面粒子

191使用SpriteMaterial随机绘制粒子

192根据画布内容创建SpriteMaterial

193使用普通贴图创建SpriteMaterial

194根据颜色和尺寸创建PointsMaterial

195在PointsMaterial中自定义粒子形状

196使用普通贴图创建PointsMaterial

197使用渐变纹理贴图创建PointsMaterial

198使用PointsMaterial创建雨滴下落动画

199使用PointsMaterial创建雪花飘舞动画

200使用PointsMaterial创建粒子波动动画

201使用ShaderMaterial创建自定义着色器

202使用ShaderMaterial自定义颜色饱和度

203使用ShaderMaterial将彩色转换为灰度

204使用ShaderMaterial高亮显示凹面和凸面

205使用ShaderMaterial自定义字母线条颜色

206使用ShaderMaterial动态改变贴图的颜色

207使用ShaderMaterial实现持续燃烧的大火

208使用ShaderMaterial实现变换的时空漩涡

209使用外部着色器自定义ShaderMaterial

210使用LineDashedMaterial绘制高斯帕曲线

第5章后期特效

211在场景中的三维图形上添加马赛克

212在场景中的三维图形上添加小灰点

213在场景中的三维图形上添加怀旧特效

214在场景中的三维图形上添加重影特效

215在场景中的三维图形上添加特艺彩色

216在场景中的三维图形上添加锯齿特效

217在场景中的三维图形上添加泛光特效

218在场景中的三维图形上添加辉光特效

219在场景中的三维图形上添加老电影特效

220在场景中的三维图形上添加电脉冲特效

221在场景中的三维图形上添加漂白特效

222在场景中的三维图形上添加光晕特效

223在场景中的三维图形上添加聚焦特效

224在场景中的三维图形上添加模糊特效

225在场景中的三维图形上添加三角形模糊

226在场景中的三维图形上添加拖尾特效

227根据在场景中的三维图形添加水平镜像

228根据在场景中的三维图形添加垂直镜像

229对在场景中的三维图形进行水平移轴

230对在场景中的三维图形进行垂直移轴

231对在场景中的三维图形进行伽马校正

232对在场景中的三维图形进行颜色校正

233对在场景中的三维图形使用颜色过滤

234自定义在场景中的三维图形颜色色调

235自定义在场景中的三维图形颜色饱和度

236自定义在场景中的三维图形颜色对比度

237自定义在场景中的三维图形颜色亮度

238自定义在场景中的三维图形光亮度

239使用Sobel算子检测三维图形边缘

240使用FreiChenShader检测三维图形边缘

241在场景中的三维图形上添加轮廓边线

242在场景中根据三维图形实现万花筒变换

243在场景中以三维眼镜视觉查看三维图形

第6章外部模型

244使用AssimpLoader加载Assimp模型

245使用BabylonLoader加载Babylon模型

246使用LegacyJSONLoader加载JSON文件

247使用MTLLoader加载模型材质

248使用AWDLoader加载AWD模型

249使用STLLoader加载STL模型

250使用FBXLoader加载FBX模型

251播放使用FBXLoader加载的FBX模型

252使用VOXLoader加载VOX模型

253使用DRACOLoader加载DRC模型

254使用AMFLoader加载AMF模型

255使用ThreeMFLoader加载3MF模型

256使用TDSLoader加载3DS模型

257使用Rhino3dmLoader加载3DM模型

258使用PRWMLoader加载PRWM模型

259使用SVGLoader加载SVG模型

260使用FileLoader加载SVG模型

261使用CTMLoader加载CTM模型

262使用OBJLoader加载OBJ模型

263使用ObjectLoader加载JSON文件

264使用ObjectLoader加载圆环结模型

265使用PDBLoader加载PDB模型

266使用PCDLoader加载PCD模型

267使用GLTFLoader加载GLTF模型

268使用GLTFLoader加载GLB模型

269使用ColladaLoader加载DAE模型

270加载并播放DAE格式的模型动画

271加载并播放GLB格式的模型动画

272加载并播放MMD格式的模型动画

273使用Tween动画控制皮肤模型状态

274使用Tween动画拉伸和折叠PLY模型

275使用DDSLoader加载DDS图像文件

276使用TGALoader加载TGA图像文件

277使用ImageBitmapLoader加载图像

278使用SubdivisionModifier细化模型