three实现三维空间照片方块碎片化动画效果代码-html代码-BFW代码库

three实现三维空间照片方块碎片化动画效果代码

代码语言：html

所属分类：三维

代码描述：three实现三维空间照片方块碎片化动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">


  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');

canvas {
  display: block;
  width: 100%;
  height: 100vh;
  background: black;
  font-family: lora, serif;
  cursor: -webkit-grab;
  cursor: grab;
}

#el_hero {
  color: white;
  position: fixed; top: 0; left: 0;;
  font: 1em lora, serif;
  mix-blend-mode: difference;
}

a {
  color: #777;
}
</style>




</head>

<body >



<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/es-module-shims.js"></script>
<script type='importmap-shim'>
  {
    "imports": {
      "three": "https://unpkg.com/three@0.139.0/build/three.module.js",
      "three/": "https://unpkg.com/three@0.139.0/"
    }
  }
</script>

<!-- -->

<script defer type='module-shim'>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

// ----
// main
// ----

const renderer = new THREE.WebGL1Renderer(); // wgl 1
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, 2, .1, 100);
const controls = new OrbitControls(camera, renderer.domElement);

camera.position.set(1, 0, 1);
controls.enableDamping = true;
scene.fog = new THREE.Fog('black', 1, 2);

const light = new THREE.DirectionalLight('tan', 2);
light.position.set(0, 1, 1);
scene.add(light);
scene.add(new THREE.AmbientLight());

const { mat } = await (async function () {
  // photo by Vladislav Nahorny - https://unsplash.com/photos/gn23A8X3IDI
  const img_url = '//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png';
  const tex = await new THREE.TextureLoader().loadAsync(img_url);
  const img = tex.image;
  const img_ratio = img.width / img.height;

  const n_cell_y = 16;
  const grid_sz = new THREE.Vector2(Math.round(n_cell_y * img_ratio), n_cell_y);
  const grid_ratio = grid_sz.width / grid_sz.height;
  const plane_sz = new THREE.Vector2(grid_ratio, 1);
  const inst_sz = plane_sz.clone().divide(grid_sz);
  co.........完整代码请登录后点击上方下载按钮下载查看