three实现三维逼真玻璃光线反射立体空间相册效果代码-html代码-BFW代码库

代码语言：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;
}

.info {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
}

.info > * {
  padding: 1ch;
  color: black;
}

a {
  color: black;
}
</style>

  
  

</head>

<body >
  <!-- 

  Attempt to animate Roller (in 146.) with greensock 

  Each roller has a gsap timeline animation 
  The timeline animation has 4 segments:
      
     | 0to90 | 90to180 | 180to270 | 270to360
     ^0d     ^90d      ^180d      ^270d       (labels)
  
  Each segment has 2 tracks, roll and slide;
  The first segment has a extra track for fade-in:
  
     0d      90d       180d       270d
     |roll   |roll     |roll      |roll
     |slide  |slide    |slide     |slide
     |fadein

-->

<script async type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/es-module-shims.1.5.1.js" crossorigin="anonymous"></script>

<script type="importmap">
  {
    "imports": {
      "three": "//repo.bfw.wiki/bfwrepo/js/module/three/build/146/three.module.js",
      "three/addons/": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/jsm/"
    }
  }
</script>
<base target='_top'>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.10.4.js"></script>
      <script type="module">
import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

// ----
// params
// ----

// credit: Katsiaryna Endruszkiewicz at unsplash - https://unsplash.com/@endka_1
const ALBEDO_URLS = [
  '//repo.bfw.wiki/bfwrepo/image/5fc1ae951e91a.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_600,h_900,/quality,q_90',
  '//repo.bfw.wiki/bfwrepo/image/5fc1af0ba6cc8.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_600,h_900,/quality,q_90',
  '//repo.bfw.wiki/bfwrepo/image/5fc1aecf36d5a.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_600,h_900,/quality,q_90',
  '//repo.bfw.wiki/bfwrepo/image/5fc1ae951e91a.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_600,h_900,/quality,q_90'
]

// credit: mrdoob - three.js/examples/textures/
const ENV_URL = '//repo.bfw.wiki/bfwrepo/image/636d9baf40a77.png'

// ----
// Roller
// ----

class Roller extends THREE.Group {
  #angle // angle rotated around X, in degree
  #pivot // used to lift up, and slide
  #mesh // self rotates 0..=90d; geom rotates 'mult of 90d'
  #slide_speed_fn // speed of pivot sliding wrt angle

  /** 
   * @param {THREE.Mesh} mesh
   * @param {function} slide_speed_fn
  */
  constructor(mesh, slide_speed_fn) {
    super()
    this.#mesh = mesh
    this.#mesh.matrixAutoUpdate = false
    this.#pivot = new THREE.Group()
    this.#pivot.add(this.#mesh)
    this.add(this.#pivot)

    this.#angle = 0.0
    this.#slide_speed_fn = slide_speed_fn
    this.rolled_angle = 0.0
  }

  get rolled_angle() {
    return this.#angle
  }

  set rolled_angle(new_angle) {
    const old_angle = this.#angle
    const delta_angle = new_angle - old_angle
    const delta_quarter_idx = (new_angle / 90 | 0) - (old_angle / 90 | 0)

    // alpha: geom rotation in degree; multiplier of 90d
    // beta: mesh rotation in degree
    const alpha = delta_quarter_idx * 90
    const beta = (delta_quarter_idx ? new_angle : delta_angle) % 90

    // Reset mesh transform if old_angle jumps over quarter(s)
    if (delta_quarter_idx !== 0) {
      this.#mesh.matrix.identity()
    }

    // Rotate `mesh.geometry` by {alpha} quarters
    this.#mesh.geometry.rotateX(-alpha * Math.PI / 180)

    // Re-compute bbox
    this.#mesh.geometry.computeBoundingBox()

    const bottom = this.#mesh.geometry.boundingBox.min.y
    const near_or_far = (new_angle > 0)
      ? this.#mesh.geometry.boundingBox.min.z // far
      : this.#mesh.geometry.boundingBox.max.z // near

    // Rotate the mesh around -X at center-bottom-far origin
    const tf1 = new THREE.Matrix4().makeTranslation(0, -bottom, -near_or_far)
    const tf2 = new THREE.Matrix4().makeRotationX(-beta * Math.PI / 180)
    const tf3 = new THREE.Matrix4().makeTranslation(0, bottom, near_or_far)
    this.#mesh.matrix.premultiply(tf3.multiply(tf2).multiply(tf1))

    // Lift up pivot, and slide towards +Z
    this.#pivot.........完整代码请登录后点击上方下载按钮下载查看