将 innerWidth 和 innerHeight 更改为自定义大小 THREEjs答案

【问题标题】：Change innerWidth and innerHeight to custom size THREEjs将 innerWidth 和 innerHeight 更改为自定义大小 THREEjs
【发布时间】：2017-12-01 19:04:10
【问题描述】：

当我启动下面的代码时，它会自动计算高度和宽度。有什么方法可以将函数启动的窗口设置为自定义大小？

我尝试更改这部分代码，但到目前为止没有运气：

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

【问题讨论】：

您想将动画容器设置为自定义大小，还是自行调整窗口大小？？
@bRIMO 示例 youtu.be/ViwI_2bQ40A 。你看到动画是如何将菜单栏向下推的吗？我希望该功能在深蓝色区域内运行，而无需按下菜单栏。希望例子能帮到你！
所以你想让它固定高度？作为起始高度？
@bRIMOs 是的，具有固定的宽度和高度。所以它不会向下推菜单栏。标题的宽度为 100%，高度为 91vh。我希望函数在相同的度量范围内运行。
看我下面的答案

标签： javascript html three.js

【解决方案1】：

您所要做的就是计算或设置 var 中的初始值，例如：

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

然后在调整大小窗口函数和内置渲染函数中，您将window.innerHeight 替换为canvasHeight，如下所示：

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

在运行函数内部

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

你可以试试下面的片段：

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

【讨论】：