onLoad函数仅用于onClick

Question

此代码会导致我的页面出现粒子爆炸。

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

我需要的是，当你运行HTML时它不会符文。该功能仅在单击按钮时运行。

我也想问一下如何更改画布尺寸。由于此函数会自动创建一个加载函数的画布，但是这个函数比我希望它运行的大小的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">