three打造一个炫酷多彩三维线条折叠花朵效果代码
代码语言:html
所属分类:三维
代码描述:three打造一个炫酷多彩三维线条折叠花朵效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { height: 100%; width: 100%; } body { font-size: 62.5%; background: #000; overflow: hidden; color: #fff; font-family: sans-serif; -ms-scroll-chaining: none; overscroll-behavior: none; } #loading { background: #000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; display: flex; justify-content: center; align-items: center; visibility: visible; opacity: 1; transition: visibility 1.6s, opacity 1.6s; } #loading .circle { width: 50px; height: 50px; background: #fff; border-radius: 50%; opacity: 0; transform: scale(0, 0); -webkit-animation: circle-animation 1.6s ease-in-out 0s infinite normal none; animation: circle-animation 1.6s ease-in-out 0s infinite normal none; } #loading.loaded { visibility: hidden; opacity: 0; } #container { width: 100%; height: 100%; } /** css animation */ @-webkit-keyframes circle-animation { 0% { opacity: 0; transform: scale(0, 0); } 50% { opacity: 1; transform: scale(1, 1); } } @keyframes circle-animation { 0% { opacity: 0; transform: scale(0, 0); } 50% { opacity: 1; transform: scale(1, 1); } } </style> </head> <body > <div id="loading"> <div class="circle"></div> </div> <div id="container"></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Stats-16.js"></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/OrbitControls.126.js"></script> <script > /** vertex shader source */ const vertexShader = ` uniform float uTime; float PI = 3.14159265359; varying vec3 vPosition; void main(){ float num = position.z / 10000.0; float len = length(position) * 0.001; vec3 pos; pos.x = cos(position.x * position.y) * sin(uTime * num) * 1.0; pos.y = sin(position.x * position.y) * sin(uTime * num) * 1.0; pos.z = tan(uTime + len) * 0.1; vPosition = pos; vec4 mvPosition = modelViewMatrix * vec4(pos, 1.0); gl_PointSize = 6.0 * (12.0 / - mvPosition.z); gl_Position = projectionMatrix * mvPosition; } `; /** fragment shader source */ const fragmentShader = ` varying vec3 vPosition; uniform float uTime; /** * change colors * Referred to * https://iquilezles.org/www/articles/palettes/palettes.htm * Thank you so much. */ vec3 palette( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d ) { return a + b*cos( 6.28318*(c*t+d) ); } void main () { /** * Square to Circle. * Referred to * https://qiita.com/uma6661/items/20accc9b5fb9845fc73a * Thank you so much. */ float f = length(gl_PointCoord - vec2(0.5, 0.5)); if ( f > 0.1 ) discard; vec3 color = palette( length(vPosition) - uTime * 0.5, vec3(0.5,0.5,0.5), vec3(0.5,0.5,0.5), vec3(1.0,1.0,0.5), vec3(0.8,0.90,0.30) ); gl_FragColor = vec4(color, 1.0); } `; /** * class Sketch */ class Sketch { constructor() { /** renderer */ this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); document.getElementById('container').appendChild(this.renderer.domElement); this.statsInit(); this.init(); } statsInit() { this.stats = new Stats(); this.stats.setMode(0); this.stats.domElement.style.position = 'absolute'; this.stats.domElement.style.left = '0'; this.stats.domElement.style.top = '0'; document.getElementById('container').appendChild(this.stats.domElement); } init() { /** time */ this.time = new THREE.Clock(true); /** mouse */ this.amp = 10.0; this.mouse = new THREE.Vector2(); this.touchStart = new THREE.Vector2(); this.touchMove = new THREE.Vector2(); this.touchEnd = new THREE.Vector2(); /** canvas size */ this.width = window.innerWidth; this.height = window.innerHeight; /** scene */ this.scene = new THREE.Scene(); /** setup and render */ this.setupCanvas(); this.setupCamera(); //this.setupLight(); this.setupShape(); this.setupEvents(); this.render(); } setupCanvas() { /** renderer */ this.renderer.setSize(this.width, this.height); this.renderer.setPixelRatio(window.devicePixelRatio); this.renderer.setClearColor(0x000000, 1.0); /** style */ this.renderer.domElement.style.position = 'fixed'; this.renderer.domElement.style.top = '0'; this.renderer.domElement.style.left = '0'; this.renderer.domElement.style.z.........完整代码请登录后点击上方下载按钮下载查看
网友评论0