国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

<menu id="rvbfy"></menu>

<menu id="rvbfy"><ins id="rvbfy"></ins></menu>

web上構(gòu)建3d效果基于three.js的實(shí)例

2年前作者：11eleven分類：Toy博客閱讀(88)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了web上構(gòu)建3d效果基于three.js的實(shí)例。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

web頁面上提供3D效果，可以為頁面提供不少色彩，H5之后canvas 為webgl提供了基礎(chǔ)，使得在web頁面使用JS也能寫出3D的效果，其中three.js作為封裝了圖形函數(shù) 的框架，為入門提供了方便，效果圖如下。

web上構(gòu)建3d效果基于three.js的實(shí)例

? web上構(gòu)建3d效果基于three.js的實(shí)例

以上是官方例子中其中的三個(gè)，沒接觸過的朋友肯定會(huì)覺得很神奇，事實(shí)上three.js能做的遠(yuǎn)不止這些，入門容易，如果靈活運(yùn)用到項(xiàng)目中就只能看各自的發(fā)揮了。

下面這個(gè)是自己做的一個(gè)項(xiàng)目中的效果

web上構(gòu)建3d效果基于three.js的實(shí)例

?地圖JSON如下，自己封裝了對(duì)室內(nèi)墻體生成的封裝，后期有空會(huì)詳細(xì)講解。

繪制3D室內(nèi) 案例

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",
? ?
? ? }
];文章來源地址http://www.zghlxwxcb.cn/news/detail-454040.html

到了這里，關(guān)于web上構(gòu)建3d效果基于three.js的實(shí)例的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

Three.js中的3D文字效果
對(duì)于一些設(shè)計(jì)網(wǎng)頁中經(jīng)常會(huì)出現(xiàn)一些3D的文字效果，本文將利用Three.js實(shí)現(xiàn)各種動(dòng)畫WebGL文本輸入效果。示例效果原文章通常情況下，文本網(wǎng)格是2D的平面形狀，我們所要實(shí)現(xiàn)的3D文本形狀則是要在2D的平面下，再生成z值形成一個(gè)立體的效果。首先，我們創(chuàng)建一個(gè)canvas元素，
2024年02月02日
瀏覽(22)
Three.js--》實(shí)現(xiàn)3D汽車展廳效果展示
目錄項(xiàng)目搭建初始化three.js基礎(chǔ)代碼加載汽車模型設(shè)置展廳效果設(shè)置GUI面板動(dòng)態(tài)控制車身操作車門操作與車身視角展示設(shè)置手動(dòng)點(diǎn)擊打開關(guān)閉車門設(shè)置圖片背景今天簡單實(shí)現(xiàn)一個(gè)three.js的小Demo，加強(qiáng)自己對(duì)three知識(shí)的掌握與學(xué)習(xí)，只有在項(xiàng)目中才能靈活將所學(xué)知識(shí)運(yùn)用起
2024年02月09日
瀏覽(92)
Three.js--》實(shí)現(xiàn)圖片轉(zhuǎn)3D效果展示
目錄項(xiàng)目搭建初始化three.js基礎(chǔ)代碼加載圖片紋理設(shè)置著色器今天簡單實(shí)現(xiàn)一個(gè)three.js的小Demo，加強(qiáng)自己對(duì)three知識(shí)的掌握與學(xué)習(xí)，只有在項(xiàng)目中才能靈活將所學(xué)知識(shí)運(yùn)用起來，話不多說直接開始。項(xiàng)目搭建本案例還是借助框架書寫three項(xiàng)目，借用vite構(gòu)建工具搭建vue項(xiàng)目
2024年02月08日
瀏覽(88)
vue 項(xiàng)目使用three.js 實(shí)現(xiàn)3D看房效果
0.前言該教程能幫助直接寫出vue項(xiàng)目的3D看房效果?。?！先上效果圖 1.安裝依賴 2.vue代碼這里文件名為three.vue 代碼非原創(chuàng)，出處 vue3+threejs實(shí)現(xiàn)全景看房（異步加載 BOLLROOM 部件為對(duì)原代碼的修改）注意這里的hdr 文件必須要放在assets文件夾中，且要通過import模塊的形式導(dǎo)入！
2024年02月13日
瀏覽(94)
vue2+three.js實(shí)現(xiàn)類似VR、3D全景效果
效果圖：倆圖標(biāo)是我自己加的前進(jìn)后退按鈕，也是百度了好久，再加上GPT的幫助，才給搞出來。因?yàn)樾枨蠹?，都不看官方文檔，百度到一個(gè)能跑的demo之后改吧改吧，就先用著了。下面是代碼：這里代碼有很多用不到的地方和需要優(yōu)化的地方，我是來不及改了，就先這樣吧
2024年02月15日
瀏覽(87)
WEB 3D技術(shù) three.js 點(diǎn)光源
本文的話我們來設(shè)置一下點(diǎn)光源點(diǎn)光源其實(shí)最直觀的就是可以做螢火蟲也可以做星光點(diǎn)點(diǎn)的效果我們可以直接在官網(wǎng)中搜索 Pointlight 大家可以在官網(wǎng)這里看一下其實(shí) SpotLight 聚關(guān)燈中的屬性 Pointlight 點(diǎn)光源也有的我們先編寫代碼如下 PointLight 創(chuàng)建一個(gè)點(diǎn)光源這里我們給了
2024年01月19日
瀏覽(92)
WEB 3D技術(shù) three.js 陰影屬性
上文 WEB 3D技術(shù) three.js 光照與陰影我們說了陰影那么我們繼續(xù)將陰影的屬性目前我們的代碼目前陰影效果是這樣的我們可以設(shè)置它的一個(gè)模糊度我們官網(wǎng)搜索 LightShadow 下面找到 radius 模糊度的一個(gè)屬性這里我們可以設(shè)置 20 的一個(gè)模糊度運(yùn)行代碼然后看我們的模糊度
2024年01月22日
瀏覽(85)
vue2+three.js+blender（實(shí)現(xiàn)3d 模型引入并可點(diǎn)擊效果）
2023.9.13今天我學(xué)習(xí)了如何把3d建模里面的模型引入到vue中，并可以實(shí)現(xiàn)拖動(dòng)，點(diǎn)擊的效果：首先安裝： npm install three 相關(guān)代碼如下： ?如果沒有圖片可以去 Three.js--》建模軟件如何加載外部3D模型？_threejs加載3d模型_亦世凡華、的博客-CSDN博客
2024年02月03日
瀏覽(98)
WEB 3D技術(shù) three.js 聚光燈
本文我們來說說點(diǎn)光源和聚光燈點(diǎn)光源就像一個(gè)電燈泡一樣想四周發(fā)散光而聚光燈就像手電筒一樣像一個(gè)方向射過去距離越遠(yuǎn)范圍越大光越弱我們先來看一個(gè)聚光燈的效果我們可以編寫代碼如下 SpotLight 聚光燈然后通過 position 設(shè)置一下光的位置運(yùn)行代碼如下目前看
2024年01月21日
瀏覽(96)
WEB 3D技術(shù) three.js 3D賀卡(1) 搭建基本項(xiàng)目環(huán)境
好今天我也是在網(wǎng)上學(xué)的帶著大家一起來做個(gè)3D賀卡首先我們要?jiǎng)?chuàng)建一個(gè)vue3的項(xiàng)目、先創(chuàng)建一個(gè)文件夾裝我們的項(xiàng)目終端執(zhí)行 vue create 項(xiàng)目名稱例如我的名字想叫 greetingCards 就是因?yàn)檫@個(gè)名錄里面是全部都小寫的然后下面選擇 vue3 然后按下回車等待項(xiàng)目創(chuàng)建完成
2024年01月19日
瀏覽(94)

<big id="zpmh9"><strong id="zpmh9"><big id="zpmh9"></big></strong></big>

<thead id="zpmh9"><pre id="zpmh9"></pre></thead>

<source id="zpmh9"></source>