es-module-shims+three实现三维和纸胶带流动动画效果代码
代码语言:html
所属分类:动画
代码描述:es-module-shims+three实现三维和纸胶带流动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type='importmap-shim'> { "imports": { "three": "https://cdn.skypack.dev/three@0.133", "three/": "https://cdn.skypack.dev/three@0.133/", "three-strip": "https://cdn.jsdelivr.net/gh/ycw/three-strip@0.2.5/build/three-strip.js" }} </script> <style> canvas { width: 100%; height: 100vh; display: block; cursor: -webkit-grab; cursor: grab; } h1 { position: fixed; top: 0; left: 0; padding: 2rem; color: #eee; display: grid; grid-auto-flow: column; gap: 2ch; } h1 a { color: inherit; } </style> </head> <body> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/es-module-shims.js"></script> <script> Promise.all([ importShim("three"), importShim("three/examples/jsm/controls/OrbitControls"), importShim("three-strip")]). then(([THREE, { OrbitControls }, { Strip, StripGeometry, UvPreset }]) => { // photo by // - Pawel Czerwinski (https://unsplash.com/photos/aelD0Zrmsy0) // - Kenrick Mills (https://unsplash.com/photos/Q_AqgwKWD6k) const url0 = "//repo.bfw.wiki/bfwrepo/image/615ce12aa4593.png"; const url1 = "//repo.bfw.wiki/bfwrepo/image/615ce13fab77f.png"; // ---- // main // ---- const renderer = new THREE.WebGLRenderer(); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, 2, 0.1, 100); const controls = new OrbitControls(camera, renderer.domElement); scene.background = new THREE.Color("deepskyblue"); camera.position.set(2, 0, 8); controls.enableDamping = true; controls.maxPolarAngle = Math.PI / 2.2; renderer.shadowMap.enabled = true; const light = new THREE.DirectionalLight(); light.castShadow = true; light.position.set(0, 4, 4); scene.add(light); const k = 1; const curve = new THREE.CatmullRomCurve3([ new THREE.Vector3(-k * 4, 4, -0.1), .........完整代码请登录后点击上方下载按钮下载查看
网友评论0