IT学习站-137zw.com

作者: 123456809
查看: 149|回复: 0

more +资源更新Forums

more +随机图赏Gallery

价值368元 从Docker到K8S实战视频教程 五年工程师主讲 百度云价值368元 从Docker到K8S实战视频教程 五年工程师主讲 百度云
价值299 opencv+tensorflow入门人工智能图像处理 百度云 网盘 下载价值299 opencv+tensorflow入门人工智能图像处理 百度云 网盘 下载
价值199元 Nginx中间件搭建负载均衡安全防护动静分离视频 ...价值199元 Nginx中间件搭建负载均衡安全防护动静分离视频 ...
价值348元 RabbitMQ消息中间件技术精讲2018视频教程 百度云价值348元 RabbitMQ消息中间件技术精讲2018视频教程 百度云
云豹直播平台全套源码无限制完美运营版(安卓+IOS)源码云豹直播平台全套源码无限制完美运营版(安卓+IOS)源码
Spring Security4企业权限管理视频,完整版课程下载Spring Security4企业权限管理视频,完整版课程下载

Three.js 开发机房(三)

Three.js 开发机房(三)

[复制链接]
123456809 | 显示全部楼层 发表于: 2019-11-14 09:35:00
123456809 发表于: 2019-11-14 09:35:00 | 显示全部楼层 |阅读模式
查看: 149|回复: 0

你还没有注册,无法下载本站所有资源,请立即注册!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
之前三节都没涉及到机房,只是一些零零散散的知识点,这一节我们就开始正式画外墙。
首先我了明显理解以下啥是墙?其实说白了就是一个长方体,长不确定,宽一般也就是40cm,高也就是两米,这就是一个简单的墙,当然很多墙上都有窗户、门啥的,其实也就是在长方体的固定的位置掏个洞,然后放上我们需要方的东西,比如门,窗户。
在画墙之前我们需要对一个机房的俯视图进行分析,就比如下面这张机房的图片
Three.js 开发机房(三)  技术博客 1151321-20190907134739350-347006302

(图片来自网络)

就像图片中显示的一样,这个机房非常标准,是个很标准的长方形机房,长900cm, 宽600cm,左侧的墙体是玻璃隔断,还有一扇门,
那好,我们就可以开干了,首先我们要初始化一个机房的结构布局的Json,注意门不能和窗户重合,有门的地方窗户需要分成门左边和门右边两个数组(当然你也可以写多个判断进行操作,但是比较麻烦)。  接下来我们开始画地板,我们目前就将地板和机房大小做一样:  执行效果如下图:
Three.js 开发机房(三)  技术博客 1151321-20190907174856008-1934784637

紫色是我加给整个Html的颜色,主要是方便观看地板,接下来我们就开始画墙了,在画墙之前我们先初始化一个画长方体(窗宽高均默认为1)的函数:封装好之后我们在画墙的时候就不用每画一道墙就新建一个几何体和材质,我们只需要克隆我们刚才初始化的墙体就好了
之后我们正式封装具有具体长度、角度和位置在的墙  这样我们就将一个具有长宽高、方向、位置的长方体就画出来了,
只是画出来还不行,我们需要将数据和模型关联起来,我们先对 this.data.wall 进行遍历得到这道墙的具体信息,是否有门窗,墙的起始点和结束点,知道了起始点和结束点,我们就能算出这道墙具体有多长,还有这道墙的角度
Three.js 开发机房(三)  技术博客 1151321-20190907192953405-1192681520

如上图,有以上两个点我们能得出该条线的信息
  长度:Math.sqrt(Math.pow(Math.abs(300 -0), 2) +Math.pow(Math.abs(0 -300), 2));
  角度:Math.asin((300- 0) / (0 - 300)) / Math.PI
这样我们就知道了该条线的具体信息,下面我们就能画墙了: 执行完我们就能看到如下图这样的结果了
Three.js 开发机房(三)  技术博客 1151321-20190907200513360-1979856469

还差一面墙,上面既有门又有窗户,那我们就先作既有门又有窗户的,献上一张图爽一下
Three.js 开发机房(三)  技术博客 1151321-20190907211511677-1854794209

要实现这样,那我们首先要封装一个几何ti裁切函数:  之后我们就开始对有门或者有窗户的墙面开始处理,先整理数据,将数据整理成我么能够最简单就能处理的  整理完成之后我们就要开始对以上数据进行操作了,此时我们就需要创建函数cerateWallHadDoorOrGlass来开始画有玻璃和门的墙了  如此,大功告成,我们在放一面没有门但有玻璃的墙看看
Three.js 开发机房(三)  技术博客 1151321-20190907213933360-1485240901

画墙这块就到这儿,这篇文章整整花费了我一下午的时间,项目是直接从vue init webpack dome 开始的,各位看客如果觉得还行,麻烦给个“推荐”,哈哈哈,全当我一下午的辛苦没白费! * _ *


来源:http://www.137zw.com
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
137zw.com IT学习站致力于免费提供精品的java技术教程和python技术教程,CCNA书籍/资料/CCNP书籍/资料教程/CCIE书籍/资料/H3C学习/认证/一级建造师考试/微软学习/认证/包括基础教程和高级实战教程,同时也提供分享网站源码下载和互联网相关一系列的技术教程,我们想做的就是让知识分享更有价值!(IT学习站官方唯一域名地址:www.137zw.com 请谨防假冒网站!)本站所有资源全部收集于互联网或网友自行分享,分享目的仅供大家学习与参考,如无意中侵犯您的合法权益,请联系本站管理员进行删除处理!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

浙ICP备19022368号-1|Archiver|手机版|IT学习站-137zw.com

GMT+8, 2020-7-6 00:29 , Processed in 0.244506 second(s), 33 queries .

快速回复 返回顶部 返回列表