首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Three.js实现简单3D房间布局

Posted in Javascript onDecember 30, 2018

本文实例为大家分享了Three.js实现简单3D房间布局的具体代码，供大家参考，具体内容如下

废话不说了，直接上成果图。

Three.js实现简单3D房间布局

 代码如下

<!doctype html>
<html lang="en">
<head>
<title>房间布局</title>
<meta charset="utf-8">
<meta name="viewport"
 content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
 
 
 <script src="js/jquery-1.9.1.js"></script>
 <script src="js/Three.min.js"></script>
 <script src="js/OrbitControls.js"></script>
 <script src="js/ThreeBSP.js"></script>
 <script src="js/Detector.js"></script>
 <script src="js/Stats.js"></script>
 
 
 <script src="js/THREEx.KeyboardState.js"></script>
 <script src="js/THREEx.FullScreen.js"></script>
 <script src="js/THREEx.WindowResize.js"></script>
 
 
 <!-- people -->
 <script src="people/js/three.js"></script>
 <script src="people/js/DDSLoader.js"></script>
 <script src="people/js/MTLLoader.js"></script>
 <script src="people/js/OBJLoader.js"></script>
 <script src="people/js/Detector.js"></script>
 <script src="people/js/stats.min.js"></script>
 <script src="people/js/PathControls.js"></script>
 <script src="people/js/Tween.js"></script>
 <script src="people/js/RequestAnimationFrame.js"></script>
 
 
 <div id="ThreeJS" style="position: absolute; left: 0px; top: 0px"></div>
 
 
 <script>
 // 设置全局变量
 var scene, camera, renderer, controls, tween, door;
 var keyboard = new THREEx.KeyboardState();//保持键盘的当前状态，可以随时查询
 var clock = new THREE.Clock();
 var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
 //var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
 var VIEW_ANGLE = 75, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 10000;
 var materialArrayA = [];
 var materialArrayB = [];
 var matArrayA = [];//内墙
 var matArrayB = [];//外墙
 var dummy = new THREE.Object3D();//仿制品
 init();
 animate();
 
 //1.场景   
 function initScene() {
 scene = new THREE.Scene();
 }
 
 //2.相机
 function initCamera() {
 camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
 camera.position.set(0, 1000, 1800);
 camera.lookAt(scene.position);
 camera.lookAt(0, 0, 0);
 scene.add(camera);
 }
 
 //3.渲染器
 function initRender() {
 if (Detector.webgl)
 renderer = new THREE.WebGLRenderer({
  antialias : true
 });
 else
 renderer = new THREE.CanvasRenderer();
 //设置渲染器的大小为窗口的内宽度，也就是内容区的宽度。
 renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
 container = document.getElementById('ThreeJS');
 container.appendChild(renderer.domElement);
 renderer.setClearColor(0x4682B4, 1.0);
 }
 
 //4.事件
 function initEvent() {
 THREEx.WindowResize(renderer, camera);
 THREEx.FullScreen.bindKey({
 charCode : 'm'.charCodeAt(0)
 });
 }
 
 //5.控制
 function initControls() {
 controls = new THREE.OrbitControls(camera, renderer.domElement);
 }
 
 //6.光源
 function initLight() {
 // 位置不同，方向光作用于物体的面也不同，看到的物体各个面的颜色也不同 
 // A start, 第二个参数是光源强度
 var directionalLight = new THREE.DirectionalLight(0xffffff, 1);//模拟远处类似太阳的光源
 directionalLight.position.set(0, 100, 0).normalize();
 scene.add(directionalLight);
 //A end
 var ambient = new THREE.AmbientLight(0xffffff, 1); //AmbientLight,影响整个场景的光源
 ambient.position.set(0, 0, 0);
 scene.add(ambient);
 //var pointlight = new THREE.PointLight(0x000000,1.5,2000);
 //scene.add(pointlight); 
 }
 
 //创建地板 
 function createFloor() {
 var loader = new THREE.TextureLoader();
 loader.load("images/floor.jpg", function(texture) {
 texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
 texture.repeat.set(10, 10);
 var floorGeometry = new THREE.BoxGeometry(1600, 1100, 1);
 var floorMaterial = new THREE.MeshBasicMaterial({
  map : texture,
  side : THREE.DoubleSide
 });
 var floor = new THREE.Mesh(floorGeometry, floorMaterial);
 floor.position.y = -0.5;
 floor.rotation.x = Math.PI / 2;
 scene.add(floor);
 });
 
 //茶色：0x58ACFA 透明玻璃色：0XECF1F3
 var glass_material = new THREE.MeshBasicMaterial({
 color : 0XECF1F3
 });
 glass_material.opacity = 0.4;
 glass_material.transparent = true;
 
 var left_wall = returnWallObject(20, 200, 1100, 0, matArrayB, -801,
  100, 0);
 var left_cube = returnWallObject(20, 110, 1100, 0, matArrayB, -801,
  100, 0);
 createResultBsp(left_wall, left_cube, 1);
 createCubeWall(1, 110, 1100, 0, glass_material, -801, 100, 0);
 
 var right_wall = returnWallObject(20, 200, 1100, 1, matArrayB, 801,
  100, 0);
 var right_cube = returnWallObject(20, 110, 1100, 0, matArrayB, 801,
  100, 0);
 createResultBsp(right_wall, right_cube, 1);
 createCubeWall(1, 110, 1100, 0, glass_material, 801, 100, 0);
 }
 
 //墙上挖门，通过两个几何体生成BSP对象
 function createResultBsp(bsp, less_bsp, mat) {
 switch (mat) {
 case 1:
 var material = new THREE.MeshPhongMaterial({
  color : 0x9cb2d1,
  specular : 0x9cb2d1,
  shininess : 30,
  transparent : true,
  opacity : 1
 });
 break;
 case 2:
 var material = new THREE.MeshPhongMaterial({
  color : 0xafc0ca,
  specular : 0xafc0ca,
  shininess : 30,
  transparent : true,
  opacity : 1
 });
 break;
 default:
 }
 
 var sphere1BSP = new ThreeBSP(bsp);
 var cube2BSP = new ThreeBSP(less_bsp);//0x9cb2d1 淡紫,0xC3C3C3 白灰 , 0xafc0ca灰
 var resultBSP = sphere1BSP.subtract(cube2BSP);
 var result = resultBSP.toMesh(material);
 result.material.flatshading = THREE.FlatShading;
 result.geometry.computeFaceNormals(); //重新计算几何体侧面法向量
 result.geometry.computeVertexNormals();
 result.material.needsUpdate = true; //更新纹理
 result.geometry.buffersNeedUpdate = true;
 result.geometry.uvsNeedUpdate = true;
 scene.add(result);
 }
 
 //创建墙
 function createCubeWall(width, height, depth, angle, material, x, y, z) {
 var cubeGeometry = new THREE.BoxGeometry(width, height, depth);
 var cube = new THREE.Mesh(cubeGeometry, material);
 cube.position.x = x;
 cube.position.y = y;
 cube.position.z = z;
 cube.rotation.y += angle * Math.PI; //-逆时针旋转,+顺时针
 scene.add(cube);
 }
 
 //返回墙对象
 function returnWallObject(width, height, depth, angle, material, x, y,
 z) {
 var cubeGeometry = new THREE.BoxGeometry(width, height, depth);
 var cube = new THREE.Mesh(cubeGeometry, material);
 cube.position.x = x;
 cube.position.y = y;
 cube.position.z = z;
 cube.rotation.y += angle * Math.PI;
 return cube;
 }
 
 //创建墙纹理
 function createWallMaterail() {
 matArrayA.push(new THREE.MeshPhongMaterial({
 color : 0xafc0ca
 })); //前 0xafc0ca :灰色
 matArrayA.push(new THREE.MeshPhongMaterial({
 color : 0xafc0ca
 })); //后 
 matArrayA.push(new THREE.MeshPhongMaterial({
 color : 0xd6e4ec
 })); //上 0xd6e4ec： 偏白色
 matArrayA.push(new THREE.MeshPhongMaterial({
 color : 0xd6e4ec
 })); //下 
 matArrayA.push(new THREE.MeshPhongMaterial({
 color : 0xafc0ca
 })); //左 0xafc0ca :灰色
 matArrayA.push(new THREE.MeshPhongMaterial({
 color : 0xafc0ca
 })); //右
 
 matArrayB.push(new THREE.MeshPhongMaterial({
 color : 0xafc0ca
 })); //前 0xafc0ca :灰色
 matArrayB.push(new THREE.MeshPhongMaterial({
 color : 0x9cb2d1
 })); //后 0x9cb2d1：淡紫
 matArrayB.push(new THREE.MeshPhongMaterial({
 color : 0xd6e4ec
 })); //上 0xd6e4ec： 偏白色
 matArrayB.push(new THREE.MeshPhongMaterial({
 color : 0xd6e4ec
 })); //下 
 matArrayB.push(new THREE.MeshPhongMaterial({
 color : 0xafc0ca
 })); //左 0xafc0ca :灰色
 matArrayB.push(new THREE.MeshPhongMaterial({
 color : 0xafc0ca
 })); //右
 
 }
 
 //创建房间布局
 function createLayout() {
 
 // 墙面1 立方体比较长的面 左一
 createCubeWall(10, 200, 900, 0, matArrayB, -651, 100, 0);
 // 墙面2 立方体比较长的面 右一
 createCubeWall(10, 200, 900, 1, matArrayB, 651, 100, 0);
 // 墙面3 门对面的墙 立方体比较短的面 
 createCubeWall(10, 200, 1310, 1.5, matArrayB, 0, 100, -451);
 
 // 墙面4 带门的面 
 var wall = returnWallObject(1310, 200, 10, 0, matArrayB, 0, 100,
  455);
 // 门框 
 var door_cube = returnWallObject(100, 180, 10, 0, matArrayB, 0, 90,
  455);
 createResultBsp(wall, door_cube, 1);
 
 //为墙面安装门,右门
 var loader = new THREE.TextureLoader();
 loader.load("images/door_right.png", function(texture) {
 var doorgeometry = new THREE.BoxGeometry(100, 180, 2);
 var doormaterial = new THREE.MeshBasicMaterial({
  map : texture,
  color : 0xffffff
 });
 doormaterial.opacity = 1.0;
 doormaterial.transparent = true;
 door = new THREE.Mesh(doorgeometry, doormaterial);
 door.position.set(-50, 0, 0);
 var door1 = door.clone();
 door1.position.set(50, 0, 0);
 door1.visible = false;
 dummy.add(door);
 dummy.add(door1);
 dummy.position.set(50, 90, 451)
 scene.add(dummy);
 });
 
 // 房间A:隔墙1 
 createCubeWall(10, 200, 250, 0, matArrayA, -151, 100, 325);
 //房间A:隔墙2 无门
 createCubeWall(10, 200, 220, 0.5, matArrayA, -256, 100, 201);
 // 厨房：隔墙3 
 createCubeWall(350, 200, 10, 0, matArrayA, 481, 100, 131);
 // 厨房：隔墙4 无门
 createCubeWall(10, 200, 200, 0, matArrayA, 301, 100, 225);
 // 房间B 
 createCubeWall(350, 200, 10, 0, matArrayA, -471, 100, -50);
 //房间B 无门
 createCubeWall(200, 200, 10, 0.5, matArrayA, 0, 100, -350);
 // 房间C
 createCubeWall(220, 200, 10, 0, matArrayA, 540, 100, -50);
 //房间C 无门
 createCubeWall(200, 200, 10, 0.5, matArrayA, 250, 100, -350);
 //厕所
 var cube = returnWallObject(10, 200, 260, 0.5, matArrayA, 125, 100,
  -250);
 //厕所门框
 var door_cube1 = returnWallObject(10, 160, 80, 0.5, matArrayA, 155,
  90, -250);
 createResultBsp(cube, door_cube1, 2);
 
 //茶色：0x58ACFA 透明玻璃色：0XECF1F3
 var glass_material = new THREE.MeshBasicMaterial({
 color : 0x58ACFA
 });
 glass_material.opacity = 0.6;
 glass_material.transparent = true;
 createCubeWall(1, 180, 80, 0.5, glass_material, 155, 90, -250);
 }
 
 //7.初始化OBJ对象
 function initObject() {
 //墙纹理
 createWallMaterail();
 createFloor();
 createLayout();
 }
 
 //初始化函数
 function init() {
 initScene();
 initCamera();
 initRender();
 initEvent();
 initControls();
 initLight();
 initObject();
 //监听键盘按键
 document.addEventListener("keydown", onkeyDown, false);
 }
 
 var door_state = true;//默认是门是关闭的
 //Enter=13,Space=32;
 function onkeyDown(event) {
 switch (event.keyCode) {
 case 13:
 console.log(event.keyCode);
 if (door_state) {
  dummy.rotation.y += 0.5 * Math.PI;
  door_state = false;
 } else {
  dummy.rotation.y -= 0.5 * Math.PI;
  door_state = true;
 }
 break;
 default:
 console.log(event.keyCode);
 break;
 }
 }
 
 function animate() {
 requestAnimationFrame(animate);
 renderer.render(scene, camera);
 TWEEN.update();
 update();
 }
 
 function update() {
 var delta = clock.getDelta();
 var moveDistance = 200 * delta;
 var rotateAngle = Math.PI / 2 * delta;
 controls.update();
 }
 </script>
</body>
</html>

通过Enter键可控制开门和关门动作。门的旋转是通过，把门克隆一份，把克隆的那个设置为不可见，然后把两个门打个组 ，这个时候中旋转组就可以了。

 此时的旋转中心实际是在组的中心，但设置一半不可见 ，看起来就像是门在旋转了。注意的是，组内的东西的坐标是相对于组的组内，两个门的坐标应该分别是x轴的正负轴上，整个组的位置应该是原来门应该在的位置。

这也是我向一位大神请教的，真的很感谢他那么耐心的教我。

运行方式：

在支持webgl的浏览器上打开room.html,即可看到效果图。如果加载不出来，打开Chrome快捷方式的属性中设置：右击Chrome浏览器快捷方式， 选择“属性”，在“目标”中加上"--allow-file-access-from-files"，注意前面有个空格。修改完成，点击应用，确定后，关闭所有chrome上的窗口，重启chrome。再找到该资源room.html文件，以Google Chrome浏览器方式打开即可。

Three.js实现简单3D房间布局

错误解决。

如果出现地板和门的两张图片加载不出来时，提示已被跨源资源共享策略阻止加载。解决办法第一种是如上图所示在Chrome的属性加"--allow-file-access-from-files"；第二种就是把图片位置的相对路径改成绝对路径。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Three.js实现简单3D房间布局

- Author -

Mo_JingQing

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JS返回上一页实例代码通过图片和按钮分别实现
Aug 16 Javascript
深入理解jQuery中live与bind方法的区别
Dec 18 Javascript
jQuery中ajax的load()方法用法实例
Dec 26 Javascript
JavaScript让Textarea支持tab按键的方法
Jun 26 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
Oct 15 Javascript
全面理解JavaScript中的闭包
May 12 Javascript
详解JavaScript中的事件流和事件处理程序
May 20 Javascript
微信小程序使用Socket的实例
Sep 19 Javascript
基于webpack4搭建的react项目框架的方法
Jun 30 Javascript
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
Vue父组件如何获取子组件中的变量
Jul 24 Javascript
vue实现短信验证码登录功能（流程详解）
Dec 10 Javascript
JavaScript数组特性与实践应用深入详解
Dec 30 #Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
Dec 30 #Javascript
微信小程序使用setData修改数组中单个对象的方法分析
Dec 30 #Javascript
微信小程序提交form操作示例
Dec 30 #Javascript
bootstrap下拉分页样式 带跳转页码
Dec 29 #Javascript
详解vue 兼容IE报错解决方案
Dec 29 #Javascript
玩转Koa之koa-router原理解析
Dec 29 #Javascript
阿里云(6) 可视化动图(1) matplotlib(7) 数据同步(1) 条形图(1) 分析统计(1) ipyvizzu(1) bufio(1) redis shake(1) 排名(1)
You might like
PHP生成便于打印的网页
2006/10/09 PHP
codeigniter中测试通过的分页类示例
2014/04/17 PHP
php中动态调用函数的方法
2015/03/16 PHP
jQuery+PHP发布的内容进行无刷新分页（Fckeditor）
2015/10/22 PHP
window.onbeforeunload方法在IE下无法正常工作的解决办法
2010/01/23 Javascript
onkeydown事件解决按回车键直接提交数据的需求
2013/04/11 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
JavaScript实现网站访问次数统计代码
2015/08/12 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
Javascript 实现计算器时间功能详解及实例（二）
2017/01/08 Javascript
详解redis在nodejs中的应用
2018/05/02 NodeJs
vue使用自定义icon图标的方法
2018/05/14 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
利用React Router4实现的服务端直出渲染(SSR)
2019/01/07 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
openlayers实现图标拖动获取坐标
2020/09/25 Javascript
[47:18]完美世界DOTA2联赛循环赛 IO vs FTD BO2第一场 11.05
2020/11/06 DOTA
Python3 能振兴 Python的原因分析
2014/11/28 Python
Python数据结构之翻转链表
2017/02/25 Python
python 反编译exe文件为py文件的实例代码
2019/06/27 Python
Python字典常见操作实例小结【定义、添加、删除、遍历】
2019/10/25 Python
python实现udp聊天窗口
2020/03/31 Python
浅谈python锁与死锁问题
2020/08/14 Python
如何用Python绘制3D柱形图
2020/09/16 Python
Python实现EM算法实例代码
2020/10/04 Python
Marriott国际：万豪国际酒店查询预订
2017/09/25 全球购物
Pop In A Box英国：Funko POP搪胶公仔
2019/05/27 全球购物
Delphi软件工程师试题
2013/01/29 面试题
公司企业表扬信
2014/01/11 职场文书
社区端午节活动方案
2014/01/28 职场文书
小学三八妇女节活动总结
2015/02/06 职场文书
亮剑观后感
2015/06/05 职场文书
画展观后感
2015/06/17 职场文书
Win11安装受阻怎么办? Windows11安装问题与解决方案汇总
2021/11/21 数码科技
springboot读取nacos配置文件
2022/05/20 Java/Android