没有合适的资源?快使用搜索试试~ 我知道了~
一、 引入three.js库 4 (1) 官网下载three.js 库 4 (2) 放置目录并引用 4 二、 设置场景(scene) 5 (1)创建场景对象 5 (2)设置透明相机 5 1,透明相机的优点 5 (3)设置光源 5 (4)设置自动渲染器 5 (5)设置鼠标控制器控制场景旋转 6 三、 创建网格对象 6 (1) 基本原理 6 1.建立3D模型(以立方体为例) 6 2.设置材料 7 3.建立网格对象mesh,设置mesh位置 7 4.将网格对象加入场景 7 5.添加辅助坐标系,方便操作 7 (2)给前后左右墙编号易于以后操作 7 1.创建地板和前后左右墙: 8 2.创建各个房间的隔板墙 9 3.代码: 9 四、 ThreeBSP差集制造窟窿 11 (1) 基本原理 11 2.主要代码 11 (2)引入库文件: 11 1.引入ThreeBSP.js库文件 11 (3)在底座上制造楼梯空间 12 1. 创建一个立方体 12 2. 与底座做差集 12 3.结合结果新建mesh模型 13 4.将模型加入场景中 13 5.代码: 14 (4)创造阳台 14 1.基本思路 14 五、
资源推荐
资源详情
资源评论
0
计算机学院
JavaScript期末课程大作业(三)
三维房屋建构设计说明书
( 2021 ~ 2022 学年度 第 1 学期 )
姓名
学号
专业
班级
1
目录
目录
一、 引入 three.js 库.........................................................................................................................4
(1) 官网下载 three.js 库...........................................................................................................4
(2) 放置目录并引用 ...................................................................................................................4
二、 设置场景(scene).................................................................................................................5
(1)创建场景对象..............................................................................................................................5
(2)设置透明相机..............................................................................................................................5
1,透明相机的优点.............................................................................................................................5
(3)设置光源 .............................................................................................................................................5
(4)设置自动渲染器................................................................................................................................5
(5)设置鼠标控制器控制场景旋转 ....................................................................................................6
三、 创建网格对象 ............................................................................................................................6
(1) 基本原理...........................................................................................................................................6
1.建立 3D 模型(以立方体为例) ....................................................................................................6
2.设置材料 ..........................................................................................................................................7
3.建立网格对象 mesh,设置 mesh 位置 .....................................................................................7
4.将网格对象加入场景....................................................................................................................7
5.添加辅助坐标系,方便操作 .........................................................................................................7
(2)给前后左右墙编号易于以后操作................................................................................................7
1.创建地板和前后左右墙:..............................................................................................................8
2.创建各个房间的隔板墙...............................................................................................................9
3.代码: ..................................................................................................................................................9
四、 ThreeBSP 差集制造窟窿 .....................................................................................................11
(1) 基本原理...................................................................................................................................11
2.主要代码........................................................................................................................................11
(2)引入库文件: .....................................................................................................................................11
1.引入 ThreeBSP.js 库文件...........................................................................................................11
(3)在底座上制造楼梯空间 ...............................................................................................................12
2
1. 创建一个立方体 .....................................................................................................................12
2. 与底座做差集..........................................................................................................................12
3.结合结果新建 mesh 模型.........................................................................................................13
4.将模型加入场景中......................................................................................................................13
5.代码:................................................................................................................................................14
(4)创造阳台...........................................................................................................................................14
1.基本思路........................................................................................................................................14
五、 制造贴图美化室内:................................................................................................................17
(1)挂一幅画...........................................................................................................................................17
1.在网上下载一张图片并修改名称放到根目录中...............................................................17
2.贴图到场景墙壁 ..........................................................................................................................17
3. 代码: ...........................................................................................................................................18
六、 制造家具模型并放置 ............................................................................................................18
(1)创建一个桌子..................................................................................................................................18
(2)创建一个马桶..................................................................................................................................19
1.思路:用一个大圆柱扣去小圆柱..............................................................................................19
2.具体实现........................................................................................................................................19
(4)创建一个沙发..................................................................................................................................24
1.和创建凳子的思路差不多........................................................................................................24
(5)建一个床和两个柜子....................................................................................................................25
1.用简单扁平的立方体当作简易的床......................................................................................25
1. 也是用普通的小立方体当作柜子 .....................................................................................25
(6)创建一个灶台..................................................................................................................................26
1.用两个黑色立方体当作大理石平台,用两个圆柱体当作锅............................................26
七、 完善细节...................................................................................................................................27
(1)插入四个立方体台阶....................................................................................................................27
1.创建四个台阶,并放入楼梯空间..............................................................................................28
八、 产品完成预览..........................................................................................................................30
(1) 经历一个月的学习,产品大概成型. ...................................................................................30
九、 底层源码的一些理解 ............................................................................................................33
(1) 图形的形成 ..............................................................................................................................33
(2) threejs 中的立体图形是怎么实现的 ................................................................................34
3
(3) 光源产生棱角..........................................................................................................................34
十、 心得体会...................................................................................................................................34
(1) Three.js 值得去学...................................................................................................................34
(2) 思考地越慢,学 js 学地越快..............................................................................................35
十一、 参考文献...............................................................................................................................35
(1) Three.js (xuexihtml5.com)....................................................................................................35
(2) Three.js 相机对象.lookAt()方法 (yanhuangxueyuan.com) .......................................35
(3) Three.js 相机位置属性.position (yanhuangxueyuan.com)........................................35
(4) Three.js 相机位置属性.position (yanhuangxueyuan.com) Three.js 相机控件
OrbitControls (yanhuangxueyuan.com) ......................................................................................35
(5) (48 条消息) 51 使用 ThreeBSP 库进行 Three.js 网格组合_现在学习也不晚-
CSDN 博客_threebsp.........................................................................................................................35
(6) Web 前端开发技术实验与实践 作者: 储久良, 编著 出版社: 清华大学出版
社 出版日期: 2018-08-01 ...........................................................................................................35
(7) Three.js 开发指南:WebGL 的 JavaScript 3D 库(原书第 2 版) 作者:[美]乔斯·德
克森(Jos Dirksen) 著;杨芬 译 出版社:机械工业出版 出版日期:2017-06-00.36
十二、 11/25 做的一些改动 ........................................................................................................36
(1) 创建电视机 ..............................................................................................................................36
1.一个立方体加一个圆锥,完成图..............................................................................................36
2. 代码: ...........................................................................................................................................36
(2) 创建一些窗户..........................................................................................................................37
1.对墙体稍微修改,扣出几个窟窿;.............................................................................................37
2.代码:................................................................................................................................................37
(3) 修改后效果: .............................................................................................................................38
4
一、 引入 three.js 库
(1)官网下载 three.js 库
(2)放置目录并引用
引入 js 文件:
剩余39页未读,继续阅读
资源评论
白开水为啥没味
- 粉丝: 612
- 资源: 16
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功