Javascript onLoad函数到onClick only

此代码在我的页面上导致粒子爆炸

我将onClick函数附加到HTML中的一个按钮上，这样当我单击某个按钮时它就会运行。但是，当我加载HTML时，它会自动运行此函数，之后只有当我单击按钮时才会运行此函数

我需要的是，当您运行HTML时，它不会运行。该功能只能在单击按钮时运行

我还想问一下如何更改te画布的大小。因为这个函数会自动创建一个画布，在画布中加载函数，但是这个画布比div大，大小与我希望它运行的大小相同

//////////////settings/////////

var movementSpeed = 30;
var totalObjects = 500;
var objectSize = 70;
var sizeRandomness = 0;
var color = 0x00BEE0;


/////////////////////////////////
var dirs = [];
var parts = [];
//var container = document.createElement('div');
//document.body.appendChild( container );
var container = document.getElementById('header');
//document.body.appendChild( header );

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000)
camera.position.z = 1000;

var scene = new THREE.Scene();

function ExplodeAnimation(x, y) {
  var geometry = new THREE.Geometry();

  for (i = 0; i < totalObjects; i++) {
    var vertex = new THREE.Vector3();
    vertex.x = x;
    vertex.y = y;
    vertex.z = 0;

    geometry.vertices.push(vertex);
    dirs.push({
      x: (Math.random() * movementSpeed) - (movementSpeed / 2),
      y: (Math.random() * movementSpeed) - (movementSpeed / 2),
      z: (Math.random() * movementSpeed) - (movementSpeed / 2)
    });
  }
  var material = new THREE.ParticleBasicMaterial({
    size: objectSize,
    color: color
  });
  var particles = new THREE.ParticleSystem(geometry, material);

  this.object = particles;
  this.status = true;

  this.xDir = (Math.random() * movementSpeed) - (movementSpeed / 2);
  this.yDir = (Math.random() * movementSpeed) - (movementSpeed / 2);
  this.zDir = (Math.random() * movementSpeed) - (movementSpeed / 2);

  scene.add(this.object);

  this.update = function() {
    if (this.status == true) {
      var pCount = totalObjects;
      while (pCount--) {
        var particle = this.object.geometry.vertices[pCount]
        particle.y += dirs[pCount].y;
        particle.x += dirs[pCount].x;
        particle.z += dirs[pCount].z;
      }
      this.object.geometry.verticesNeedUpdate = true;
    }
  }

}

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);

renderer.render(scene, camera);
parts.push(new ExplodeAnimation(0, 0));
render();

function render() {
  requestAnimationFrame(render);

  var pCount = parts.length;
  while (pCount--) {
    parts[pCount].update();
  }

  renderer.render(scene, camera);

}

window.addEventListener('mousedown', onclick, false);
window.addEventListener('resize', onWindowResize, false);

function onClick() {
  event.preventDefault();
  parts.push(new ExplodeAnimation((Math.random() * sizeRandomness) - (sizeRandomness / 2), (Math.random() * sizeRandomness) - (sizeRandomness / 2)));
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

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

//设置/////////
var移动速度=30；
var totalObjects=500；
var objectSize=70；
var-sizeRandomness=0；
var color=0x000；
/////////////////////////////////
var-dirs=[]；
var部分=[]；
//var container=document.createElement（'div'）；
//文件.正文.附件（容器）；
var container=document.getElementById（'header'）；
//document.body.appendChild（表头）；
var摄像机=新的三视角摄像机（75，window.innerWidth/window.innerHeight，11000）
摄像机位置z=1000；
var scene=new THREE.scene（）；
函数动画（x，y）{
var geometry=new THREE.geometry（）；
对于（i=0；i

当我看到您编写代码时，我认为您应该只将下面的触发代码放在单击按钮内：

renderer.render(scene, camera);
parts.push(new ExplodeAnimation(0, 0));
render();

因为它是在加载时自动执行的

请参阅下面的代码片段，我添加了一个示例按钮和run（）函数，用于在单击时显示动画：

//设置/////////
var移动速度=30；
var totalObjects=500；
var objectSize=70；
var-sizeRandomness=0；
var color=0x000；
/////////////////////////////////
var-dirs=[]；
var部分=[]；
//var container=document.createElement（'div'）；
//文件.正文.附件（容器）；
var container=document.getElementById（'header'）；
//document.body.appendChild（表头）；
var摄像机=新的三视角摄像机（75，window.innerWidth/window.innerHeight，11000）
摄像机位置z=1000；
var scene=new THREE.scene（）；
函数动画（x，y）{
var geometry=new THREE.geometry（）；
对于（i=0；i