three打造冰块文字流动旋转动画效果代码
代码语言:html
所属分类:三维
代码描述:three打造冰块文字流动旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> canvas { display:block; width:100%; height:100vh; position:fixed; left:0; top:0; } a { position:fixed; left:0; top:0; z-index:1; padding:5vmin; color:currentcolor; } </style> </head> <body translate="no" > <script type="module"> import * as $ from '//unpkg.com/three@0.121.1/build/three.module.js' import { OrbitControls } from '//unpkg.com/three@0.121.1/examples/jsm/controls/OrbitControls.js' import Outliner from 'https://cdn.jsdelivr.net/gh/ycw/three-font-outliner@1.0.4/dist/lib.esm.js' // ---- // Boot // ---- const renderer = new $.WebGLRenderer({ antialias: true }); const scene = new $.Scene(); const camera = new $.PerspectiveCamera(75, 2, 1, 1000); const controls = new OrbitControls(camera, renderer.domElement); window.addEventListener('resize', () => { const { clientWidth, clientHeight } = renderer.domElement; renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(clientWidth, clientHeight, false); camera.aspect = clientWidth / clientHeight; camera.updateProjectionMatrix(); }); document.body.prepend(renderer.domElement); window.dispatchEvent(new Event('resize')); renderer.setAnimationLoop(() => { renderer.render(scene, camera); controls.update(); animate(); }); // ---- // Main // ---- const nLayer = 3, nInst = 100; // per layer const sphereRadius = 1, distribution = 10, sY = 0, tY = -8; controls.autoRotate = true; camera.position.set(20, 0, 30); scene.background = new $.Color("white"); const light = new $.DirectionalLight("white", 1); scene.add(light); scene.add(new $.DirectionalLight("white", 2)); scene.add(new $.HemisphereLight("white", "lightblue", 1)); const geom = new $.SphereBufferGeometry(sphereRadius, 4, 3); const mat = new $.MeshLambertMaterial({ transparent: true, opacity: 0.1, side: $.DoubleSide }); const layers = []; for (let i.........完整代码请登录后点击上方下载按钮下载查看
网友评论0