当前位置：网站首页>An example of building 3D effects on the web based on three.js

An example of building 3D effects on the web based on three.js

2022-07-27 14:49:00 【11eleven】

web Available on page 3D effect , Can provide a lot of colors for the page ,H5 after canvas by webgl Provides the foundation , Make in web Page using JS Can also write 3D The effect of , among three.js As an encapsulated graphic function Framework , Convenient for getting started , The renderings are as follows .

These are three of the official examples , Friends who haven't been in touch will definitely feel very magical , in fact three.js There is much more to be done , It's easy to get started , If it is flexibly applied to the project, we can only see their respective play .

The following is the effect of a project made by myself

Map JSON as follows , I encapsulated the package generated by the indoor wall , I'll explain it in detail later when I'm free .

draw 3D indoor Case study

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',// door
geometryType: 'box', color: '#fff',

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

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

x: 480,
y: 80,
z: 454.6,
width: 2,
height: 37.6,
positionY: 0,
},
{
type: 'subtract',// door
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',// door
geometryType: 'box', color: '#fff',

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

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

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

x: 848,
y: 80,
z: 432,
width: 40,
height: 2,
positionY: 0,
}
]
},
{
title: '',//wall North wall on the first floor
x: 0,
y: 80,
z: 0,
width: 962,
height: 2,
color: "#30B2BB",
textcolor: "black",
},
{
title: '',//wall In the west
x: 0,
y: 80,
z: 2,
width: 2,
height: 864,
color: "#30B2BB",
textcolor: "black",

}
,
{
title: '',//wall In the east
x: 960,
y: 80,
z: 0,
width: 2,
height: 864,
color: "#30B2BB",
textcolor: "black",
}
,
{
title: '',//wall south
x: 0,
y: 80,
z: 864,
width: 962,
height: 2,
color: "#30B2BB",
textcolor: "black",

}
];

原网站

版权声明
本文为[11eleven]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/208/202207271335272715.html

当前位置：网站首页>An example of building 3D effects on the web based on three.js

An example of building 3D effects on the web based on three.js

边栏推荐

猜你喜欢

随机推荐