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