LoginSignup
10
7

More than 5 years have passed since last update.

three.jsでパーティクル

Last updated at Posted at 2016-06-28

ごにょごにょと、three.js学ぶ日々

スクリーンショット 2016-06-28 15.24.41.png

hogehoge.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>three.js</title>
</head>
<body>
 <div id="stage"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r77/three.js"></script>
  <script>
  (function() {
    'use strict';

    var scene;
    var camera;
    var renderer;
    var width = 1000;
    var height = 1000;
    var controls;

    var particles;
    var loader;

    // scene ステージ
    scene = new THREE.Scene();

    // camera
    camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
    camera.position.set(100, 100, 100);
    camera.lookAt(scene.position);

    // renderer
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(width, height);
    renderer.setClearColor(0x000000);
    renderer.setPixelRatio(window.devicePixelRatio);
    document.getElementById('stage').appendChild(renderer.domElement);

    // particles
    // mesh: Points
    // geometry: 図形の頂点
    // material: PointsMaterial
    loader = new THREE.TextureLoader();
    loader.load('particle.png', function(texture) {
      createParticles(texture);
      render();
    });

    function createParticles(texture) {
      var pGeometry;
      var pMaterial;
      var count = 2000;
      var i;

      // pGeometry
      pGeometry = new THREE.Geometry();
      for (i = 0; i < count; i++) {
        pGeometry.vertices.push(
          new THREE.Vector3(

            Math.random() * 200 - 100, // -100~100の乱数
            Math.random() * 200 - 100,
            Math.random() * 200 - 100
          )
        );
      }

      // pMaterial
      pMaterial = new THREE.PointsMaterial({
        map: texture,
        size: 3, // サイズ
        blending: THREE.AdditiveBlending, // ブレンドモード(加算)
        transparent: true, // 透過true
        depthTest: false // 物体が重なった時に後ろにあるものを描画するかしないか
      });

      particles = new THREE.Points(pGeometry, pMaterial);
      scene.add(particles);
    }

    function render() {
      requestAnimationFrame(render);
      particles.rotation.y += 0.002;
      renderer.render(scene, camera);
    }

  })();
  </script>
</html>
10
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
7