• Three.js前端三维图形开发案例集锦
  • Three.js前端三维图形开发案例集锦
21年品牌 40万+商家 超1.5亿件商品

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

批量上传,套装书可能不全,下单前咨询在线客服!有特殊要求,下单前请咨询客服!

61.82 4.8折 128 全新

库存8件

江西南昌
认证卖家担保交易快速发货售后保障

作者罗帅、罗斌

出版社清华大学出版社

ISBN9787302589563

出版时间2022-03

装帧平装

开本16开

定价128元

货号29394126

上书时间2024-11-02

思源汇书店

已实名 已认证 进店 收藏店铺

   商品详情   

品相描述:全新
商品描述
前言

WebGL是一种三维绘图标准,该绘图标准允许把JavaScript和OpenGL ES 2.0结合在一起,这样Web开发人员就可以借助硬件在浏览器中更流畅地展示三维场景和模型,以创建复杂的导航和数据视觉化。Three.js是一款基于原生WebGL的三维引擎框架(库),该框架在WebGL的API基础上以简单、直观的方式封装了三维图形的常用对象,因此大大减少了程序员在Web前端开发三维图形应用的工作量,Three.js还使用了很多图形引擎的高级技巧,极大地提高了应用性能。
随着WebGL技术和5G技术的持续推广,各种产品的在线三维展示将会变得越来越普遍,对于现在比较火爆的VR产品、AR产品,对WebGL技术的推广,也是一个好消息。VR与Web3D技术的结合自然就衍生出一个新的概念WebVR,也就是基于Web实现的VR内容,即通过三维照相机对室内空间进行拍摄,即可在Web端以全景图的方式预览室内效果。Three.js对此也进行了封装。本书使用二百多个独立实例分类介绍了Three.js创建三维图形的技巧。
本书共分为6章。
第1章主要介绍与Scene、Renderer、Camera、OrbitControls相关的实例,如绘制正交照相机、透视照相机,使用CSS3DRenderer渲染全景图、播放全景视频、创建天空盒,使用多个渲染器渲染场景,使用OrbitControls任意缩放、旋转、平移三维图形对象,使用DragControls任意拖曳三维图形对象等。
第2章主要介绍与Geometry、Mesh相关的实例,如使用各种颜色和视频设置立方体表面、使用天空盒背景设置立方体表面、绘制沙漏、绘制被切割的圆柱体、绘制旋转的地球模型、绘制样条曲线及其图形、绘制样条曲线的线框盒、绘制多次旋转的圆环结、自定义顶点绘制凸面体、根据路径拉伸圆角矩形、自定义函数绘制克莱因瓶、自定义函数绘制莫比乌斯环、自定义函数绘制动态起伏的波浪,使用精简的自定义字库绘制汉字、根据汉字实现汉字镜像等。
第3章主要介绍与Light相关的实例,如绘制DirectionalLight、PointLight、SpotLight、HemisphereLight、RectAreaLight等多种光源产生的阴影和辅助线等,以及如何自定义环境光(AmbientLight)的强度。
第4章主要介绍与Material相关的实例,如使用MeshBasicMaterial、MeshStandardMaterial、MeshPhongMaterial、MeshLambertMaterial等材质分别创建普通贴图、环境贴图、移位贴图、凹凸贴图、法向量贴图、光照贴图、高光贴图等,以及使用SpriteMaterial、PointsMaterial等材质创建各种粒子(精灵)等。同时还介绍了使用LineDashedMaterial、MeshNormalMaterial、ShaderMaterial、MeshDepthMaterial等材质实现的大量三维图形动画的效果。
第5章主要介绍与EffectComposer、ShaderPass、RenderPass相关的后期特效实例,如使用PixelShader创建马赛克特效,使用SepiaShader创建怀旧特效,使用BleachBypassShader创建漂白特效,使用FilmPass创建老电影特效,使用UnrealBloomPass创建辉光特效,使用AfterimagePass创建拖尾特效,使用ColorifyShader实现颜色过滤,使用SobelOperatorShader检测图形边缘,使用OutlinePass添加三维图形轮廓边线等。
第6章主要介绍使用各种Loader加载各种格式的外部模型及动画,如使用AssimpLoader加载Assimp模型,使用BabylonLoader加载Babylon模型,使用AWDLoader加载AWD模型, 使用STLLoader加载STL模型,使用CTMLoader加载CTM模型,使用OBJLoader加载OBJ模型,使用ColladaLoader加载DAE模型并播放模型动画,使用ObjectLoader加载JSON文件,使用Tween动画控制皮肤模型状态,使用Tween动画拉伸和折叠PLY模型等。
本书实用性强、技术新颖、贴近实战、思路清晰、语言简洁、干货颇多。希望读者在阅读时更多地关注实例的开发思想,而不是具体的代码逻辑。代码技术总会不断地更新,解决问题的思维却历久弥新。希望在读完本书以后,读者能够产生“看得懂、学得会、做得出、有用途”的感觉; 即使由于时间关系不能精读全书,也能在实际开发工作中遇到问题时,想起本书中相同或类似的问题场景,快速找到解决方案。
本书所有Three.js代码(版本号r119)在IntelliJ IDEA环境编写完成,在版的Firefox浏览器或Google Chrome浏览器测试成功。因此建议读者在上述环境或条件下使用源代码。所有源代码不需要下载Three.js的其他文件,在使用时保持网络畅通即可。此外需要注意: Three.js版本更新较快,因此在开发应用本书的源代码时特别需要注意版本问题。
全书所有内容和思想并非一人之力所能及,而是凝聚了众多热心人士的智慧并经过充分的提炼和总结而成,在此对他们表示崇高的敬意和衷心的感谢!由于时间关系和作者水平原因,少量内容可能存在认识不全面或偏颇的地方,以及一些疏漏和不当之处,敬请读者批评指正。
本书提供全部源代码,读者
扫描封底刮刮卡内二维码,获得权限,再扫描下方二维码即可下载本书的配套资源。
由于本书为黑白印制,书中许多图片无法呈现真实色彩和效果,因此配套资源中也包括了全书的彩色图片,便于读者对比学习。

罗帅罗斌2021年5月于重庆渝北

资源下载

 

 

 



导语摘要

本书以“问题描述 解决方案”的模式,使用二百多个实例介绍了Scene、Renderer、Camera、Geometry、Mesh、Light、Material、EffectComposer等Three.js封装的三维图形对象的具体应用,如绘制正交照相机,绘制透视照相机,浏览全景图,播放全景视频,创建天空盒,绘制沙漏,绘制被切割的圆柱体,绘制旋转的地球模型,绘制克莱因瓶,绘制莫比乌斯环,创建普通贴图、环境贴图、移位贴图、高光贴图、光照贴图,创建辉光特效、漂白特效、拖尾特效,检测图形边缘,添加轮廓边线,加载各种外部模型并播放模型动画等。 本书适合作为广大Web前端及三维图形开发人员的案头参考书,无论对于编程初学者,还是编程高手,本书都极具参考价值。



商品简介

本书以“问题描述 解决方案”的模式,使用二百多个实例介绍了Scene、Renderer、Camera、Geometry、Mesh、Light、Material、EffectComposer等Three.js封装的三维图形对象的具体应用,如绘制正交照相机,绘制透视照相机,浏览全景图,播放全景视频,创建天空盒,绘制沙漏,绘制被切割的圆柱体,绘制旋转的地球模型,绘制克莱因瓶,绘制莫比乌斯环,创建普通贴图、环境贴图、移位贴图、高光贴图、光照贴图,创建辉光特效、漂白特效、拖尾特效,检测图形边缘,添加轮廓边线,加载各种外部模型并播放模型动画等。 本书适合作为广大Web前端及三维图形开发人员的案头参考书,无论对于编程初学者,还是编程高手,本书都极具参考价值。



作者简介

罗帅,自由职业者,深耕前端开发领域多年,积累了大量的开发经验和实战案例库,著有多部网页前端开发和移动开发的技术图书,曾经在清华大学出版社出版《Android炫酷应用300例.实战篇》《Android炫酷应用300例.提升篇》《Bootstrap Vue.js前端开发超实用代码集锦》《Android App开发超实用代码集锦——jQuery Mobile OpenCV OpenGL》等。



目录

第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

—  没有更多了  —

以下为对购买帮助不大的评价

此功能需要访问孔网APP才能使用
暂时不用
打开孔网APP