three实现canvas三维空间粒子上升动画效果代码-html代码-BFW代码库

three实现canvas三维空间粒子上升动画效果代码

代码语言：html

所属分类：粒子

代码描述：three实现canvas三维空间粒子上升动画效果代码

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

<html>

<head>
    <style>
        body {
          padding: 0;
          margin: 0;
          overflow: hidden;
        }
    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.72.js"></script>
</head>

<body>
    <div id="canvas"></div>
    <script>
        var camera, scene, renderer, particles, particle, material, particleCount, points, texture;
        var xSpeed, ySpeed;
        xSpeed = 0.0005;
        ySpeed = 0.001;
        var winWidth, winHeight;
        winWidth = window.innerWidth;
        winHeight = window.innerHeight;
        
        init();
        animate();
        
        function init(){
          scene = new THREE.Scene();
          scene.fog = new THREE.FogExp2('#222', 0.001);
        
          camera = new THREE.PerspectiveCamera(75, winWidth/winHeight, 1, 1000);
          camera.position.z = 500;
        
          // particle
          // transparentとblendingたぶん?いてない
          material = new THREE.PointsMaterial({
            color: 0xffffff,
            size: 3,
            transparent: true,
            blending: THREE.AdditiveBlending
          });
        
          particleCount = 15000;
          particles = new THREE.Geometry();
        
          for (var i = 0; i < particleCount; i++) {
            var px = Math.random() * 2000 - 1000;
            var py = Math.random() * 2000 - 1000;
         .........完整代码请登录后点击上方下载按钮下载查看