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);
  const n_inst = grid_sz.x * grid_sz.y;

  const geom = new THREE.PlaneGeometry(inst_sz.x, inst_sz.y);
  const inst_ids = new Float32Array(n_inst).map((_, i) => i); // wgl1 attr can't be bool and int 
  geom.setAttribute('inst_id', new THREE.InstancedBufferAttribute(inst_ids, 1, false, 1));
  const vert_ids = new Float32Array([0, 1, 2, 3]); // TL->TR->BL->BR
  geom.setAttribute('vert_id', new THREE.BufferAttribute(vert_ids, 1, false));

  const shader = THREE.ShaderLib.lambert;
  const mat = new THREE.ShaderMaterial({
    lights: true,
    fog: true,
    side: THREE.DoubleSide,
    defines: { USE_UV: true, USE_MAP: true },
    uniforms: THREE.UniformsUtils.merge([shader.uniforms, {
      map: { value: tex },
      time: { value: 0 },
      grid_sz: { value: grid_sz },
      plane_sz: { value: plane_sz },
      inst_sz: { value: inst_sz },
      n_inst: { value: n_inst },
    }]),
    vertexShader: `
    uniform float time;
    attribute float inst_id;
    attribute float vert_id;
    uniform vec2 grid_sz;
    uniform vec2 plane_sz;
    uniform vec2 inst_sz;
    uniform float n_i.........完整代码请登录后点击上方下载按钮下载查看