threejs实现下雨立方体效果代码-html代码-BFW代码库

threejs实现下雨立方体效果代码

代码语言：html

所属分类：三维

代码描述：threejs实现下雨立方体效果代码，拖动鼠标可切换视角。

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

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

<head>

    <meta charset="UTF-8">





    <style>
        canvas {
          display: block;
        }
        html {
          overflow: hidden;
          background: #000;
        }
    </style>



</head>

<body translate="no">
    <script>
        console.clear();
    </script>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.126.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.126.js"></script>
    <script>
        const backgroundColor = 0x152238;
        
        const getRandomParticlePos = particleCount => {
          let arr = new Float32Array(particleCount * 3);
          for (let i = 0; i < particleCount; i++) {
            arr[i] = Math.random() * (100 - -50) + -50;
          }
          return arr;
        };
        
        var scene = new THREE.Scene();
        
        var camera = new THREE.PerspectiveCamera(
        80,
        window.innerWidth / window.innerHeight,
        0.1,
        1000);
        
        camera.position.set(5, 5, 100);
        
        var renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(backgroundColor); //0x );
        
        renderer.toneMapping = THREE.LinearToneMapping;
        renderer.toneMappingExposure = Math.pow(0.94, 5.0);
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.PCFShadowMap;
        
        window.addEventListener(
        "resize",
        function () {
          camera.aspect = window.innerWidth / window.innerHeight;
          camera.updateProjectionMatrix();
          renderer.setSize(wind.........完整代码请登录后点击上方下载按钮下载查看