Question

我正在开发一个Three.js项目，你可以在整个here找到它。

正如您所看到的，颗粒周围有大量垂直的未占用空间。我想知道是否有可能减少这一点。如果没有，是否可以把它放在div中？我用renderer.setSize修补了一下，但它也延伸了场景;同时把它放在div中并没有给我带来任何结果。

不幸的是，我收到的关于网页设计和开发的正式培训很少，只涉及基础知识和基础知识;因此，我不得不尝试在网上理解这样的事情，所以如果这听起来很麻烦，我会道歉。

var SEPARATION = 70, AMOUNTX = 25, AMOUNTY = 20;

var container, camera, scene, renderer;

var particles, particle, count = 0;

var mouseX = 0, mouseY = 0;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

init();
animate();

function init() {

container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1000;

scene = new THREE.Scene();

particles = new Array();

var PI2 = Math.PI * 2;
var material = new THREE.SpriteCanvasMaterial( {

color: 0x333399,
program: function ( context ) {

  context.beginPath();
  context.arc( 0, 0, 0.5, 0, PI2, true );
  context.fill();

}

} );

var i = 0;

for ( var ix = 0; ix < AMOUNTX; ix ++ ) {

for ( var iy = 0; iy < AMOUNTY; iy ++ ) {

  particle = particles[ i ++ ] = new THREE.Sprite( material );
  particle.position.x = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 );
  particle.position.z = iy * SEPARATION - ( ( AMOUNTY * SEPARATION ) / 2 );
  scene.add( particle );


}

}

renderer = new THREE.CanvasRenderer({alpha:true});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );

document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );

//

window.addEventListener( 'resize', onWindowResize, false );

}

function onWindowResize() {

windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

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

}

//

function onDocumentMouseMove( event ) {

mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY;

}

function onDocumentTouchStart( event ) {

if ( event.touches.length === 1 ) {

event.preventDefault();

mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;

}

}

function onDocumentTouchMove( event ) {

if ( event.touches.length === 1 ) {

event.preventDefault();

mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;

}

}

//

function animate() {

requestAnimationFrame( animate );

render();
}

function render() {

var i = 0;

for ( var ix = 0; ix < AMOUNTX; ix ++ ) {

for ( var iy = 0; iy < AMOUNTY; iy ++ ) {

  particle = particles[ i++ ];
  particle.position.y = ( Math.sin( ( ix + count ) * 0.3 ) * 50 ) +
    ( Math.sin( ( iy + count ) * 0.5 ) * 50 );
  particle.scale.x = particle.scale.y = ( Math.sin( ( ix + count ) * 0.3 ) + 1 ) * 4 +
    ( Math.sin( ( iy + count ) * 0.5 ) + 1 ) * 5;

  }

 }

renderer.render( scene, camera );

count += 0.1;

}

Answer 1

您可以为画布设置固定高度，并在 onWindowResize 功能和 init 功能中使用它。

例如：

// set a fixed canvas height 
var fixedCanvasHeight = 200;

function init(){
    // give separation a new value for a better particle distribution 
    SEPARATION = window.innerWidth/AMOUNTX;
    ...
    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / fixedCanvasHeight, 1, 10000 );
    ...
    renderer.setSize( window.innerWidth, fixedCanvasHeight );
    ...
}

function onWindowResize() {        
    // give separation a new value for a better particle distribution 
    SEPARATION = window.innerWidth/AMOUNTX;

    windowHalfX = window.innerWidth / 2;
    windowHalfY = window.innerHeight / 2;

    camera.aspect = window.innerWidth / fixedCanvasHeight;
    camera.updateProjectionMatrix();

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

Answer 2

这是你正在寻找的吗？我结合了摄影师和WestLangley的建议：

我使用了全球化的WIDTH和HEIGHT变量
HEIGHT是固定值
调整camera.fov以缩放以适合您想要的内容

＆＃13;

var SEPARATION = 70,
  AMOUNTX = 25,
  AMOUNTY = 20,
  // Globalized width & height varialbes
  WIDTH = window.innerWidth, // width still references the window width
  HEIGHT = 200; // height is now a fixed value (if this needs to be dynamic, you'll need to calculate it)

var container, camera, scene, renderer, particles, particle, count = 0;

var mouseX = 0,
  mouseY = 0;

var windowHalfX = WIDTH / 2;
var windowHalfY = HEIGHT / 2;

init();
animate();

function init() {

  container = document.createElement('div');
  document.body.appendChild(container);

  camera = new THREE.PerspectiveCamera(35, WIDTH / HEIGHT, 1, 10000); // smaller FOV = tighter zoom
  camera.position.z = 1000;

  scene = new THREE.Scene();

  particles = new Array();

  var PI2 = Math.PI * 2;
  var material = new THREE.SpriteCanvasMaterial({
    color: 0x333399,
    program: function(context) {
      context.beginPath();
      context.arc(0, 0, 0.5, 0, PI2, true);
      context.fill();
    }
  });

  var i = 0;

  for (var ix = 0; ix < AMOUNTX; ix++) {
    for (var iy = 0; iy < AMOUNTY; iy++) {
      particle = particles[i++] = new THREE.Sprite(material);
      particle.position.x = ix * SEPARATION - ((AMOUNTX * SEPARATION) / 2);
      particle.position.z = iy * SEPARATION - ((AMOUNTY * SEPARATION) / 2);
      scene.add(particle);
    }
  }

  renderer = new THREE.CanvasRenderer({
    alpha: true
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(WIDTH, HEIGHT);
  container.appendChild(renderer.domElement);

  document.addEventListener('mousemove', onDocumentMouseMove, false);
  document.addEventListener('touchstart', onDocumentTouchStart, false);
  document.addEventListener('touchmove', onDocumentTouchMove, false);

  //

  window.addEventListener('resize', onWindowResize, false);

}

function onWindowResize() {
  windowHalfX = WIDTH / 2;
  windowHalfY = HEIGHT / 2;
  camera.aspect = WIDTH / HEIGHT;
  camera.updateProjectionMatrix();
  renderer.setSize(WIDTH, HEIGHT);
}

function onDocumentMouseMove(event) {
  mouseX = event.clientX - windowHalfX;
  mouseY = event.clientY - windowHalfY;
}

function onDocumentTouchStart(event) {
  if (event.touches.length === 1) {
    event.preventDefault();
    mouseX = event.touches[0].pageX - windowHalfX;
    mouseY = event.touches[0].pageY - windowHalfY;
  }
}

function onDocumentTouchMove(event) {
  if (event.touches.length === 1) {
    event.preventDefault();
    mouseX = event.touches[0].pageX - windowHalfX;
    mouseY = event.touches[0].pageY - windowHalfY;
  }
}

function animate() {
  requestAnimationFrame(animate);
  render();
}

function render() {
  var i = 0;
  for (var ix = 0; ix < AMOUNTX; ix++) {
    for (var iy = 0; iy < AMOUNTY; iy++) {
      particle = particles[i++];
      particle.position.y = (Math.sin((ix + count) * 0.3) * 50) +
        (Math.sin((iy + count) * 0.5) * 50);
      particle.scale.x = particle.scale.y = (Math.sin((ix + count) * 0.3) + 1) * 4 +
        (Math.sin((iy + count) * 0.5) + 1) * 5;
    }
  }
  renderer.render(scene, camera);
  count += 0.1;
}

＆＃13;

<script src="http://threejs.org/build/three.js"></script>
<script src="http://threejs.org/examples/js/renderers/CanvasRenderer.js"></script>
<script src="http://threejs.org/examples/js/renderers/Projector.js"></script>

＆＃13;

Answer 3

据我了解你的问题，将画布放入>class(df) [1] "data.frame"会有麻烦。当然，在div范围内，您可以更好地定位和调整画布大小。

此处的基本代码摘自您更新的示例：http://codepen.io/anon/pen/ybBVYX

div

var SCREEN_WIDTH, SCREEN_HEIGHT;

// init
container = $('.webgl');
SCREEN_WIDTH = container.width();
SCREEN_HEIGHT = container.height();

camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
camera.position.z = 1000;

renderer = new THREE.CanvasRenderer({alpha:true});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
container.append( renderer.domElement );

// resize
function onWindowResize() {

  SCREEN_WIDTH = container.width();
  SCREEN_HEIGHT = container.height();
  
  camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
  camera.updateProjectionMatrix();

  renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );

}

html, body {
  color: #ff0000;
  height: 100%;
}
.header {
  height: 60%;
  background-color: #ccc;
}
.webgl {
  height: 40%;
}

如果要保持纵横比，则需要明确设置div和canvas元素的宽度或高度，例如：使用jQuery：

<div class="header">
  <p class="test">Hello</p>
  <a href="">Link</a>
</div>

<div class="webgl"></div>

减少场景高度/宽度并将画布放入div

3 个答案: