Trouble with displaying THREE.js image on canvas

Question

Trouble with displaying THREE.js image on canvas

I have set up two different scenes and renders in my project. In addition, I have utilized Bootstrap 4 for the modal window functionality. One scene serves as the main display, while the other is displayed within the modal window. This is why I am employing two separate renders: one for the element on the main screen and another for the modal window.

Here is the code:

Main scene:

<div class="output3d" id="WebGL-output"></div>

function setMainScene() {
        // Main scene setup goes here
}

Scene for modal window:

<div class="modal" data-backdrop="static" id="ObjectInfo" role="dialog" tabindex="-1">
    <!-- Modal window setup code here -->
</div>

 function setModalWindowScene() {
        // Modal window scene setup goes here
}

Init:

function init() {
    setMainScene()
    setModalWindowScene()

    // Adding objects to main scene
    addRoom()
    addRacks()
    addExtinguishingCylinders()
    addHotHalls()
    addWires()
    addLights()

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

Rendering:

function animate() {
    requestAnimationFrame(animate);
    render();
}

function render() {
    // Main rendering logic
}

function onWindowResize() {
    // Window resize logic
}

HTML:

<script type="text/javascript">
    init();
    animate();
</script>

One issue that has been encountered is when a user opens the modal window for the first time, the object picture doesn't initially appear. However, upon resizing the window, the picture appears and remains visible. An interesting observation is that even when there is no picture in the modal window, the object can still be rotated using the controls associated with the modal scene.

You can see a demonstration of this issue below: Before resizing After resizing

javascript three.js

Answer 1

Answer №1

In order to properly render your scene, it is important to include the render function within your init function.
Simply putting it inside the onWindowResize function will not suffice as this only triggers when the window is resized and not when the page initially loads.
Consider implementing a render loop to continuously update the visuals of your scene.

Refer to the example provided below for guidance.
Notice how the init function sets up the scene and then the animate function kicks off the render loop.

var camera, scene, renderer, mesh, material;
// set up the scene.
init();
// Start the animation/render loop.
animate();

function init() {
    // Set up the renderer.
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // Create the camera.
    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.z = 400;

    // Create the scene.
    scene = new THREE.Scene();

    // Prepare the material.
    material = new THREE.MeshPhongMaterial();

    // Generate a cube and add it to the scene.
    var geometry = new THREE.BoxGeometry(200, 200, 200);
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    // Introduce ambient light to the scene.
    var light = new THREE.AmbientLight(0x404040);
    scene.add(light);

    // Add directional light to the scene.
    var directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(1, 1, 1).normalize();
    scene.add(directionalLight);

    // Listen for window resize event.
    window.addEventListener('resize', onWindowResize, false);

}

function animate() {
    requestAnimationFrame(animate); 
    mesh.rotation.x += 0.005;
    mesh.rotation.y += 0.01;
    renderer.render(scene, camera);
}

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

<script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>

Answer 2

In order to properly render your scene, it is important to include the render function within your init function.
Simply putting it inside the onWindowResize function will not suffice as this only triggers when the window is resized and not when the page initially loads.
Consider implementing a render loop to continuously update the visuals of your scene.

Refer to the example provided below for guidance.
Notice how the init function sets up the scene and then the animate function kicks off the render loop.

var camera, scene, renderer, mesh, material;
// set up the scene.
init();
// Start the animation/render loop.
animate();

function init() {
    // Set up the renderer.
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // Create the camera.
    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.z = 400;

    // Create the scene.
    scene = new THREE.Scene();

    // Prepare the material.
    material = new THREE.MeshPhongMaterial();

    // Generate a cube and add it to the scene.
    var geometry = new THREE.BoxGeometry(200, 200, 200);
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    // Introduce ambient light to the scene.
    var light = new THREE.AmbientLight(0x404040);
    scene.add(light);

    // Add directional light to the scene.
    var directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(1, 1, 1).normalize();
    scene.add(directionalLight);

    // Listen for window resize event.
    window.addEventListener('resize', onWindowResize, false);

}

function animate() {
    requestAnimationFrame(animate); 
    mesh.rotation.x += 0.005;
    mesh.rotation.y += 0.01;
    renderer.render(scene, camera);
}

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

<script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>

Answer 3

Answer №2

Upon reviewing the situation, it appears that I neglected to specify an aspect ratio when creating the modelWindowCamera because the element

document.getElementById("FrontView")

had no dimensions prior to the initial rendering. However, after adjusting the scale of the window, the element

document.getElementById("FrontView")

was no longer sizeless and the camera's aspect ratio was able to update correctly.

To resolve this issue, I have now set the aspect ratio to a constant value of 1, resulting in the revised code below:

   modalWindowCamera = new THREE.PerspectiveCamera(45, 1, 1, 100);

Answer 4

Upon reviewing the situation, it appears that I neglected to specify an aspect ratio when creating the modelWindowCamera because the element

document.getElementById("FrontView")

had no dimensions prior to the initial rendering. However, after adjusting the scale of the window, the element

document.getElementById("FrontView")

was no longer sizeless and the camera's aspect ratio was able to update correctly.

To resolve this issue, I have now set the aspect ratio to a constant value of 1, resulting in the revised code below:

   modalWindowCamera = new THREE.PerspectiveCamera(45, 1, 1, 100);

Trouble with displaying THREE.js image on canvas

Answer №1

Answer №2

Similar questions

Encountering an unforeseen change in the "buttonText" attribute

What is the correct way to store user input in the "store" using vuex.js? Can you help me identify where I went wrong?

Switch between individual highcharts by selecting or deselecting checkboxes

Looking to update the display of an array received in JSON format and then show it using ng-repeat?

Using type annotations is restricted to TypeScript files only, as indicated by error code ts(8010)

Both if and else statements are carrying out code in JavaScript/jQuery

How to send parameters to the jQuery delete button click event handler

Is it acceptable to reference all JS files in index.html in Angular?

Associating specific information with individual elements utilizing HTML text box

Is there a way to determine if a webpage is being accessed from a website or from a local file system?

What is the method to store and retrieve data attributes linked to elements such as select options within the React framework?

Is the "json_encode" function dropping the '+' character when using "json.parse"?

Setting an action when clicking on a slice of a Doughnut chart using Chart.js

function embedded in velocity.js chain

convert JSON to Java object using GSON with a map

Node.js MongoDB Error: db.open is undefined

Navigating a loop in javascript: tips and techniques

Interacting with a non-stringified object displayed in the browser console using TestCafe

Tips for changing the value of a TextField in React Material

Can we enhance the efficiency of this equation?