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;
  c.........完整代码请登录后点击上方下载按钮下载查看