使用gltf模型做一个VR地图

最新推荐文章于 2024-05-07 16:31:57 发布
最新推荐文章于 2024-05-07 16:31:57 发布
阅读量478 收藏
点赞数
分类专栏： Three&webGL&laya&babylon&Unity
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34568700/article/details/118574362
版权

做一个类似于https://my.matterportvr.cn/show/?m=WsQvZoxSg5d这样的，可以点击选择进入某某房间查看和观看楼层平面图以及楼层选择器的网页：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AR导航</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            overflow: hidden;
        }
       .btn-container{
            position: absolute;
            left: 10px;
            top: 10px; 
            z-index: 10;
            width: 100px;
            display: flex;
            justify-content: space-between;
        
        }
        .btn-container img{
            height: 40px;
        }
        ul{
            list-style: none;
        }
        li{
            text-align: center;
            padding: 5px 0px;
        }
        li:hover{
            background-color: rgba(0,0,0,0.3);
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="btn-container">
        <img class="reset-btn" title="查看楼层平面图" @click='reset' src="./imgs/map.png" alt="">
        <div class="layer-box">
            <img class="layer-btn" title="楼层选择器" @click='toggleLayerShow' src="./imgs/layer.png" alt="">
            <ul v-if = 'layerShow'>
                <li v-for='(item,index) in layerData' v-bind:data-key='item.key' @click='selectLayer'>{{item.name}}</li>
            </ul>
        </div>
    </div>
	<div id="container"></div>
</body>
<script src="js/vue.js"></script>
<script src="js/three.js"></script> 
<script src="js/loaders/GLTFLoader.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/renderers/CSS2DRenderer.js"></script>
<script src="js/libs/Tween.js"></script>
<script>
    (function(){
        const gltfLoader = new GLTFLoader();
        const modelUrl = 'https://houtaicdn.alva.com.cn/medias/resources/wechat/XiamenLieshi/model/GLTF3/XM.gltf';
        let scene,camera,renderer,controls,model;
        let sceneName = 'global';

        const origin = new THREE.Vector3(0,0,5), direction = new THREE.Vector3(0,0,5).normalize();
        let mouse = new THREE.Vector2(), raycaster = new THREE.Raycaster(origin, direction);

        init();
        // addHelper();

        function init(){
            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight, 0.1,1000);
            camera.position.z = 5;

            initControls();
            // addResetBtn();
            gltfLoader.load(modelUrl,function(gltf){
                model = gltf.scene;
                // model.position.set(0,-30,150);
                model.scale.set(3,3,3);
                model.rotation.set(1.5,0,0);
                scene.add(model);

                initLight();
            });

            renderer = new THREE.WebGLRenderer({
                antialias: true,
                alpha: true,
                preserveDrawingBuffer: true
            });
            renderer.setSize(window.innerWidth,window.innerHeight);
            document.body.appendChild(renderer.domElement);
            animate()
        }

        document.body.addEventListener('mousedown',onDown,false);
        function onDown(event){
            event.preventDefault();
            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
            mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
            raycaster.setFromCamera(mouse, camera);
            var intersects = raycaster.intersectObjects(model.children);
            if (intersects.length > 0 && sceneName === 'global') {// 如果点击到了某个房间，则进入此房间查看
                const name = intersects[0].object.name;
                console.log(name)
                goPart(name);
            }
        }

        function goPart(name){
            if (sceneName === 'Ani') return;
            sceneName = 'Ani';
            var sName = '';
            var tweenP = new TWEEN.Tween(model.position);// TWEEN过渡动画
            var tweenS = new TWEEN.Tween(model.scale);
            var tweenR = new TWEEN.Tween(model.rotation);
            tweenS.to(new THREE.Vector3(300,300,300),3000);
            tweenR.to(new THREE.Vector3(0,0,0), 1000);
            
            tweenP.easing(TWEEN.Easing.Quadratic.InOut);
            tweenS.easing(TWEEN.Easing.Quadratic.InOut);
            tweenR.easing(TWEEN.Easing.Quadratic.InOut);

            controls.reset();

            switch(name){
                    case '房间1':// 正中
                        sName = 'center';
                        tweenP.to(new THREE.Vector3(0,40,0),3000);
                        break;
                    case '房间2':// 中左
                        sName = 'center-left';
                        tweenP.to(new THREE.Vector3(170,20,0),3000);
                        break;
                    case '房间3':// 中右
                        sName = 'center-right';
                        tweenP.to(new THREE.Vector3(-140,-30,0),3000);
                        break;
                    case '房间4':// 上左
                        sName = 'top-left';
                        tweenP.to(new THREE.Vector3(80,-30,150),3000);
                        break;
                    case '房间5':// 上右
                        name = 'top-right';
                        tweenP.to(new THREE.Vector3(-80,-30,150),3000);
                        break;
                    case '房间6':// 下
                        sName = 'bottom';
                        tweenP.to(new THREE.Vector3(0,0,-150),3000);
                        break;
                }

            // tweenP.delay(2000);
            tweenP.start();
            tweenS.start();
            tweenR.start();
            
            tweenP.onComplete(() => {
                sceneName = sName;
            })

        }

        
        function initLight(){
            var aLight = new THREE.AmbientLight(0xffffff,0.2);
            scene.add(aLight)
            var dLight1 = new THREE.PointLight(0xffffff,1,100);  
            dLight1.position.set(0,60,0);
            dLight1.target = model;
            scene.add(dLight1);
            var dLight2 = new THREE.PointLight(0xffffff,1,300);  
            dLight2.position.set(170,40,0);
            dLight2.target = model;
            var dLight3 = new THREE.PointLight(0xffffff,1,300);  
            dLight3.position.set(-140,-10,0);
            dLight3.target = model;
            scene.add(dLight3);
            var dLight4 = new THREE.PointLight(0xffffff,1,300);  
            dLight4.position.set(80,-10,150);
            dLight4.target = model;
            scene.add(dLight4);
            var dLight5 = new THREE.PointLight(0xffffff,1,300);  
            dLight5.position.set(0,20,-150);
            dLight5.target = model;
            scene.add(dLight5);
        }

        function animate(){
            requestAnimationFrame(animate);
            renderer.render(scene,camera);
            TWEEN.update();
        }

        function initControls(){
            controls = new THREE.OrbitControls(camera)
            controls.enableZoom = true
            //controls.autoRotate = true;
            controls.minDistance = 3;
            controls.maxDistance = 10;
            
            controls.enablePan = false;
        }

        function addHelper(){
            // var dir = new THREE.Vector3( 1, 2, 0 );
            // dir.normalize();
            // var origin = new THREE.Vector3( 0, 0, 0 );
            // var length = 1;
            // var hex = 0xffff00;
            // var arrowHelper = new THREE.ArrowHelper( dir, origin, length, hex );
            // scene.add( arrowHelper );

            // 红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴.
            var axesHelper = new THREE.AxesHelper(250);
            scene.add(axesHelper);
        }
    
        function addResetBtn(){
            let labelRenderer = new CSS2DRenderer('img');
            labelRenderer.setSize( 60, 40 );
            // labelRenderer.domElement.style.pointerEvents = 'none';// 禁用事件

            labelRenderer.domElement.style.position = 'absolute';
            labelRenderer.domElement.style.top = '10px';
            labelRenderer.domElement.style.left = '10px';
            labelRenderer.domElement.src = './imgs/map.png';
            labelRenderer.domElement.alt = '平面图';
            labelRenderer.domElement.title = '平面图';

            labelRenderer.domElement.addEventListener('click',reset,false);
            labelRenderer.render( scene, camera );

            document.getElementById( 'container' ).appendChild( labelRenderer.domElement );
        }


        
        var vm = new Vue({
            el: '.btn-container',
            data: {
                layerData:[
                    {name: '全部', key: '0'},
                    {name: '一楼', key: '1'},
                    {name: '二楼', key: '2'},
                ],
                layerShow: false
            },
            methods:{
                toggleLayerShow(){
                    this.layerShow = !this.layerShow;
                },
                selectLayer(e){
                    this.layerShow = !this.layerShow;
                    const { key } = e.srcElement.dataset;
                    camera.layers.mask = Number(key);//  修改显示的楼层
                },
                reset(){// 查看平面图
                    if (sceneName === 'Ani') return;
                    sceneName = 'Ani';
                    // model.position.set(0,0,0);
                    // model.scale.set(3,3,3);
                    // model.rotation.set(1.5,0,0);
                    controls.reset();
                    var tweenP = new TWEEN.Tween(model.position);
                    tweenP.to(new THREE.Vector3(0,0,0), 2000);
                    var tweenR = new TWEEN.Tween(model.rotation);
                    tweenR.to(new THREE.Vector3(1.5,0,0), 2000);
                    var tweenS = new TWEEN.Tween(model.scale);
                    tweenS.to(new THREE.Vector3(3,3,3), 2000);

                    tweenP.easing(TWEEN.Easing.Quadratic.InOut);
                    tweenS.easing(TWEEN.Easing.Quadratic.InOut);
                    tweenR.easing(TWEEN.Easing.Quadratic.InOut);

                    tweenP.start(); 
                    tweenR.start(); 
                    tweenS.start();
                    tweenP.onComplete(() => {   
                        sceneName = 'global';
                    })
                }
            }
        });
    })()
</script>
</html>
废柴小z
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Cesium模型、深圳市建筑模型-gltf模型-深圳市建筑模型，已经转换成gltf格式，直接可以在cesium地图中使用。
05-08
这个是从谷歌地球下载下来的深圳全部的建筑模型，已经逐个转换成了gltf格式。并且逐个手动调整了实际位置，获取到经纬度。 上传附件为 百度云盘下载地址和提取密码。请大家放心下载。
高德地图加载三维模型vue（.obj转.gltf）
qq_45331969的博客
12-05 947
这里首先要将我们的.obj文件转换为.gltf文件。
WebGIS开发小知识：常见的三维数据格式
最新发布
GIS前端嘉欣的博客
05-07 986
众所周知，Cesium是⼀款用于构建Web上⾼性能的3D地理空间数据应用的开源JavaScript类库，⽀持多种数据格式，3D Tiles是它的特色。glTF（GL Transmission Format）是⼀种用于在WebGL、OpenGL ES和OpenXR等图 形API中传输和加载3D动态场景的开放标准。glTF也被称作“3D界的jpeg”，足见其标准化程度Cesium中可以使用glTF格式的3D模型、纹理等信息。glTF生态系统。
Cesium地图中加载的建筑模型3D model 模型 gltf格式建筑模型
04-24
从谷歌地球下载的深圳市福田区的几个建筑模型， 自行转换为gltf格式了。 直接在cesium代码中就能加载调用。。。一共6个模型， 深圳图书馆， 深圳市民中心 深圳音乐厅 深圳证券交易所 。。。
obj模型转为gltf模型并叠加至高德地图上
m0_46502931的博客
06-20 771
可以将起代码复制下来，将其中的模型替换掉即可。
三维模型gltf 建筑
04-10
cesium中gltf三维模型
三维城市模型 gltf格式
03-06
4. `city.obj`：这是一个OBJ格式的3D模型文件，这是一种常见的3D模型交换格式，包含模型的几何信息和面片。这个文件可能是用来备份或与其他不支持glTF的软件交互的。 在将三维城市模型从OBJ或其他格式转换为glTF时...
.gltf格式可用测试模型
01-16
在压缩包中，我们有一个名为"car"的.gltf文件，这很可能是一个3D汽车模型。使用Cesium，我们可以轻松地将这个汽车模型展示在地图上，实现动态的交通模拟、车辆轨迹展示等功能。Cesium的强大之处在于其与真实世界地理...
obj模型转3dtiles和gltf工具模型
07-30
- 在虚拟现实(VR)或增强现实(AR)应用中加载gltf模型，享受快速且高效的3D体验。 - 对大型3D场景进行分块管理，比如游戏中的地图或建筑群。 总之，"obj模型转3dtiles和gltf工具模型"提供了一种有效的方式，将传统3D...
gltf车子.zip
08-27
2. **Mapbox**：Mapbox是一个地图定制和地理空间数据可视化平台，它提供了丰富的工具和API来构建自定义地图应用。尽管Mapbox的核心功能集中在2D地图，但通过其GL JS库，可以利用WebGL进行3D渲染，包括加载gltf模型。...
隧道3dmax 2012打开可以进行转换fbx gltf obj等 使用threejs cesium加载 有贴图
05-21
标题中的“隧道3dmax 2012打开可以进行转换fbx gltf obj等”意味着这个压缩包文件包含了一个3D模型，该模型是在3D建模软件3ds Max 2012中创建的，它是一个隧道的场景。3ds Max是一款广泛使用的专业3D建模、动画和...
glb模型扩散效果，楼层分离
04-23
模型爆炸扩散 楼层分离
微信小程序加载fbx模型
03-08
这个压缩包里面包含three.js在微信小程序端加载3D动画fbx模型的代码。 得到了fbx模型的http链接，使其加载在小程序端，都是适配小程序版本的代码 其中three_new.js是小程序版的3D加载库文件 FBXLoader_new是小程序版本的fbx模型的加载器 inflate.min.js是小程序版的压缩解压库 model.js里面的export函数可以直接调用，把fbx模型的http链接还有相关的dom节点传进去就可以加载啦~不懂得可以留言哦，里面的路径各位大佬可以看着改一下~如有更好的意见请留言告诉我哦~~~
什么是3D模型，什么是GLTF，又如何使用GLTF文件
qq_41347078的博客
05-05 3432
glb,gltf模型(webvrmodel)-gltf模型下载定制,glb模型下载定制,三维项目电商网站在线三维展示,网页VR模型下载,三维模型下载,webgl网页模型下载VR模型网（www.webvrmodel.com)-提供品类齐全的gltf模型下载,glb模型下载,gltf模型定制,glb模型定制,webgl网页模型下载,网页VR模型下载,原创作品分享,模型师、动画师等.是基于三维设计师交流互动的服务平台。https://webvrmodel.com/model_index.php 在本文.
MapBox&ThreeJS加载GLTF静态模型
GIS（地理信息系统）
02-22 940
MapBox&ThreeJS加载GLTF静态模型
SuperMap webgl 中使用的gltf模型制作方法
THEDEAMON的博客
10-20 2219
当我们使用Cesium开发KML+GLTF模型表示动态的运动轨迹的时候总会用到gltf格式的模型，但是一般官方的模型库总是只有几个，不能够满足使用，这里整理了一套从数据下载到使用的全家桶套餐供各位看官享用。话不多说，上菜~ 目录 一、下载模型 二、下载安装模型转换需要的插件 三、模型开始导出 一、下载模型 注册3d66网站账号，登陆后直接【搜索】需要的模型名称，然后选择【免费】的模型 找到心仪的模型，点击进去后， 找到右侧的【立即下载】，然后选择【常规下载】 2.下载好后是一个max文
Mars3D开发基础学习:glTF小模型
木遥的专栏
12-31 2422
glTF全称是 Graphics Language Transmission Format （图形语言传输格式），是一种针对GL(WebGL，OpenGL ES以及OpenGL)接口的运行时资产传递格式，由澳大利亚的 Khronons 集团进行维护，并于2017年6月5日在GitHub 上公布了glTF 2.0的规范，此文也是针对于2.0版本进行介绍的。 glTF通过提供高效、可扩展、可互操作的格式来传输和加载三维内容，填补了3D建模工具与现代图形应用程序之间的空白，它已成为了 Web 上的3D 对象标准
浅谈 WebVR 全景
趣谈前端
10-23 1337
大厂技术坚持周更精选好文前言近年来VR概念越来越火，相信大家在网上都有过VR的浏览体验，比如VR全景看房[1]、VR全景看车[2]、VR全景旅游[3]等等，VR全景给了我们视觉上的沉浸式体验。本文将会简单探究Web VR全景的实现原理，同时也会用threejs实现两个小的demo，希望对大家以后在业务上遇到类似的场景能有所帮助。什么是VR引用维基百科的定义：虚拟现实（英语：virtual ...
给一个腾讯地图加载gltf模型的源码
05-31
好的，以下是一个简单的示例代码，用于在腾讯地图中加载gltf模型： ```html <!DOCTYPE html> 腾讯地图加载gltf模型示例 html,body,#container{ height:100%; width:100%; margin:0; padding:0...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值