three实现三维立方体玻璃镜像放大旋转效果代码
代码语言:html
所属分类:三维
代码描述:three实现三维立方体玻璃镜像放大旋转效果代码
代码标签: three 三维 立方体 玻璃 镜像 放大 旋转
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; margin: 0; padding: 0; } body { background: #abced8; } #contents { position: relative; color: white; z-index: 2; } h1 { position: fixed; top: 1vw; left: 1vw; } h2 { position: fixed; bottom: 1vw; left: 1vw; } h1, h2 { font-size: 2em; } canvas { position: fixed; width: 100%; height: 100%; top: 0; left: 0; margin: 0; padding: 0; z-index: 0; } </style> </head> <body > <!-- Portal Showcase type2--> <!-- using three.js --> <!-- type1 is 👉 https://codepen.io/wakana-k/pen/qByRLgj --> <div id="contents"> <h1>Portal Showcase</h1> <h2>Type 2</h2> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.145.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.145.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/CameraUtils.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/BufferGeometryUtils.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tween.min.js"></script> <script > !function() { "use strict"; function e(e) { E = 2, h = c / 2, 0 == e ? (B[e] = new THREE.Scene(), B[e].background = i.background, (H = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, .01, 50)).position.set(n.position.x, n.position.y, n.position.z), H.lookAt(0, 0, 0), H.name = "Camera", B[e].add(H), B[e].add(O), (Z = Z.clone()).name = "Object", B[e].add(Z), (S = S.clone()).name = "Zoom0", S.rotation.set(0, 0, 0), S.position.set(E, -E, h), B[e].add(S), (S = S.clone()).name = "Zoom1", S.rotation.set(0, Math.PI, 0), S.position.set(-E, -E, -h), B[e].add(S), (S = S.clone()).name = "Zoom2", S.rotation.set(0, Math.PI / 2, 0), S.position.set(h, -E, -E), B[e].add(S), (S = S.clone()).name = "Zoom3", S.rotation.set(0, -Math.PI / 2, 0), S.position.set(-h, -E, E), B[e].add(S), (S = S.clone()).name = "Zoom4", S.rotation.set(-Math.PI / 2, 0, 0), S.position.set(E, h, E), B[e].add(S)) : (B[e] = B[0].clone(), B[e].traverse(function(e) { e.isMesh && (e.material = e.material.clone()); })), (Z = Z.clone()).material = Z.material.clone(), Z.name = "Object" + e, i.add(Z), 0 == e && ((S = (S = S.clone()).clone()).material = S.material.clone(), S.name = "Zoom0", S.rotation.set(0, 0, 0), S.position.set(E, -E, h), i.add(S), (S = S.clone()).material = S.material.clone(), S.name = "Zoom1", S.rotation.set(0, Math.PI, 0), S.position.set(-E, -E, -h), i.add(S), (S = S.clone()).material = S.material.clone(), S.name = "Zoom2", S.rotation.set(0, Math.PI / 2, 0), S.position.set(h, -E, -E), i.add(S), (S = S.clone()).material = S.material.clone(), S.name = "Zoom3", S.rotation.set(0, -Math.PI / 2, 0), S.position.set(-h, -E, E), i.add(S), (S = S.clone()).material = S.material.clone(), S.name = "Zoom4", S.rotation.set(-Math.PI / 2, 0, 0), S.position.set(E, h, E), i.add(S)), j.load(P[e], function(t) { t.encoding = THREE.sRGBEncoding, t.mapping = THREE.EquirectangularRefractionMapping, B[e].getObjectByName("Skybox").material.map = t, B[e].getObjec.........完整代码请登录后点击上方下载按钮下载查看
网友评论0