web上构建3d效果 基于three.js的实例

已于 2022-08-04 09:03:49 修改
阅读量2.4k 收藏 9
点赞数 1
分类专栏： THREE.JS 3D web3d 文章标签： 3d threejs web3d
于 2022-07-27 09:05:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011540323/article/details/125571696
版权
THREE.JS 同时被 3 个专栏收录
4 篇文章 1 订阅
订阅专栏
3D
3 篇文章 2 订阅
订阅专栏
web3d
2 篇文章 0 订阅
订阅专栏

web页面上提供3D效果，可以为页面提供不少色彩，H5之后canvas 为webgl提供了基础，使得在web页面使用JS也能写出3D的效果，其中three.js作为封装了图形函数 的框架，为入门提供了方便，效果图如下。

 

以上是官方例子中其中的三个，没接触过的朋友肯定会觉得很神奇，事实上three.js能做的远不止这些，入门容易，如果灵活运用到项目中就只能看各自的发挥了。

下面这个是自己做的一个项目中的效果

 地图JSON如下，自己封装了对室内墙体生成的封装，后期有空会详细讲解。

绘制3D室内 案例

var zallMap2 = [
    {
        title: '',
        floorType:floorTypes[1],
        x: 0,
        y: 80,
        z: 0,
        width: 962,
        height: 866,
        color: "#142B46",
        textcolor: "black",
        bordercolor: "rgba(76, 181, 216, 0.85)",
        imageurl: 'images/Escalator.png',
    },
    {
        title: '',
        x: 480,
        y: 80,
        z: 0,
        width: 2,
        height: 866,
        color: "#30B2BB",
        textcolor: "black",
        bordercolor: "rgba(76, 181, 216, 0.85)",
        bspMesh: [

            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 0,
                y: 80,
                z: 82,
                width: 38,
                height: 2,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 36,
                y: 80,
                z: 17,
                width: 2,
                height: 73.7,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 0,
                y: 80,
                z: 120,
                width: 38,
                height: 5,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 36,
                y: 80,
                z: 187.5,
                width: 2,
                height: 106.5,
                positionY: 0,
            },
             {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 0,
                y: 80,
                z: 213,
                width: 11.5,
                height: 2,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 26.5,
                y: 80,
                z: 213,
                width: 11.5,
                height: 2,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 0,
                y: 80,
                z: 270,
                width: 11.5,
                height: 2,
                positionY: 0,
            }, 
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 26.5,
                y: 80,
                z: 270,
                width: 11.5,
                height: 2,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 36,
                y: 80,
                z: 270,
                width: 2,
                height: 92,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 0,
                y: 80,
                z: 360,
                width: 36,
                height: 2,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 36,
                y: 80,
                z: 360,
                width: 2,
                height: 59,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 36,
                y: 80,
                z: 402,
                width: 17,
                height: 2,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 66,
                y: 80,
                z: 402,
                width: 2,
                height: 30,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 36,
                y: 80,
                z: 431,
                width: 2,
                height: 18,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 0,
                y: 80,
                z: 462,
                width: 36,
                height: 2,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 36,
                y: 80,
                z: 461,
                width: 2,
                height: 69,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 0,
                y: 80,
                z: 525,
                width: 11.5,
                height: 2,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 26.5,
                y: 80,
                z: 525,
                width: 11.5,
                height: 2,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 0,
                y: 80,
                z: 648,
                width: 11.5,
                height: 2,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 26.5,
                y: 80,
                z: 648,
                width: 11.5,
                height: 2,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 36,
                y: 80,
                z: 648,
                width: 2,
                height: 106.5,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 0,
                y: 80,
                z: 738,
                width: 36,
                height: 5,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 0,
                y: 80,
                z: 779,
                width: 36,
                height: 2,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 36,
                y: 80,
                z: 772,
                width: 2,
                height: 73.5,
                positionY: 0,
            },
            
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 924,
                y: 80,
                z: 17,
                width: 2,
                height: 73.5,
                positionY: 0,
            },
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 924,
                y: 80,
                z: 82,
                width: 38,
                height: 2,
                positionY: 0,
            }, 
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 924,
                y: 80,
                z: 108.5,
                width: 2,
                height: 106.5,
                positionY: 0,
            },  
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 924,
                y: 80,
                z: 120,
                width: 38,
                height: 5,
                positionY: 0,
            },  
                {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 924,
                y: 80,
                z: 213,
                width: 11.5,
                height: 2,
                positionY: 0,
            },  
                {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 950.5,
                y: 80,
                z: 213,
                width: 11.5,
                height: 2,
                positionY: 0,
            },  
            
                {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 924,
                y: 80,
                z: 269,
                width: 11.5,
                height: 2,
                positionY: 0,
            },  
            
                {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 950.5,
                y: 80,
                z: 269,
                width: 11.5,
                height: 2,
                positionY: 0,
            },  
                    {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 924,
                y: 80,
                z: 269,
                width: 2,
                height: 149,
                positionY: 0,
            },  
                    {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 924,
                y: 80,
                z: 359,
                width: 38,
                height: 2,
                positionY: 0,
            },  
                    {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 909,
                y: 80,
                z: 401,
                width: 17,
                height: 2,
                positionY: 0,
            },  
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 896,
                y: 80,
                z: 401,
                width: 2,
                height: 30,
                positionY: 0,
            },  
                {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 924,
                y: 80,
                z: 430,
                width: 2,
                height: 18,
                positionY: 0,
            },  
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 924,
                y: 80,
                z: 460,
                width: 38,
                height: 2,
                positionY: 0,
            },  
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 924,
                y: 80,
                z: 459,
                width: 2,
                height: 69,
                positionY: 0,
            },  
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 924,
                y: 80,
                z: 526,
                width: 11.5,
                height: 2,
                positionY: 0,
            },  
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 950.5,
                y: 80,
                z: 526,
                width: 11.5,
                height: 2,
                positionY: 0,
            },  
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 924,
                y: 80,
                z: 649,
                width: 11.5,
                height: 2,
                positionY: 0,
            },  
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 950.5,
                y: 80,
                z: 649,
                width: 11.5,
                height: 2,
                positionY: 0,
            },  
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 924,
                y: 80,
                z: 649,
                width: 2,
                height: 106.5,
                positionY: 0,
            }, 
            
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 924,
                y: 80,
                z: 739,
                width: 38,
                height: 5,
                positionY: 0,
            }, 
            
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 924,
                y: 80,
                z: 773.5,
                width: 2,
                height: 73.5,
                positionY: 0,
            }, 
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 924,
                y: 80,
                z: 780,
                width: 38,
                height: 2,
                positionY: 0,
            }, 
            
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 400,
                y: 80,
                z: 0,
                width: 2,
                height: 42,
                positionY: 0,
            }, 
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 400,
                y: 80,
                z: 40,
                width: 172,
                height: 2,
                positionY: 0,
            }, 
            
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 570,
                y: 80,
                z: 0,
                width: 2,
                height: 42,
                positionY: 0,
            }, 
            
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 400,
                y: 80,
                z: 824,
                width: 2,
                height: 42,
                positionY: 0,
            }, 
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 400,
                y: 80,
                z: 824,
                width: 172,
                height: 2,
                positionY: 0,
            }, 
            
            {
                type: 'union',
                geometryType: 'box', color: '#fff',

                x: 570,
                y: 80,
                z: 824,
                width: 2,
                height: 42,
                positionY: 0,
            },
            
            
            
            
            
            {
                type: 'subtract',//门
                geometryType: 'box', color: '#fff',

                x: 480,
                y: 80,
                z: 141.5,
                width: 2,
                height: 37.6,
                positionY: 0,
            },
            {
                type: 'subtract',//门
                geometryType: 'box', color: '#fff',

                x: 480,
                y: 80,
                z: 374.2,
                width: 2,
                height: 37.6,
                positionY: 0,
            },
            {
                type: 'subtract',//门
                geometryType: 'box', color: '#fff',

                x: 480,
                y: 80,
                z: 454.6,
                width: 2,
                height: 37.6,
                positionY: 0,
            },
            {
                type: 'subtract',//门
                geometryType: 'box', color: '#fff',

                x: 480,
                y: 80,
                z: 686,
                width: 2,
                height: 45,
                positionY: 0,
            }]
    },
    {
        title: '',
        x: 0,
        y: 80,
        z: 432,
        width: 962,
        height: 2,
        color: "#30B2BB",
        textcolor: "black",
        bordercolor: "rgba(76, 181, 216, 0.85)",
        bspMesh: [
            {
                type: 'subtract',//门
                geometryType: 'box', color: '#fff',

                x: 72.8,
                y: 80,
                z: 432,
                width: 37.8,
                height: 2,
                positionY: 0,
            },
            {
                type: 'subtract',//门
                geometryType: 'box', color: '#fff',

                x: 420,
                y: 80,
                z: 432,
                width: 37.5,
                height: 2,
                positionY: 0,
            },
            {
                type: 'subtract',//门
                geometryType: 'box', color: '#fff',

                x: 502.5,
                y: 80,
                z: 432,
                width: 37.5,
                height: 2,
                positionY: 0,
            }
            ,
            {
                type: 'subtract',//门
                geometryType: 'box', color: '#fff',

                x: 848,
                y: 80,
                z: 432,
                width: 40,
                height: 2,
                positionY: 0,
            }
        ]
    },
    {
        title: '',//wall 一层北墙体
        x: 0,
        y: 80,
        z: 0,
        width: 962,
        height: 2,
        color: "#30B2BB",
        textcolor: "black",
    },
    {
        title: '',//wall 西
        x: 0,
        y: 80,
        z: 2,
        width: 2,
        height: 864,
        color: "#30B2BB",
        textcolor: "black",
       
    }
    ,
    {
        title: '',//wall 东
        x: 960,
        y: 80,
        z: 0,
        width: 2,
        height: 864,
        color: "#30B2BB",
        textcolor: "black",
    }
    ,
    {
        title: '',//wall 南
        x: 0,
        y: 80,
        z: 864,
        width: 962,
        height: 2,
        color: "#30B2BB",
        textcolor: "black",
   
    }
];

11eleven
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
web前端3D：three.js加载汽车模型
08-04
Three.js作为一款强大的JavaScript库，为WebGL提供了一个简单易用的接口，使得开发者无需深入理解底层图形编程，也能构建出复杂的3D场景。本篇文章将详细讲解如何利用three.js加载汽车模型，以及相关的JavaScript...
基于vue3，three.js,3D智慧园区
11-09
在构建“基于vue3，three.js,3D智慧园区”的项目中，我们涉及了多个关键技术和概念，这些技术是现代Web开发中3D图形和交互式应用的核心。下面将详细阐述这些知识点： **Vue3**: Vue.js是一个流行的前端JavaScript...
使用three.js在网页里展示3D模型
m0_64889685的博客
05-15 1688
关于找较早的版本可以去下面链接中去获取,通过查找可以通过133的版本找到原生html可以使用的版本，像是GLTFLoader文件也可以通过在目录three.js-r133\examples\js\loaders中找到。现在有了内容当时图片并没有任何功能，一下代码是实现功能的部分主要的效果是视图飞行移动的效果，主要是通过判断鼠标的位置和3D模型视图里的位置是否重合来判断是否发生事件,左键为移动视图，右键为跳转链接。本篇本章是在vue框架下进行的网页搭建，使用原生版本也可以进行three.js的使用。
web3D构建三维房间空间（three.js）
12-04
web3D构建，根据房间二维平面图构建了三维空间图，可实现房间开关门，移动，旋转，可各个角度观察房屋，使用了threejs库
探索Three.js：Web 3D开发的强大工具
最新发布
weixin_42959900的博客
08-08 393
Three.js是一个基于WebGL的JavaScript库，允许开发者在浏览器中创建和展示3D图形。凭借其简洁的API和丰富的功能，Three.js在Web 3D开发领域广受欢迎。本篇文章将带你了解Three.js的基础知识，并提供一些实用的开发技巧。Three.js是一个强大且易于使用的Web 3D开发库。通过掌握基本的场景创建方法和一些实用技巧，你可以轻松地在网页中创建复杂的3D图形和动画。
[web3d] | 基于web3d的案例整理
啊嘞嘞的博客
08-18 1602
学习cesium和threejs的过程中整理的一些个人示例，后续慢慢完善并上传github
Web3D开发经验分享：基于Three.js的Web3D建模案例
左本Web3D
04-05 1711
在进行Web3D开发时，我们需要掌握基础知识，使用Web3D框架进行开发，并且掌握一些Web3D开发的技巧和经验，以提高开发效率和用户体验。充分利用Web3D框架的特性：在进行Web3D开发时，可以充分利用Web3D框架的特性，例如Three.js框架的粒子系统、音频系统和物理引擎等，以及A-Frame框架的实体组件、物理引擎和VR支持等。控制3D场景的性能和流畅度：在进行Web3D开发时，需要控制场景的性能和流畅度，例如控制3D模型的多边形数和纹理质量等。三、Web3D开发的技巧和经验。
基于 Threejs 的 web 3D 开发入门
yangniceyangyang的博客
09-18 2265
导语 随着软硬件的发展，在PC和移动端浏览器上进行web 3D开发的条件已经基本成熟了，出现了不少js 3D库，Threejs是js 3D库中的佼佼者。国内也有企业开始做一些应用尝试，某宝2016年双11就用ThreeJS做了一个比较酷炫的3D宣传页面刷爆了朋友圈。 下图是用Threejs绘制的一个3D立方体动画的截图，在这个demo里，立方体会动态的旋转，threeJS 30行代码就可以完成这么一个demo。Threejs让没有丰富3D编程经验的web前端开发人员，也可以快速上手开发web 3D应用。
50套Threejs实现的Web3D学习案例，总有一套适合你
左本Web3D
01-03 3034
个人主页：，更多案例预览请点击==》个人简介：专注Web3D使用ThreeJS实现3D效果技巧和学习案例💕 💕积跬步以至千里，致敬每个爱学习的你。喜欢的话请三连，有问题请私信或者加微信。在18年至23年这期间，做了很多web3D方面的项目，如：数字孪生、元宇宙、VR全景、3D大屏、平台工具等项目软件。大部分都是我负责的项目，从开始不知道如何与模型设计、UI设计配合到总结出一套如何与模型设计、UI设计配合可以实现理想效果的经验。过程中也遇到多端，性能，兼容、配合各种各样的问题，踩了很多坑，也学到了很多
three.js. 3D机房项目
09-06
【描述】"使用three.js开发的3D机房项目"意味着项目的核心是three.js，这是一个开源的JavaScript库，专门用于创建和展示3D计算机图形。通过这个项目，开发者可以构建交互式的、高细节度的机房模型，包括服务器、空调...
基于three.js 和ArcGIS JS API meshline
04-08
在现代Web开发中，将3D图形与地理信息系统（GIS）结合已经成为一种常见的需求，用于构建交互式的地图应用。Three.js是一个强大的JavaScript库，专为WebGL设计，它提供了丰富的功能来创建和展示3D对象。另一方面，...
Web-Modeler:用于体素游戏的基于Web的3D建模器
05-22
网络建模者 体素建模器 Voxel Modeler是一个简单的基于Web的建模软件，旨在用于创建Voxel模型。 Voxel建模器包含用于渲染示意图的阶梯网格以及用于各种对象的3D模型。 特征 长方体模型与变换 创建的所有模型的数据库存档 JSON和OBJ模型导出 自动生成纹理表 模型画家（在画布上绘画模型） 骨骼动画 依存关系 Node.js Three.js Require.js Underscore.js 基于以下代码： :
webGL 3D动画效果结合HTML5的案例
09-06
webGL教程，十分全面包括了Threejs的使用，部署等操作。基于浏览器的动效，一般用于最新的谷歌浏览器适用性更强。
web前端3d环形图
02-02
3d环形图可以用鼠标拖拽 把里面的事件改了可以在手机上拖拽
webGL3D机房模型
10-17
一个基于webGL的3D机房demo，实现了烟雾、巡检、漏水、机柜容量等功能
使用three.js 的 交互式 3D 心脏模型
07-14
在本项目中，我们将深入探讨如何使用流行的JavaScript库three.js创建一个交互式的3D心脏模型。three.js是一个强大的WebGL库，它使得在浏览器中构建3D图形变得简单易行。通过结合HTML5 Canvas、SVG和WebGL，three.js...
web 3d场景构建+three.js+室内围墙，仓库，楼梯，货架模型等，第一人称进入场景案例
acheng
08-07 3293
基于three.js做的仓库布局模拟，地图元素除了大模型外，其他都是通过JSON数据解析动态生成的，例如墙体，柱子门口，地标等，集成了第一人称的插件可以第一人称进入场景有需要的可以下载看看，对想入门的朋友应该有一些参考价值。
分享WebGL物体三维建模
通达的博客
02-22 1106
WebGL物体三维建模
如何制作内含展示3D模型（可360度观看模型）的网页？
weixin_50515446的博客
05-10 541
综上所述，创建一个展示3D模型的网页涉及到3D建模、模型优化、选择3D渲染引擎、确保Web兼容性、添加交互功能、使用WebGL和HTML5技术、利用在线平台和工具。3、3D引擎与渲染：选择一个适合Web的3D渲染引擎，如 博维数孪（Bowell） 3D渲染引擎，支持GPU加速和着色器渲染，以提供高质量的图形渲染效果。1、3D建模：首先，你需要一个3D模型。2、模型优化：为了在网页上高效展示，通常需要对3D模型进行优化，减少模型的多边形数量，压缩纹理等，以便于在网页上快速加载和渲染。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

11eleven

你的鼓励是我创作的动力 !

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值