three CSS3DRenderer打造一个假三维多层图片合成效果代码
代码语言:html
所属分类:三维
代码描述:three CSS3DRenderer打造一个假三维多层图片合成效果代码,拖动鼠标试试
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <style> *{ margin: 0; padding: 0; } html,body{ height: 100%; } #container{ background: #1f1b22; } .container { width: 1448px; height: 750px; /*background: #213543;*/ } </style> <body> <div id="container"></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.109.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tween.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TrackballControls.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/CSS3DRenderer.js"></script> <script > const objectData = [ // 卡片1 { rotation:0, verticalBg:{ url:'//repo.bfw.wiki/bfwrepo/image/606bc8d3d6053.png', width: 1203, height: 589, }, ground:{ url:'//repo.bfw.wiki/bfwrepo/image/606bc8f0452bb.png', width:1203, height: 589, rotation:-Math.PI/180*70, }, thingsRotation:Math.PI/180*70, things:[ { url:'//repo.bfw.wiki/bfwrepo/image/606bc9181df17.png', width:403, height: 284, x:-80, y:-445, },{ url:'//repo.bfw.wiki/bfwrepo/image/606bc92eaf793.png', width:403, height: 284, x:198, y:-341, },{ url:'//repo.bfw.wiki/bfwrepo/image/606bc93c3485b.png', width:405, height: 299, x:-312, y:-247, },{ url:'//repo.bfw.wiki/bfwrepo/image/606bc960ad465.png', width:1131, height: 716, x:0, y:-315-50, },{ url:'//repo.bfw.wiki/bfwrepo/image/606bc97539e36.png', width:358, height: 442, x:-351, y:-360, },{ url:'//repo.bfw.wiki/bfwrepo/image/606bc981dd124.png', width:349, height: 448, x:347, y:-411, },{ url:'//repo.bfw.wiki/bfwrepo/image/606bc9ac3b8b6.png', width:360, height: 522, x:-520, y:-188-100, },{ url:'//repo.bfw.wiki/bfwrepo/image/606bc9c064a00.png', width:1404, height: 216, x:22, y:-47-100, },{ url:'//repo.bfw.wiki/bfwrepo/image/606bc9d9959aa.png', width:1118, height: 642, x:-40, y:-87-150, },{ url:'//repo.bfw.wiki/bfwrepo/image/606bc9f1d8962.png', width:364, height: 122, x:7, y:75-180, }, ] } ]; </script> <script > let camera,s.........完整代码请登录后点击上方下载按钮下载查看
网友评论0