three实现三维旋转的年度照片墙相册点击图片放大效果代码-html代码-BFW代码库

three实现三维旋转的年度照片墙相册点击图片放大效果代码

代码语言：html

代码描述：three实现三维旋转的年度照片墙相册点击图片放大效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

<style>
body {
	margin: 0;
	background: black;
}
</style>


  
</head>

<body translate="no">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/fancybox.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/fancybox.umd.js"></script>
      <script type="importmap">
{
 "imports":{
    "three":"//repo.bfw.wiki/bfwrepo/js/module/three/build/164/three.module.js",
    "jsm/":"//repo.bfw.wiki/bfwrepo/js/module/three/examples/164/jsm/"
 }
}
</script>
  
    <script  type="module">
import * as THREE from "three";
import { OrbitControls } from "jsm/controls/OrbitControls.js";

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000);

camera.position.z = 5;
camera.position.y = 2;
camera.position.x = 2;
camera.lookAt(0, 0, 0);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.setClearColor(0xffffff);
renderer.setClearAlpha(0);

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.enablePan = false;
controls.enableZoom = false;
controls.minPolarAngle = Math.PI / 2 - 0.3;
controls.maxPolarAngle = Math.PI / 2 + 0.3;

let years = [2025, 2024, 2023, 2022];

const yearImages = {
  2025: [
  "https://images.pexels.com/photos/34299175/pexels-photo-34299175.jpeg",
  "https://images.pexels.com/photos/34106777/pexels-photo-34106777.jpeg",
  "https://images.pexels.com/photos/8107817/pexels-photo-8107817.jpeg"],

  2024: [
  "https://images.pexels.com/photos/7689132/pexels-pho.........完整代码请登录后点击上方下载按钮下载查看