Generating various canvases for presenting a three.js scene within an Angular environment

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit{
 title = 'ang12';
 ngOnInit(): void {
   //const container = document.createElement('div')
  const container = document.getElementById("canvas1");
   document.body.appendChild(container)
   container.appendChild(renderer.domElement)
   animate()
 }
}

The code above the @Component block contains my three.js implementation, which is currently rendering on the entire screen. I am looking to display it within a canvas element and manipulate its positioning. Even though I have correctly utilized div tags in app.component.html, simply modifying the div style did not yield the desired result.

 ngOnInit(): void {
   const container = document.createElement('div')
   container.style.width = "1000px"
   container.style.top = '5000px';
   document.body.appendChild(container)
   container.appendChild(renderer.domElement)
   animate()
 }
}

Answer №1

It appears that you may be looking for a way to prevent your canvas from occupying the entire screen based on your question.

To achieve this, consider placing your canvas inside a div element in your HTML:

<div class="canvas_container">
  <canvas class="webgl_canvas"></canvas>
</div>

You can then style both elements with the following CSS properties:

.canvas_container {
  width: 300px; 
  height: 300px;
  position: absolute;
  top: 50px;
}

.webgl_canvas {
  width: 100%; 
  height: 100%;
}

Select these elements using querySelector:
*** For a more Angular-friendly approach, consider using @ViewChild - it's recommended.

const container = document.querySelector('.canvas_container');
const canvas    = document.querySelector('.webgl_canvas');

Adjust the renderer size to match the dimensions of the parent div.

const sizes = {
  width:  container.clientWidth,
  height: container.clientHeight
};

const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 1, 1000);
scene.add(camera);

const renderer = new THREE.WebGLRenderer({
    canvas: canvas
});
renderer.setSize(sizes.width, sizes.height);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I make an image disappear after animation with CSS?

I experimented with this code snippet in an attempt to fade out an image, .splash-wrapper { animation: fadeIn 4s; -webkit-animation: fadeIn 4s; -moz-animation: fadeIn 4s; -o-animation: fadeIn 4s; -ms-animation: fadeIn 4s; animation-duration: ...

The time format in IST returns an undefined value in JavaScript

console.log(Date.parse('Wed Jul 07 04:49:10 IST 2021')); // returns NAN console.log(Date.parse('Wed Jul 07 04:49:10 EDT 2021')); // working as intended Is there a way to convert the date string 'Wed Jul 07 04:49:10 IST 2021' ...

Check out how Vue JS displays multiple images with a background image CSS style!

Would like to display image previews when a user selects them before uploading, but my Vue skills are lacking. Struggling with applying background image URLs to each div element in the UploadComponent: <template> <div class="content" ...

Can a rotation animation be incorporated into an image in next.js when it is clicked?

Looking to enhance a next.js image with an animation? How about making it rotate 360 degrees upon each click? Despite my attempts at toggling classes, I can't seem to achieve the desired outcome. Any guidance would be greatly appreciated. Thank you in ...

Chrome crashed when attempting to load a large .GLTF model exceeding 25mb in size

I encountered an issue while using GLTF2LOADER where it was unable to load a model larger than 20MB, causing Chrome to crash. However, the same model loaded perfectly in Mozilla without any problems when using GLTFLOADER.js. I'm puzzled by this discre ...

Creating a dynamic dropdown menu from a nested object involves utilizing the structure of the

Is there a way to dynamically populate the second drop-down selection based on nested array objects? Currently, I can retrieve data for the first drop-down list but upon selecting an option from the first list, I want to display the corresponding list of p ...

Add transparency to elements that are not currently being hovered over using d3's mouseover feature

I'm attempting to implement a mouseover effect that increases the opacity of elements that are not being hovered on. My SVG map consists of various regions, with the current function applying an opacity of 0.8 to the selected region. My goal is to r ...

What is the best way to combine XHTML files in Java while handling any potential CSS conflicts that may arise

Looking for a way to concatenate XHTML files in Java and resolve CSS collisions at runtime? The challenge is to merge files with different style definitions without losing any content. JSoup seems promising but falls short on managing style conflicts autom ...

What is the origin of the padding-top&bottom in my CSS code?

Here is the code I am using to create a simple 3-column layout (http://jsfiddle.net/7aC3U/) This is the HTML code: <div class="wrapper"> <div class="col col-1-3"> <div class="module"> <p>Col 1</p></div> & ...

JS: I'm struggling to understand the scope

I've been working on adapting CouchDB's JS API to function asynchronously, but I'm encountering an unresolved error: You can find my version of the JS API here on Pastebin. Whenever I execute (new CouchDB("dbname")).allDocs(function(result) ...

Ways to include a CSS file path in a link tag from an npm package

I have recently installed a package using npm. npm install lightgallery Now, I am trying to fill the href attribute of a link with the css file directory of this package. Here is what I have so far: <link rel="stylesheet" href="/node_mod ...

Guide to adding a Scrollable Navbar

Is the term "scroll bar" really accurate? I want to create a scrollable feature where users can easily select a city using their mouse wheel (or swipe on a smartphone) and then choose from possible cities within that country in a second window. Something s ...

The head tags have somehow infiltrated the body of the document

After developing a simple web page with all the necessary elements in place such as title, meta tags, etc., I encountered a strange issue. While debugging using Firebug, Chrome and Firefox's default debugger, I noticed that all the tags inside the hea ...

Is there a way to execute server-side functions with HtmlService?

I am currently learning programming and I'm experimenting with setting up buttons using jQuery in Google Apps Script. I have a spreadsheet with a menu that opens a dialog box created with HtmlService. Inside the dialog box, there are two buttons - o ...

Transforming the Form of a Div with CSS or JQuery

Is there a way to change the shape of a div using CSS or jQuery like shown below? https://i.sstatic.net/mQUkk.jpg I have some content inside the div, for example, Lorem ipsum... But I would like the shape to be transformed using CSS. Is this possible? ...

Move the object in Three.js by rotating it around the origin (0,0,0) in response to mouse

I am currently working with an object in Three.js that was created in Blender and imported into the Three.js format. My goal is to enable mouse rotation for this object. Any assistance on how to achieve this would be greatly appreciated! Thank you. ...

Use JavaScript and AJAX to easily assign multiple variables with unique IDs to an array with just one click

This function is no longer supported Original query : I would greatly appreciate any assistance and guidance. I am attempting to create a function that moves selected products from the Cart to another table so I can reorder them according to customer de ...

DaisyUI nested collapse components featuring a dropdown menu

Here's an update following the discussion in this thread. I've implemented the solution suggested there into my Vue component, modified the collapse section, and turned it into a nested collapse with multiple collapse elements nested inside. The ...

Troubleshooting Material-UI: The Mystery of the Missing Dialog

I have been struggling with getting a pop-up dialog to appear when a form is incorrectly filled out. Despite my efforts, the code that should trigger the dialog upon submission does not seem to be working as expected. The function renderError(), responsib ...

Responsive Navbar with Collapsible Menu and Sticky Dropdown Navigation in Bootstrap 4

As a beginner, I am working on designing a mobile-responsive navbar using Bootstrap 4. Here is my vision for how it should appear on different devices: For full-width displays, the layout should include: Logo (aligned to the left) Links (also aligned to ...