threejs实现三维图片卷起动画效果代码-html代码-BFW代码库

threejs实现三维图片卷起动画效果代码

代码语言：html

所属分类：三维

代码描述：threejs实现三维图片卷起动画效果代码

下面为部分代码预览，完整代码请点击下载或在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: white;
}
</style>


</head>

<body >
  <div id='el_hero'>

</div>

<!-- -->
  <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({ alpha: true }); // wgl 1
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, 2, .1, 100);
const controls = new OrbitControls(camera, renderer.domElement);

camera.position.set(0, 0, 1);
controls.enableDamping = true;

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

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

  const cell_sz = 8; // px 
  const n_col = img.width / cell_sz | 0;
  const n_row = img.height / cell_sz | 0;
  const n_inst = n_col * n_row;

  const img_ratio = n_col / n_row;
  const plane_height = 1;
  const plane_width = plane_height * img_ratio;
  const inst_width = plane_width / n_col;
  const inst_height = plane_height / n_row;

  const geom = new THREE.PlaneGeometry(inst_width, inst_height);
  const inst_ids = new Float32Array(n_inst).map((_, i) => i);
  geom.setAttribute('inst_id', new THREE.InstancedBufferAttribute(inst_ids, 1, false, 1));
  // 0---1
  // |   |   (plane geom pos attr layout)
  // 2---3
  const vert_ids = new Float32Array([0, 1, 2, 3]);
  geom.setAttribute('vert_id', new THREE.BufferAttribute(vert_ids, 1, false));

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