onLoad関数onClickのみ

Question

このコードは、ページ上でパーティクルが爆発する原因となります。

HTMLのボタンにonClick関数をアタッチしたので、そのボタンをクリックすると実行されます。しかし、HTMLを読み込むと自動的にこの関数が実行され、その後はボタンをクリックしたときのみ表示されます。

私が必要とするのは、HTMLを実行するときに刻まれないことです。この関数は、ボタンがクリックされたときにのみ実行されます。

私はテキャンバスのサイズをどのように変更できるのか尋ねたいと思います。この機能は、自動的に関数をロードキャンバスを作成しますが、この1は私はそれがで実行したいサイズの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(); 

読み込み時に自動的に実行されるためです。

//////////////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">