three实现三维魔法房间效果代码
代码语言:html
所属分类:三维
代码描述:three实现三维魔法房间效果代码,一口缸中一个十字架,还有周围布满蜡烛,还有一个散发魔法光芒的镜子。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *::after, *::before { margin: 0; padding: 0; box-sizing: border-box; outline: none; } body { overflow: hidden; background-color: #171e23; background-color: #1d1c28; cursor: grab; } .webgl { position: fixed; top: 0; left: 0; } </style> </head> <body > <canvas class="webgl"></canvas> <script type="x-shader/x-vertex" id="vertexshaderCandle"> void main() { gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } </script> <script type="x-shader/x-fragment" id="fragmentshaderCandle"> uniform float time; uniform float colorSpeed; uniform float delay; uniform vec3 baseColor; varying vec2 vUv; void main() { float animatedTime = time - delay; animatedTime = mod(animatedTime, colorSpeed); float mixFactor = animatedTime / colorSpeed; vec3 finalColor = mix(baseColor, vec3(1.,0.533,0.431), mixFactor); gl_FragColor = vec4(finalColor, 1.0); } </script> <!-- ========================== --> <script type="x-shader/x-vertex" id="vertexshaderBubble"> varying vec2 vUv; uniform float time; void main() { vUv = uv; vec3 newPosition = position; newPosition.x += sin(time * 2.0) * 0.035; newPosition.y += cos(time * 2.0) * 0.035; gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0); } </script> <script type="x-shader/x-fragment" id="fragmentshaderBubble"> varying vec2 vUv; void main() { gl_FragColor = vec4(0.765,0.965,0.733, 1.0); } </script> <!-- ========================== --> <script type="x-shader/x-vertex" id="vertexshaderDoor"> uniform float time; varying vec2 vUv; void main() { vUv = uv; vec2 center = vec2(0.0, 0.0); float distance = length(uv - center); vec3 newPosition = position + vec3(0.0, 0.0, 0.0); gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0); } </script> <script type="x-shader/x-fragment" id="fragmentshaderDoor"> uniform float time; varying vec2 vUv; void main() { vec3 waveColor = vec3(0.29,0.851,0.247); vec2 center = vec2(0.5, 0.5); float distance = length(vUv - center); float waveIntensity = abs(sin(distance * 100.0 + time)); vec3 finalColor = mix(vec3(0.765,0.965,0.733), waveColor, waveIntensity); gl_FragColor = vec4(finalColor, 1.0); } </script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.126.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/EffectComposer.126.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/RenderPass.126.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ShaderPass.126.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/CopyShader.126.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/LuminosityHighPassShader.126.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/UnrealBloomPass.126.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/GLTFLoader.128.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.126.js"></script> <script > const canvas = document.querySelector('.webgl'); const scene = new THREE.Scene(); const textureLoader = new THREE.TextureLoader(); let composer; const sizes = { width: window.innerWidth, height: window.innerHeight }; const params .........完整代码请登录后点击上方下载按钮下载查看
网友评论0