three实现三维相册光照光晕效果代码-html代码-BFW代码库

代码语言：html

代码描述：three实现三维相册光照光晕效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        canvas {display:block}
    img {display:none}
    body{overflow:hidden}
    </style>

</head>

<body>
    <!-- partial:index.partial.html -->
    <img id="elImg" src="//repo.bfw.wiki/bfwrepo/image/6257e9f53b418.png"
        alt="" />
    <!-- partial -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.92.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script>
    <script>
        // Threejs stuff
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.01, 100);
    const renderer = new THREE.WebGLRenderer();
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFShadowMap; 
    //                    GPU %
    // BasicShadowMap     1x
    // PCFShadowMap       2x    (default)
    // PCFSoftShadowMap   4x
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild( renderer.domElement );
    
    
    // Controls stuff
    const controls = new THREE.OrbitControls( camera );
    controls.maxAzimuthAngle = Math.PI/3;//hor
    controls.minAzimuthAngle = -Math.PI/3;
    controls.maxPolarAngle = Math.PI/180 * 160;//vert
    controls.minPolarAngle = Math.PI/180 * 20;
    controls.update();
    
    
    // Lights animation stuff
    const lights = [];
    const lightMoDirs = [1, 1, -1];
    const lightMoSpeeds = [0.03, 0.05, 0.04];
    
    (function tick() {
    	requestAnimationFrame(tick);
    	renderer.render(scene, camera);
      for (const [i, light] of lights.entries()) {
        const lightOldX = light.position.x;
        const lightNewX = light.position.x + lightMoDirs[i] * lightMoSpeeds[i];
        if (lightNewX > 4 || lightNewX < -4) {
          lightMoDirs[i] *= -1;
        }
        light.position.x = lightNewX;
      }
    }());
    
    
    // Events
    addEventListener("resize", () => {
      renderer.setSize(window.innerWidth, window.innerHeight);
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
    })
    
    
    // Main Flow
    preload().then(main);
    
    
    
    function preload() {
      return new Promise((res, rej) => {
        const imgsrc = elImg.src;
        new THREE.TextureLoader().load(imgsrc, res, undefined, rej);
      });
    }
    
    
    
    function main(texture) {
      texture.minFilter = THREE.LinearMipMapLinearFilter;
      
      addWall();
      addLights(addFrame(texture));
      
      camera.position.set(-0.3, -0.5, 0.8);
      controls.update();
    }
    
    
    
    function addWall() {
      const s = 100;
      const color = 0xaa6666;
      
      { // wall
        const geometry = new THREE.PlaneGeometry(s, s, 1, 1);
        const material = new THREE.MeshPhongMaterial({color:color});
        const object = new THREE.Mesh( geometry, material );
        object.castShadow = true;
        object.receiveShadow = true;
        scene.add(object);
      }
      
      { // cube "wrapping" the scene, i.e a room
        const geometry = new THREE.BoxGeometry(s, s, s);
        const material = new THREE.MeshPhongMaterial({color:color});
        material.side = THREE.DoubleSide;
        const object = new THREE.Mesh( geometry, material );
        object.castShadow = false;
        object.receiveShadow = true;
        scene.add(object);
      }
    };
    
    
    
    function addFrame(texture) {
      const frameDepth = 0.01;//z
      const borderWidth = 0.05;//along x (/y)
      const borderDepth = frameDepth * 4;//thicker s.t. it casts shadow on board
      const borderColor = 0x222222;//if fullblack, absorb all light(no way)
      const frameBg = 0xffffff;//bg colo of picture(imagine if its translucent)
      const pictureScale = 0.8;//control amount of frame board to be seen
      const frameBBox = {};//frame bbox, return object
    
      // frame max dim = 1 in webgl space
      let frameWidth, frameHeight;
      if (texture.image.width > texture.image.height) {
        frameWidth = 1;
        frameHeight = texture.image.height / texture.image.width;
      }
      else {
        frameHeight = 1;
        frameWidth = texture.image.width / texture.image.height;
      }
      
      { // picture plane
        const geometry = new THREE.PlaneGeometry(frameWidth*pictureScale, frameHeight*pictureScale, 1, 1);
        const material = new THREE.MeshPhongMaterial({map:texture});
 .........完整代码请登录后点击上方下载按钮下载查看