Adjust the size of the scene to make it smaller and position the canvas within a div

Question

Adjust the size of the scene to make it smaller and position the canvas within a div

My current project involves Three.js and can be accessed here in its entirety.

The particles in the project have a lot of vertical space around them that is unoccupied. I am trying to find a way to reduce this space or put the project inside a div. I tried adjusting renderer.setSize but it distorted the scene. Placing it in a div didn't yield any results for me either.

My formal training in web design was limited, only covering the basics. I had to learn things like this online, so I apologize if my questions seem simplistic.

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;

...

javascript three.js

Answer 1

Answer №1

To ensure a consistent height for your canvas, you can establish a fixed height and incorporate it into both the onWindowResize function and the init function.

Here is an example:

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

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

function onWindowResize() {        
    // adjust the separation for a more even 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

To ensure a consistent height for your canvas, you can establish a fixed height and incorporate it into both the onWindowResize function and the init function.

Here is an example:

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

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

function onWindowResize() {        
    // adjust the separation for a more even 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 3

Answer №2

Here is a combined solution based on suggestions from cameraman and WestLangley:

Globalized variables WIDTH and HEIGHT are used
HEIGHT is set to a fixed value
camera.fov is adjusted for zooming

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;

// Remaining code omitted for brevity

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

Answer 4

Here is a combined solution based on suggestions from cameraman and WestLangley:

Globalized variables WIDTH and HEIGHT are used
HEIGHT is set to a fixed value
camera.fov is adjusted for zooming

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;

// Remaining code omitted for brevity

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

Answer 5

Answer №3

It seems like you're struggling with placing the canvas inside a div. Using a div allows for better positioning and sizing of the canvas.

Check out the essential code snippets from your updated example: http://codepen.io/anon/pen/ybBVYX

var SCREEN_WIDTH, SCREEN_HEIGHT;

// initialization
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 );

// resizing
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 class="header">
  <p class="test">Hello</p>
  <a href="">Link</a>
</div>

<div class="webgl"></div>

If you want to maintain the aspect ratio, you'll need to set the width or height of both your div and the canvas element explicitly, for example, using jQuery:

SCREEN_WIDTH = container.width();
SCREEN_HEIGHT = SCREEN_WIDTH * aspectRatio;

container.height( SCREEN_HEIGHT );

Answer 6

It seems like you're struggling with placing the canvas inside a div. Using a div allows for better positioning and sizing of the canvas.

Check out the essential code snippets from your updated example: http://codepen.io/anon/pen/ybBVYX

var SCREEN_WIDTH, SCREEN_HEIGHT;

// initialization
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 );

// resizing
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 class="header">
  <p class="test">Hello</p>
  <a href="">Link</a>
</div>

<div class="webgl"></div>

If you want to maintain the aspect ratio, you'll need to set the width or height of both your div and the canvas element explicitly, for example, using jQuery:

SCREEN_WIDTH = container.width();
SCREEN_HEIGHT = SCREEN_WIDTH * aspectRatio;

container.height( SCREEN_HEIGHT );

Adjust the size of the scene to make it smaller and position the canvas within a div

Answer №1

Answer №2

Answer №3

Similar questions

React: Updating useState array by removing the first element triggered by an event or timer

The client side script "/socket.io/socket.io.js" was not located, therefore the Express-generator project was used instead

Can a substring within a string be customized by changing its color or converting it into a different HTML tag when it is defined as a string property?

Karma and RequireJS fetching files beyond the base URL

Traversing an array of objects to extract and display the key-value pairs for each object

The node application route appears to be malfunctioning

When you press the submit button, the screen automatically scrolls down but no action is taken

Elements are randomly glitching out with CSS transitions in Firefox

Implementing Next.js in a live production environment

Populate the dropdown menu with data from a JSON file

How can I utilize the mapping function on a promise received from fetch and display it on the page using React

Displaying the Selected Value from the DropDown in the Menu

Steps for sorting items from a list within the past 12 hours

When utilizing AJAX within a for loop, the array position may not return the correct values, even though the closure effectively binds the scope of the current value position

Notification pop-up for accepting cookies on a website

Using jQuery to change date format from mm/dd/yy to yyyy-dd-mm

How can I address the issue of an inner content scroll bar?

Steps for extracting a portion of the current page's URL

If the if logic in Express.js fails to function properly, it will consistently output the same message

Using getStaticProps in Next.js to retrieve menu data and seamlessly integrate it into the layout