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

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

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