three打造梦境中扭曲的狗狗效果代码
代码语言:html
所属分类:视觉差异
代码描述:three打造梦境中扭曲的狗狗效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> canvas { display: block; width: 100%; height: 100vh; cursor: -webkit-grab; cursor: grab; } ul { display: grid; grid-auto-flow: column; position: fixed; top: 0; left: 0; padding: 1rem; color: white; } li + li::before { content: "/"; padding: 1ch; } a { color: #fffa; } body { background: black; } </style> </head> <body > <base target='_top'> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.126.js"></script> <script type="module"> import { OrbitControls } from "//cdn.skypack.dev/three@0.128.0/examples/jsm/controls/OrbitControls?min"; import { EffectComposer, Pass, FullScreenQuad } from "//cdn.skypack.dev/three@0.128.0/examples/jsm/postprocessing/EffectComposer?min"; import { RenderPass } from "//cdn.skypack.dev/three@0.128.0/examples/jsm/postprocessing/RenderPass?min"; import { LensDistortionPassGen } from "//cdn.jsdelivr.net/gh/ycw/three-lens-distortion@1.0.0/src/index.js"; import { DualBloomPassGen } from "//cdn.jsdelivr.net/gh/ycw/three-dual-bloom@1.1.6/src/index.js"; // ---- renderer const renderer = new THREE.WebGL1Renderer(); const canvas = renderer.domElement; document.body.append(canvas); // ---- camera and controls const camera = new THREE.PerspectiveCamera(50, 2, 0.1, 100); const controls = new OrbitControls(camera, canvas); camera.position.set.........完整代码请登录后点击上方下载按钮下载查看
网友评论0