javascript - 仅 onClick 的 onLoad 功能

Question

此代码会在我的页面上引起粒子爆炸。

我将 onClick 函数附加到我的 HTML 中的一个按钮，因此它会在我单击该特定按钮时运行。但是，当我加载 HTML 时，它会自动运行此功能，之后只有在我单击按钮时才会运行。

我需要的是当您运行 HTML 时它不会运行。该函数可能仅在单击按钮时运行。

我还想问一下如何更改 Canvas 大小。由于此函数会自动创建一个 Canvas ，函数会在其中加载，但这个 Canvas 比我希望它在其中运行的大小的 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);
}

Answer 1

当我看到你的代码时，我认为你应该只将波纹管触发代码放在点击按钮中:

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

因为加载的时候自动执行了。

请参阅下面的代码片段，我添加了一个示例按钮和 run() 函数以在单击时显示动画:

//////////////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();




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);
}

document.getElementById("btn").addEventListener('click',run);

function run() {
    renderer.setSize(window.innerWidth, window.innerHeight);
    container.appendChild(renderer.domElement);
    renderer.render(scene, camera);
    parts.push(new ExplodeAnimation(0, 0));
    render();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script>

<button id="btn">Click to run </button>
<div id="header">