Edited at

three.jsでパーティクル

More than 3 years have passed since last update.

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


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>