javascript期末作业【三维房屋设计】 【文末源码+文档下载】

1、引入three.js

  1. 官网下载three.js 库

javascript期末作业【三维房屋设计】 【文末源码+文档下载】_第1张图片

  1. 放置目录并引用

javascript期末作业【三维房屋设计】 【文末源码+文档下载】_第2张图片

引入js文件:

  • 设置场景(scene

(1)创建场景对象

 javascript期末作业【三维房屋设计】 【文末源码+文档下载】_第3张图片

(2)设置透明相机

1,透明相机的优点

透明相机机制更符合于人的视角,在场景预览和游戏场景多有使用,可以自行设置近裁边界,远裁边界.

 javascript期末作业【三维房屋设计】 【文末源码+文档下载】_第4张图片

 (3)设置光源

javascript期末作业【三维房屋设计】 【文末源码+文档下载】_第5张图片

 (4)设置自动渲染器

javascript期末作业【三维房屋设计】 【文末源码+文档下载】_第6张图片

(5)设置鼠标控制器控制场景旋转

javascript期末作业【三维房屋设计】 【文末源码+文档下载】_第7张图片

  • 创建网格对象

(1) 基本原理

1.建立3D模型(以立方体为例)

javascript期末作业【三维房屋设计】 【文末源码+文档下载】_第8张图片

2.设置材料

javascript期末作业【三维房屋设计】 【文末源码+文档下载】_第9张图片

3.建立网格对象mesh,设置mesh位置 

4.将网格对象加入场景

5.添加辅助坐标系,方便操作

javascript期末作业【三维房屋设计】 【文末源码+文档下载】_第10张图片

  (2)给前后左右墙编号易于以后操作

javascript期末作业【三维房屋设计】 【文末源码+文档下载】_第11张图片

1.创建地板和前后左右墙:

javascript期末作业【三维房屋设计】 【文末源码+文档下载】_第12张图片

2.创建各个房间的隔板墙

 javascript期末作业【三维房屋设计】 【文末源码+文档下载】_第13张图片

 3.代码:

你可能感兴趣的:(javascript,开发语言,ecmascript)