使用Threejs绘制粒子，为什么最终只有一个点出现

发布于 2022-01-06 19:19:28 字数 2942 浏览 867 评论 2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

*{ margin:0; padding:0;}

</style>

<script src="build/three.js"></script>

<script src="build/dat.gui.min.js"></script>

<script src="build/stats.min.js"></script>

</head>

function init()

{

var stats = initStats();

//场景

var scene = new THREE.Scene();

//相机

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);

//渲染器

var renderer = new THREE.WebGLRenderer();

renderer.setClearColor(new THREE.Color(0x000000, 1.0));

renderer.setSize(window.innerWidth, window.innerHeight);

document.getElementById('WebGL-output').appendChild(renderer.domElement);

camera.position.x = 20;

camera.position.y = 0;

camera.position.z = 150;

//准备工作做完，开始创建粒子系统

//初始化粒子系统

var cloud;

Addpart(50)

function Addpart(range)

{

//利用for循环，在场景中添加多个点

for(var i=0; i<=10000; i++ )

{

//位每个粒子创建一个顶点用Vector3来表示

var particle = new THREE.Vector3(Math.random() * range - range / 2, Math.random() * range - range / 2, Math.random() * range - range / 2);

//将每个顶点添加到几何体上

var geom = new THREE.Geometry()

geom.vertices.push(particle);

var material = new THREE.PointsMaterial()

//定义粒子的颜色

var color = new THREE.Color(0x00ff00);

color.setHSL(color.getHSL().h, color.getHSL().s, Math.random() * color.getHSL().l);

geom.colors.push(color);

};

cloud = new THREE.Points(geom, material)

scene.add(cloud);

}

function render()

{

stats.update();

cloud.rotation.x +=0.05;

cloud.rotation.y +=0.05;

requestAnimationFrame(render);

renderer.render(scene, camera);

};

render()

function initStats()

{

var stats = new Stats();

stats.setMode(0);

stats.domElement.style.position = 'absolute';

stats.domElement.style.left = '0px';

stats.domElement.style.top = '0px';

document.getElementById("Stats-output").appendChild(stats.domElement);