当前位置：网站首页>web上构建3d效果基于three.js的实例

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

2022-07-27 13:35:00 【11eleven】

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

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

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

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

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",

}
];