three实现图片相册弯曲折叠散开效果代码-html代码-BFW代码库

three实现图片相册弯曲折叠散开效果代码

代码语言：html

代码描述：three实现图片相册弯曲折叠散开效果代码

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

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">

  <style>
    *{box-sizing:border-box}
    html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#E7E7E7}
    canvas{display:block;width:100%;height:100%}
  </style>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script>
    const EMBEDDED=new URLSearchParams(location.search).has('embedded');
    if(EMBEDDED){
      document.documentElement.style.background='transparent';
      document.body.style.background='transparent';
    }

    const scene=new THREE.Scene();
    scene.background=EMBEDDED?null:new THREE.Color(0xe7e7e7);
    scene.fog=new THREE.FogExp2(0xe7e7e7,.022);

    const VIEW_H=9.2;
    const viewAspect=innerWidth/innerHeight;
    const camera=new THREE.OrthographicCamera(
      -VIEW_H*viewAspect/2,VIEW_H*viewAspect/2,
      VIEW_H/2,-VIEW_H/2,.1,100
    );
    camera.position.set(0,-.8,20);
    camera.lookAt(0,-.8,0);

    const renderer=new THREE.WebGLRenderer({antialias:true,alpha:EMBEDDED});
    renderer.setClearColor(0xe7e7e7,EMBEDDED?0:1);
    renderer.setPixelRatio(Math.min(devicePixelRatio,2));
    renderer.setSize(innerWidth,innerHeight);
    renderer.outputEncoding=THREE..........完整代码请登录后点击上方下载按钮下载查看