innerWidthとinnerHeightをカスタムサイズに変更THREEjs

Question

下のコードを起動すると、自動的に高さと幅が計算されます。関数がカスタムサイズに起動するウィンドウを設定する方法はありますか？

私はこのコードの一部を変更しようとしたが、これまでのところ運：

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

ここでは、関数のコードではありません。

//////////////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-header-trigger").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(); 
} 

Answer 1

あなたがしなければならないのにあるいずれかの計算などVarの高さの初期値を設定する：あなたはwindow.innerHeightを交換する機能、サイズ変更ウィンドウ関数の両方に組み込みレンダリング、その後

//canvasHeight = document.getElementById('header').clientHeight if height already set with css 
var canvasHeight = 250; 

、以下のようにcanvasHeightによって：

function onWindowResize() { 
    camera.aspect = window.innerWidth/canvasHeight; 
    ... 
    renderer.setSize(window.innerWidth, canvasHeight); 
} 

とrun関数の内部

function run() { 
    renderer.setSize(window.innerWidth, canvasHeight); 
    ... 
} 

あなたは以下snnipet試すことができます。

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

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

 
//here you set or you calculate it 
 
//canvasHeight = document.getElementById('header').clientHeight 
 
var canvasHeight = 250; 
 

 
///////////////////////////////// 
 
var dirs = []; 
 
var parts = []; 
 
//var container = document.createElement('div'); 
 
//document.body.appendChild(container); 
 
var container = document.getElementById('header'); 
 
console.log(container); 
 
//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/canvasHeight; 
 
    camera.updateProjectionMatrix(); 
 

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

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

 
function run() { 
 
    renderer.setSize(window.innerWidth, canvasHeight); 
 
    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-header-trigger">Click to run </button> 
 
<div id="header"></div>