three实现三维立体文字变形动画效果代码
代码语言:html
所属分类:三维
代码描述:three实现三维立体文字变形动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { min-height: 100vh; background: black; display: flex; align-items: center; justify-content: center; } canvas { max-width: 100vw; max-height: 100vh; width: auto !important; height: auto !important; } </style> </head> <body > <canvas id="canvas"></canvas> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/es-module-shims.1.6.2.js"></script> <script type="importmap"> { "imports": { "three": "https://unpkg.com/three@0.147.0/build/three.module.js", "three/examples/": "https://unpkg.com/three@0.147.0/examples/", "meshline": "https://unpkg.com/meshline@3.1.6/dist/index.js", "@callumacrae/utils/": "https://unpkg.com/@callumacrae/utils@0.3.6/built/", "seed-random": "https://cdn.skypack.dev/seed-random@2.2.0", "tweakpane": "https://cdn.skypack.dev/tweakpane@3.1.1", "@tweakpane/plugin-essentials": "https://cdn.skypack.dev/@tweakpane/plugin-essentials@0.1.5", "d3-ease": "https://cdn.skypack.dev/d3-ease@3.0.1" } } </script> <script type="module"> import * as THREE from 'three'; import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; import { extendMaterial } from '@callumacrae/utils/three-extend-material'; import { easePolyInOut } from 'd3-ease'; import { toVanillaCanvas } from '@callumacrae/utils/renderers/vanilla.js'; const glsl = String.raw; const sketchConfig = {}; const sketchbookConfig = { type: 'threejs', sketchConfig, }; function initCamera(scene, { width, height }) { const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000); camera.position.z = 300; camera.position.y = 120; scene.add(camera); return camera; } function initLighting(scene) { const pos = new THREE.Vector3(100, 150, 100); const pointLight = new THREE.PointLight(0xffffff, 0.25); pointLight.position.set(pos.x, pos.y, pos.z); pointLight.castShadow = true; pointLight.shadow.camera.far = 1500; pointLight.shadow.radius = 20; pointLight.shadow.blurSamples = 16; scene.add(pointLight); // Duplicate the light so that the shadow is less intense const pointLightWithoutShadow = pointLight.clone(); pointLightWithoutShadow.intensity = 0.4; pointLightWithoutShadow.castShadow = false; scene.add(pointLightWithoutShadow); const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); scene.add(ambientLight); const easeFnZ = easePolyInOut.exponent(7); const easeFnX = easePolyInOut.exponent(3); const frame = ({ timestamp }) => { const tz = (timestamp / 1500 + 0.5) % 1; const z = (-tz + easeFnZ(tz)) * 300 + pos.z; pointLight.position.setZ(z); pointLightWithoutShadow.position.setZ(z); const tx = Math.abs(((timestamp / 1500 + 0.5) % 2) - 1); const x.........完整代码请登录后点击上方下载按钮下载查看
网友评论0