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

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

代码语言：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.#p.........完整代码请登录后点击上方下载按钮下载查看