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].getObjectByName("Skybox").material.needsUpdate = !0, i.getObjectByName("Zoom" + e).material.envMap = t, i.getObjectByName("Zoom" + e).material.needsUpdate = !0, i.getObjectByName("Object" + e).material.envMap = t, i.getObjectByName("Object" + e).material.needsUpdate = !0, B[e].environment = t, t.dispose(); }); } function t() { n.aspect = window.innerWidth / window.innerHeight, n.updateProjectionMatrix(), r.setSize(window.innerWidth, window.innerHeight); } function o(e) { T.set(e.clientX / window.innerWidth * 2 - 1, -e.clientY / window.innerHeight * 2 + 1), R.setFromCamera(T, n); const t = R.intersectObjects(i.children, !0); if (t.length && t[0].object.name && t[0].object.name.match(/Zoom/)) { let e = t[0].object.name.replace(/[^0-9]/g, ""), o = 1; 1 == b[e].value && (o = 0), new TWEEN.Tween(b[e]).to({ value: o }, 500).onUpdate(function() { w.set(y[e][0], y[e][1], y[e][2]), w.multiplyScalar(b[e].value), B[e].getObjectByName("Object").position.set(w.x, w.y, w.z); for (let t = 0; t < f.length; t++) B[t].getObjectByName("Zoom" + e).morphTargetInfluences[0] = b[e].value; i.getObjectByName("Zoom" + e).morphTargetInfluences[0] = b[e].value, i.getObjectByName("Object" + e).position.set(w.x, w.y, w.z); }).onComplete(function() { b[e].value = o; }).start(); } } function a() { requestAnimationFrame(a), s.update(), TWEEN.update(), function() { for (let e = 0; e < f.length; e++) (H = B[e].getObjectByName("Camera")).position.set(n.position.x, n.position.y, n.position.z), I.set(-c / 2 + u, -c / 2 + u, 0), v.set(c / 2.........完整代码请登录后点击上方下载按钮下载查看
网友评论0