[23年12月版47章]Three.js可视化企业实战WEBGL课

[23年12月版47章]Three.js可视化企业实战WEBGL课 学习地址1：https://pan.baidu.com/s/1kyZNWtrLQERjMlaRwiRlSg 提取码：150r 学习地址2：https://share.weiyun.com/Sa6MSzwS 密码：n99b5x Three.js 是一个 3D JavaScript 库，它可以帮助你为网络创造3D体验，而且非常容易使用。如果你想让你的网站更加炫酷，那么 Three.js 一定是你的好帮手。 Three.js 是一个在 MIT 许可下的 JavaScript 库，它在 WebGL 之上运行。这个库的目标就是简化处理3D内容的过程。只需要几行代码，你就可以获得一个动画3D场景，而且你无需了解复杂的着色器和矩阵。 要在屏幕上展示3D图形，思路大体上都是这样的： 1、构建一个三维空间 Three中称之为场景(Scene) 2、选择一个观察点，并确定观察方向/角度等 Three中称之为相机(Camera) 3、在场景中添加供观察的物体 Three中的物体有很多种，包括Mesh,Line,Points等，它们都继承自Object3D类 4、将观察到的场景渲染到屏幕上的指定区域 Three中使用Renderer完成这一工作 不同服务之间的通信可以采用restTemplate来进行通信调用，当然使用httpClient来构建也是可以的。 com.imooc.api.config.CloudConfig.java @Autowired private RestTemplate restTemplate; // 判断faceId不为空，为空直接返回登录失败 // 2. 请求文件服务，获取人脸的base64信息 String fileServerUrlExecute = "http://files.imoocnews.com:8004/fs/readFace64InGridFS?faceId=" + adminFaceId; ResponseEntity<GraceJSONResult> resultEntity = restTemplate.getForEntity(fileServerUrlExecute, GraceJSONResult.class); GraceJSONResult graceJSONResult = resultEntity.getBody(); String base64DB = (String)graceJSONResult.getData(); // System.out.println("restTemplate远程调用获得的内容为：" + base64); return GraceJSONResult.ok(); com.imooc.admin.controller.FriendLinkMngController.java @RestController public class FriendLinkMngController extends BaseController implements FriendLinkMngControllerApi { final static Logger logger = LoggerFactory.getLogger(FriendLinkMngController.class); @Override public GraceJSONResult saveOrUpdateFriendLink(SaveFriendLinkBO saveFriendLinkBO, BindingResult result) { // System.out.println(saveFriendLinkBO.toString()); // 判断BindingResult是否保存错误的验证信息，如果有，则直接return if (result.hasErrors()) { Map<String, String> errorMap = getErrors(result); return GraceJSONResult.errorMap(errorMap); } // 保存到MongoDB FriendLinkMO friendLinkMO = new FriendLinkMO(); BeanUtils.copyProperties(saveFriendLinkBO, friendLinkMO); friendLinkMO.setCreateTime(new Date()); friendLinkMO.setUpdateTime(new Date()); return GraceJSONResult.ok(); } } 下面我们用一个简单的例子来梳理一下这个过程。 首先写一个有Canvas元素的页面吧。 @Document(collection = "friend_link") public class FriendLinkMO { /** * @Id 自定义Id主键，mongodb的文档id不会自动生成，会使用我们设置的id值 */ @Id private String id; @Field("link_name") private String linkName; @Field("link_url") private String linkUrl; @Field("is_delete") private Integer isDelete; @Field("create_time") private Date createTime; @Field("update_time") private Date updateTime; // getter setter ... } @Service public class AppUserMngServiceImpl implements AppUserMngService { @Autowired public AppUserMapper appUserMapper; @Override public PagedGridResult queryAllUserList(String nickname, Integer status, Date startDate, Date endDate, Integer page, Integer pageSize) { Example userExample = new Example(AppUser.class); userExample.orderBy("createdTime").desc(); Example.Criteria criteria = userExample.createCriteria(); if (StringUtils.isNotBlank(nickname)) { criteria.andLike("nickname", "%" + nickname + "%"); } if (UserStatus.isUserStatusValid(status)) { criteria.andEqualTo("activeStatus", status); } if (startDate != null) { criteria.andGreaterThanOrEqualTo("createdTime", startDate); } if (endDate != null) { criteria.andLessThanOrEqualTo("createdTime", endDate); } PageHelper.startPage(page, pageSize); List<AppUser> list = appUserMapper.selectByExample(userExample); return setterPagedGrid(list, page); } } 要唯一确定一个相机的位置与方向，position、up、lookAt三个属性是缺一不可的。 这里我们创建了一个正交投影相机，这里我将视景体大小与屏幕分辨率保持一致只是为了方便，这样坐标系中的一个单位长度就对应屏幕的一个像素了。 我们将相机放在Z轴上，面向坐标原点，相机的上方向为Y轴方向，注意up的方向和lookAt的方向必然是垂直的（类比自己的头就知道了）。 下面添加一个立方体到场景中： <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" > <mapper namespace="com.imooc.article.mapper.ArticleMapperCustom" > <update id="updateAppointToPublish"> UPDATE article SET is_appoint = 0 WHERE publish_time &lt;= NOW() and is_appoint = 1 </update> </mapper> three.js中的三大要素：场景（scene）、相机（camera）、衬着器（renderer），有了这三样东西，我们才能够运用相机将场景衬着到网页上去。 @Override public GraceJSONResult queryMyList(String userId, String keyword, Integer status, Date startDate, Date endDate, Integer page, Integer pageSize) { if (StringUtils.isBlank(userId)) { return GraceJSONResult.errorCustom(ResponseStatusEnum.ARTICLE_QUERY_PARAMS_ERROR); } if (page == null) { page = COMMON_START_PAGE; } if (pageSize == null) { pageSize = COMMON_PAGE_SIZE; } PagedGridResult gridResult = articleService.queryMyArticleList(userId, keyword, status, startDate, endDate, page, pageSize); return GraceJSONResult.ok(gridResult); } 首先可以在数据库通过写sql脚本实现查询 SELECT c.id as commentId, c.father_id as fatherId, c.article_id as articleId, c.comment_user_id as commentUserId, c.comment_user_nickname as commentUserNickname, c.content as content, c.create_time as createTime, f.comment_user_nickname as quoteUserNickname, f.content as quoteContent FROM comments c LEFT JOIN comments f on c.father_id = f.id WHERE c.article_id = '2006117B57WRZGHH' order by c.create_time desc