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

最新推荐文章于 2024-03-18 09:36:34 发布
最新推荐文章于 2024-03-18 09:36:34 发布
阅读量2.8k 收藏 2
点赞数 2
分类专栏： threejs

https://blog.csdn.net/mxdmojingqing/article/details/78044520

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

 代码如下

<!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>

 

 

 

biyusr
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web3D构建三维房间空间（three.js）
12-04
web3D构建，根据房间二维平面图构建了三维空间图，可实现房间开关门，移动，旋转，可各个角度观察房屋，使用了threejs库
基于Threejs构建的3D立体空间实战入门
夜郎King的博客
05-03 1万+
本文将简单介绍Threejs的相关基础知识，四个基础对象组件。最后采用一个实例一步一步的进行3D房间展示，最终达到可视化的效果。
Threejs制作虚拟房间效果
最新发布
Baker的博客
03-18 397
我们经常在装修的网站可以看到虚拟房间的效果，通过网站展示3D房间的细节，并且点击可以进入到每个房间查看，今天就用threejs来实现类似的效果，其实就是类似天空盒子的功能，将房间的上下左右前后各拍一张图片，并且保证每个图片的交界处是衔接上的，最后组成一个正方体的盒子，将相机设置在盒子的中间，禁止拖动，就可以实现在房间里查看房间周围家具的效果。然后将图片添加到场景中，并作为贴图贴在正方体的6个面上。Threejs查看VR房间。首先第一步创建3D场景。然后找六张房间的图片，
这个户型设计前端图形化技术，你可能一辈子也学不会！
MMKJSH的博客
11-30 317
这个户型设计前端图形化技术，你可能一辈子也学不会！
threex.keyboardstate:三.js 扩展以保持键盘的当前状态
06-06
三重键盘状态 Threex.keyboardstate 是它可以轻松保持键盘的当前状态。 可以随时查询。 不需要事件。 这在循环驱动的情况下特别方便，例如在 3D 演示或游戏中。 键的语法已从复制以简化配置。 它可以帮助您控制three.js 游戏的角色。 显示不告诉 []：它显示了键盘状态的基本用法。 [ ]：它展示了如何在需要时避免重复键。 [ ]：它显示了一个独立的用法，在任何地方都没有three.js。 截图 如何安装 您可以手动安装它。 做就是了 < script src =' threex.keyboardstate.js ' > </ script > 您可以使用安装。 bower install threex.keyboardstate 如何使用它 ？ 第 1 步：创建对象 var keyboard = new THREEx . KeyboardStat
Three.js的学习心得
sky311的专栏
09-12 1821
这几天自己一直在瞎琢磨Three.j
Three.js实现简单3D房间布局
10-17
主要为大家详细介绍了Three.js实现简单3D房间布局的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Three.js开发实现3D地图的实践过程总结
10-18
主要给大家介绍了关于利用Three.js开发实现3D地图的实践过程，文中通过示例代码介绍的非常详细，对大家学习或者使用three.js具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
基于three.js实现的3D粒子动效实例代码
10-17
主要给大家介绍了关于如何基于three.js实现的3D粒子动效的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用three.js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
使用Three.js 实现虎年春节3D创意源码
01-19
使用Three.js 实现虎年春节3D创意源码，更多源码请登录星火在线（http://www.sparkonline.cn）。 考研： 考研政治、考研英语、考研数学、考研专业课 一网打尽 专升本： 专升本数学、专升本专业课 有效提升 本硕论文...
基于纯three.js实现的3D地图方案源码+项目说明.zip
11-23
基于纯three.js实现的3D地图方案源码+项目说明.zip 由于案例的地图范围有75km,图片资源第一次加载需要较长时间,请耐心等待 如需提高地图瓦片清晰度,可以修改`src/components/Map`组件的配置项,案例的瓦片层级是12,...
three.js实现3D简易书店.rar
07-03
使用Three.js实现书店的3d模型展示，包括书架、场景浏览、和书本点击显示信息等基本入门操作，代码简单明了，均已测试通过
使用three.js实现室内路径规划demo
05-21
使用three.js基于已有的路径和节点数据 使用d算法实现室内地图点选路径规划 具体效果参见我的博客：https://blog.csdn.net/u014529917/article/details/100424812
Three.js学习笔记 – “我和小伙伴都惊呆了”的特效和Three.js初探
weixin_30872337的博客
07-10 682
什么是Three.js three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精采的演示。不过，这款引擎目前还处在比较不成熟的开发阶段，其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度（尤其是文档的...
js实现简单画图功能
A_heart_to_heart的博客
08-19 2万+
JS实现简单画图 1 概述 随着前端技术的发展，越来越多的小东西简单又实用，在这里我实现了一个画笔画图的小玩意。让我们一起看吧。 2 效果图如下： 3 主要功能 支持超简单使用 支持选择画笔的颜色 支持选择画笔粗细 支持保存 支持清空 支持保存为图片 支持下载 4实现方式 首先，我们呢先把布局样式实现好，我们可以从网络上获取，三种颜色笔的图片，以及三种粗细种类
Three.js构造一个简单的房间
weixin_30566111的博客
06-03 686
　　主要研究three.js在3D场景中基本使用:画一个简单的房子、房子上画门和玻璃、房间内放一个床、定义鼠标事件可以移动场景、动画的使用等。 1.Three.js画的一个简单的房子，模拟地板以及四堵墙 准备素材: 3.jpg模拟地板 4.jpg模拟墙 代码: <!DOCTYPE html> <html> &lt...
图形布局-Layout 之js设计实现
web开发
02-18 893
前言 定位browser 的 chart, VML,SVG, HTML5 Canvas使用的方式各不一样。 如果使用现有的js library (各种实现js 图表的library汇总与比较) ， 调用的API方式也肯定不同。 举个例子: draw2d 使用addFigure 和 setPosition 都可以设置图的位置。 混在特定技术或是特定library 里去layout ...
基于Three.js的全景展示框架-TPano
热门推荐
夜郎King的博客
10-31 3万+
在一些全景展示类应用中，经常需要对采集到全景照片进行展示，一般情况下，可以通过制作人员使用pano2vr进行数据处理（教程可参见：实战!使用pano2vr生成html5全景页面），将处理好的数据发布至静态服务器，再关联相应位置即可完成全景展示（详情见基于Leaflet的全景综合展示实战）。 以上这种方式可用于素材不多，发布后不会轻易变化，而且对制作时间没有精确时间要求的场景。而且应用多依赖于人工操作，如果想直接对采集的全景照片进行直接展示的，可以采用什么方案呢？本文将介绍一......
使用three.js 实现3D地图
06-13
使用three.js可以很方便的实现3D地图，具体步骤如下： 1. 创建一个场景对象 ```javascript var scene = new THREE.Scene(); ``` 2. 创建一个透视相机 ```javascript var camera = new THREE.PerspectiveCamera...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值