threejs实现三维泡泡聚集形成烟雾动画效果代码-html代码-BFW代码库

threejs实现三维泡泡聚集形成烟雾动画效果代码

代码语言：html

所属分类：三维

代码描述：threejs实现三维泡泡聚集形成烟雾动画效果代码

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

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

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

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
    <style>
        body {
          color: white;
          margin: 0;
          text-align: center;
          background-color: black;
          cursor: crosshair;
        }
        canvas {
          display: block;
          width: 100%;
          height: 100%;
        }
        p {
          color: rgba(255,255,255, 0.5)
        }
        .header {
          top: 45%;
        }
        .footer {
          bottom:3%;
        }
        .description {
          color: gray;
          padding-top: 50px;
        }
        a, a:hover, a:visited {
          color: white;
          text-decoration: none;
        } 
        .disable-selection {
             -moz-user-select: none; /* Firefox */
              -ms-user-select: none; /* Internet Explorer */
           -khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
          -webkit-user-select: none; /* Chrome, Safari, and Opera */
          -webkit-touch-callout: none; /* Disable Android and iOS callouts*/
        }
        h1::after {
          content: ' Three JS';
          font-size: 12px;
          position:absolute;
          top: 3px;
          padding-left: 5px;
          font-weight: 400;
        }
        h2::after {
          content: '2';
          font-size: 12px;
          position:absolute;
          top: 14px;
          padding-left: 5px;
        }
    </style>
</head>

<body>
    <div class="container-fluid fixed-top header disable-selection">
        <div class="row">
            <div class="col"></div>
            <div class="col-md-6">
                <div class="row">
                    <div class="col">
                        <h1><strong>Smoke</strong></h1>
                        <p>– Experiment –</p>
                    </div>
                </div>
            </div>
            <div class="col"></div>
        </div>
    </div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap.4.3.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TextureLoader.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.88.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/SpriteMaterial.js"></script>
    <script>
        // Three JS Template
        window.addEventListener('load', init, false);
        function init() {
          createWorld();
          createLights();
          //createGrid();
          createPrimitive();
          //---
          createParticleWord();
          animation();
        }
        //--------------------------------------------------------------------
        var scene, camera, renderer, container;
        var world = new THREE.Object3D();
        var _width, _height;
        function createWorld() {
          _width = window.innerWidth;
          _height= window.innerHeight;
          //---
          scene = new THREE.Scene();
          scene.fog = new THREE.Fog(0x000000, 4, 12);
          //scene.background = new THREE.Color(0xF00000);
          //---
          camera = new THREE.PerspectiveCamera(35, _width/_height, 1, 1000);
          camera.position.set(0,0,8);
          //---
          renderer = new THREE.WebGLRenderer({antialias:true, alpha:false});
          renderer.setSize(_width, _height);
          renderer.shadowMap.enabled = true;
          //---
          document.body.appendChild(renderer.domElement);
          //---
          window.addEventListener('resize', onWindowResize, false);
        }
        function onWindowResize() {
          _width = window.innerWidth;
          _height = window.innerHeight;
          renderer.setSize(_width, _height);
          camera.aspect = _width / _height;
          camera.updateProjectionMatrix();
          console.log('- resize -');
        }
        //--------------------------------------------------------------------
        var _ambientLights, _lights;
        function createLights() {
          //_ambientLights = new THREE.AmbientLight(0xFFFFFF, 1);
          _ambientLights = new THREE.HemisphereLight(0x111111, 0x000000, 5);
          _lights = new THREE.PointLight(0xF00555, 0.5);
     .........完整代码请登录后点击上方下载按钮下载查看