image.png
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>21three.js粒子系统</title>
<script src="lastjs/three.js"></script>
<script src="js/TrackballControls.js"></script>
<script src="js/stats.js"></script>
<script src="js/dat.gui.js"></script>
<style>
body{margin: 0;overflow: hidden;position: relative}
</style>
</head>
<body>
<div style="position: absolute">粒子系统</div>
<div id="webgl-output"></div>
<script type="text/javascript">
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,2000);
camera.position.set(0,0,150);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor('#a5efa5');
renderer.setSize(window.innerWidth,window.innerHeight);
var axes = new THREE.AxisHelper(10);
scene.add(axes);
var amblight = new THREE.AmbientLight(0x666666);
scene.add(amblight);
var spotllight = new THREE.SpotLight(0xCCCCCC);
spotllight.position.set(0,50,0);
scene.add(spotllight);
document.getElementById('webgl-output').appendChild(renderer.domElement);
createSprites();
function createSprites() {
var material = new THREE.SpriteMaterial();
for (var x = -5; x < 5; x++) {
for (var y = -5; y < 5; y++) {
var sprite = new THREE.Sprite(material);
sprite.position.set(x * 10, y * 10, 0);
scene.add(sprite);
}
}
}
createParticles();
function createParticles() {
var geom = new THREE.Geometry();
var material = new THREE.PointCloudMaterial({
size:4,
vertexColors:true,color:0xffffff
});
for (var x = -5; x < 5; x++) {
for (var y = -5; y < 5; y++) {
var sprite = new THREE.Vector3(x * 10, y * 10, 10);
geom.vertices.push(sprite);
geom.colors.push(new THREE.Color(Math.random()*0xffffff));
}
}
var cloud = new THREE.PointCloud(geom,material);
scene.add(cloud);
}
renderer.render(scene,camera);
var trackballControls = new THREE.TrackballControls(camera);
var clock = new THREE.Clock();
function run() {
var delta = clock.getDelta();
trackballControls.update(delta);
requestAnimationFrame(run);
renderer.render(scene,camera);
}
run();
window.addEventListener('resize',onResize,false);
function onResize() {
camera.aspect = window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth,window.innerHeight);
}
</script>
</body>
</html>
