three打造三维彩色正方体上下起伏变换动画效果代码
代码语言:html
所属分类:三维
代码描述:three打造三维彩色正方体上下起伏变换动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background: #000; -ms-scroll-chaining: none; overscroll-behavior: none; } #loading { background: #000; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; 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: 100vw; height: 100vh; } #container canvas { position: fixed; top: 0; left: 0; z-index: 0; outline: none; } /** 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 > const getRandomNumber = function (min, max) { return Math.floor(Math.random() * (max - min + 1) + min); }; /** vertex shader source */ const vertexShaderSource = ` uniform float uTime; varying vec2 vUv; float PI = 3.14159265359; void main(){ vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `; /** fragment shader source */ const fragmentShaderSource = ` uniform float uTime; uniform sampler2D texture; varying vec2 vUv; varying vec3 vPosition; void main () { gl_FragColor = vec4(vUv, abs(sin(uTime)), 1.0); } `; /** * class Sketch */ class Sketch { constructor() { /** renderer */ this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); document.getElementById('container').appendChild(this.renderer.domElement); /** setup */ this.setupEvents(); 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.mouse = 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.render(); } setupCanvas() { /** renderer */ this.renderer.setSize(this.width, this.height); this.renderer.setPixelRatio(window.devicePixelRatio); this.renderer.setClearColor(0xffffff, 1.0.........完整代码请登录后点击上方下载按钮下载查看
网友评论0