three实现三维花纹有色玻璃透光光影动画效果代码
代码语言:html
所属分类:三维
代码描述:three实现三维花纹有色玻璃透光光影动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; } canvas { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; margin: 0; padding: 0; } </style> </head> <body> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/es-module-shims.1.6.2.js"></script> <script type="importmap"> { "imports": { "three": "//repo.bfw.wiki/bfwrepo/js/module/three/build/150/three.module.js", "three/addons/": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/151/jsm/" } } </script> <script type="module"> function e() { r.aspect = window.innerWidth / window.innerHeight, r.updateProjectionMatrix(), a.setSize(window.innerWidth, window.innerHeight); } function t() { const e = -performance.now() / 1e3 * Math.PI / 20; let t = e - c.rotation.z; n(c, m, e, t), n(w, g, -e, -t), n(h, R, -e, -t), s.update(), a.render(o, r); } function n(e, t, n, i) { var a, o; e.rotation.z = n; const r = t.shadow.camera; a = new THREE.Vector3(0, 0, 1), o = i, F.setFromAxisAngle(a, o), r.up.applyQuaternion(F); } import * as THREE from "three"; import { OrbitControls as i } from "three/addons/controls/OrbitControls.js"; let a,o,r,s,d,E,p,l,c,w,h,m,g,R,H,T,u,M,S,f,L,P,x = 20; (d = new THREE.CubeTextureLoader()).setCrossOrigin(""), d.setPath("https://threejs.org/examples/textures/cube/pisa/"), d.load(["px.png", "nx.png", "py.png", "ny.png", "pz.png", "nz.png"], function (n) { S = n, (d = new THREE.TextureLoader()).setCrossOrigin(""), d.setPath("https://happy358.github.io/Images/textures/stainedglass/"), d.load("seamless3.jpg", function (n) { n.minFilter = THREE.LinearFilter, n.magFilter = THREE.LinearFilter, n.encoding = THREE.sRGBEncoding, n.center.set(.5, .5), f = n, d.load("seamless1.jpg", function (n) { n.minFilter = THREE.LinearFilter, n.magFilter = THREE.LinearFilter, n.encoding = THREE.sRGBEncoding, n.center.set(.5, .5), L = n, d.load("seamless4.jpg", function (n) { n.minFilter = THREE.LinearFilter, n.magFilter = THREE.LinearFilter, n.encoding = THREE.sRGBEncoding, n.center.set(.5, .5), P = n, function () { (a = new THREE.WebGLRenderer({ antialias: !0 })). setPixelRatio(window.devicePixelRatio), a.setSize(window.innerWidth, window.innerHeight), document.body.appendChild(a.domElement), a.shadowMap.enabled = !0, a.shadowMap.type = THREE.PCFSoftShadowMap, a.outputEncoding = THREE.sRGBEncoding, a.........完整代码请登录后点击上方下载按钮下载查看
网友评论0