three实现三维可调参数的极坐标动画效果代码
代码语言:html
所属分类:三维
代码描述:three实现三维可调参数的极坐标动画效果代码,可通过dat.gui来调节参数实现不同的效果。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Fauna+One|Playfair+Display&display=swap"); body { margin: 0; cursor: cell; color: #FFE225; background-color: #002931; font-family: "Playfair Display", serif; } p { color: #AEAEBD; font-family: "Fauna One", serif; } hr { width: 70%; border-color: #AEAEBD; } canvas { top: 0; z-index: -1; width: 100%; height: 100%; display: block; position: fixed; } .header { top: 50%; left: 50%; display: none; position: absolute; transform: translate(-50%, -50%); transition: opacity 0.5s; } .header:hover { opacity: 0; } .footer { right: 1rem; bottom: 2rem; position: absolute; } .footer img { width: 2.5rem; transition: opacity 0.5s; } .footer img:hover { opacity: 0.5; } </style> </head> <body > <div class="container"> <div class="row header"> <div class="col p-4 text-center"> <h1>Spherical Coords</h1> <p>ThreeJS Code inspiration</p> <hr/> </div> </div> <div class="row footer"> <div class="col"> <!--a(href='#', target='_blank') #--> </div> </div> </div> <canvas id="canvas"></canvas> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.110.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.108.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script> <script> //-- function main() { const canvas = document.querySelector('#canvas'); const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true }); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(18); const s_group = new THREE.Group(); //-- const controls = new THREE.OrbitControls(camera, canvas); controls.target.set(0, 0, 0); controls.rotateSpeed = 0.8; controls.enableZoom = false; controls.enableDamping = true; controls.dampingFactor = .05; controls.update(); camera.position.set(0, 5, -9.5); renderer.gammaOutput = true; renderer.gammaInput = true; //renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.toneMapping = THREE.Uncharted2ToneMapping; //-- const amount = 320; //-- scene.add(s_group); scene.fog = new THREE.Fog(0x00131B, 10, 12); //-- const a_light = new THREE.HemisphereLight(0xFFFFFF, 0x28222F, 1); scene.add(a_light); const l_light = new THREE.PointLight(0x444758, 20, 10); //l_light.castShadow = true; scene.add(l_light); const p_light = new THREE.PointLight(0xFFFFFF, 0.5, 10); //p_light.castShadow = true; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0