What causes my scene to appear black until OrbitControl is activated in ThreeJS?

What causes the scene in ThreeJS to only appear after clicking and moving the cursor?

The page remains black until I interact by clicking and moving, then everything shows up. I'm stumped on what the issue could be. Any assistance would be greatly appreciated :)

    var origWidth = 1280;
    var origHeight = 720;
    //TODO WindowResize looks wierd, implement it properly
    //var width = window.innerWidth;
    //var height = window.innerHeight;
    var width = origWidth;
    var height = origHeight;

    var Top = origHeight/2;
    var Bottom = -origHeight/2;
    var Left = -origWidth/2;
    var Right = origWidth/2;


    var renderer = null;
    var scene = null;
    var camera = null;
    var Textures = {};

        //Set the renderer engine
        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(width, height);
        document.getElementsByTagName("body")[0].appendChild(renderer.domElement);
        renderer.shadowMapEnabled = true;
        renderer.shadowMapSoft = true;



        //Setup the Scene!
        scene = new THREE.Scene;

        //Camera
        camera = new THREE.PerspectiveCamera(45, origWidth / origHeight, 0.1, 10000);
        camera.position = new THREE.Vector3(0,-80,800);

        scene.add(camera);
        camera.lookAt(scene);
        //TODO WindowResize looks wierd, implement it properly
        //var windowResize = THREEx.WindowResize(renderer, camera);



        //Light
        var pointLight = new THREE.PointLight(0xffffff);
        pointLight.position.set(0, 0, 900);
        scene.add(pointLight);



        //Debug
        controlsObj = new THREE.OrbitControls(camera);
        controlsObj.addEventListener('change', render);
        axes = new THREE.AxisHelper( origWidth );
        scene.add( axes );

        /*var size = 10;
        var step = 1;
        var gridHelper = new THREE.GridHelper( size, step );

        gridHelper.position = new THREE.Vector3( 10, 10, 0 );
        gridHelper.rotation = new THREE.Euler( 45, 0, 0 );

        scene.add( gridHelper );*/

        var pointLightHelper = new THREE.PointLightHelper( pointLight, 10 );
        scene.add( pointLightHelper );

        //Add playing field
        tablegeometry = new THREE.BoxGeometry(origWidth, origHeight, 40);
        tablematerial = new THREE.MeshLambertMaterial({ color: 0xffff00, map: Textures.bg, side: THREE.DoubleSide });
        tableobj = new THREE.Mesh(tablegeometry, tablematerial);
        tableobj.position.set(0,0,-20); //TODO vec
        scene.add(tableobj);

        //ANNNND, Action !
        render();

    function render() {
        console.log("render");
        renderer.render(scene, camera);
    }

Answer №1

Dealing with a similar issue, I found that positioning the camera after executing OrbitControls was causing trouble. Simply creating the camera before calling OrbitControls solved the problem for me.

If you're facing a similar situation, consider adding : requestAnimationFrame(render); in your render function.

function render() {
    console.log("render");
    requestAnimationFrame(render);
    renderer.render(scene, camera);
}  

This adjustment ensures that the scene is displayed correctly when render() is initially called.

Answer №2

To ensure smooth functionality, make sure to update the Orbit control object before calling the render() function. Follow this simple solution below:

controlsObj.update();

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

Activating a hyperlink within a Div element by clicking on the Div itself

In my card element, I have a link that, when clicked, opens a modal pop-up containing all the necessary project information. I am currently attempting to trigger a click event on that link whenever any part of the div is clicked. This task is for a school ...

What is the best way to halt a window.setInterval function in JavaScript?

I have a JavaScript function that runs every 2000ms. I need to find a way to pause this function so that the user can interact with other elements on the page without interruptions. Is there a way to achieve this? Below is the code for the function: win ...

Retrieve a DOCX file via AJAX response

I am encountering an issue with a Django function that returns a file: ... return FileResponse(open('demo.docx', 'rb')) I am using ajax to fetch it on the client side. Now, I need to download it on the client side. This is the code I a ...

An error occurred due to a missing value within the forEach loop

In my JavaScript object, I am encountering an issue with a key. resolve: function () { var result = this.initialValue; console.log('initial value:',result); // 5 this.functions.forEach(function (element, index) { ...

"Customizable rectangular container with jagged edges created with Scalable Vector Graphics

Currently, I am undertaking a small project that involves creating a box with rough edges around some text. To achieve this effect, I am utilizing an SVG with unique edges similar to the design found at this link: (except mine is in SVG format). My goal ...

Ways to reload the page following the submission of a form

I implemented a fade dialog to present a form, and successfully submitted the form using ajax to create a new record in the database. Now, I am facing an issue where I cannot refresh the page after the ajax call finishes. Despite attempting to use JavaScr ...

Is there a way to successfully integrate a JavaScript file that has been downloaded from `npm` or `yarn` into a web client or

Currently, I am following a guide titled "Headless Drupal with React" on Medium. The tutorial itself does not address my specific questions. In the tutorial, it demonstrates importing React and ReactDOM directly from CDN in the .html file. My query revolv ...

Seeking a sleeker approach to composing various components with shared functions

Currently, I have a scenario where I have identical components that display data but also need to handle state manipulation and saving. There are 5 other similar components with slight differences in their functions. I am looking for a more efficient way t ...

The Bootstrap modal fails to open

I am currently working on implementing a Navbar button that triggers a Bootstrap modal containing a form. While looking for resources, I stumbled upon a useful script at https://gist.github.com/havvg/3226804. I'm in the process of customizing it to su ...

Passing a JavaScript variable to a URL parameter can be achieved by

Can anyone advise me on passing JavaScript string variables and displaying them in the URL? For instance, let's say the URL is "xyc.com". Upon populating a variable (a), I wish for that variable to appear in the address bar as URL = "xyc.com/?a=". Cur ...

Is there a way in React to specify which properties to pass (and when to pass them) to child components based on the properties of the parent component?

In this hypothetical scenario, there are 4 components already in place: MainComponent1, MainComponent2, IntermediateComponent, and ChildComponent. Both MainComponent1 and MainComponent2 can utilize IntermediateComponent as their child component, while Chil ...

Chunk error ECONNREFUSED trigger

Encountered an issue while running through grunt. Getting a proxy error: Econnrefused when trying to run grunt serve. After running --verbose, it seems like the request is being blocked. I suspect it may be due to my organization's network setup, bu ...

What is the best way to link this interval service with a view component?

Exploring the AngularJS documentation for $interval, I came across an interesting example demonstrating how to utilize $interval in a controller to create a user-friendly timer in a view. The official example code can be found on the angularJS documentatio ...

Tips for eliminating objects with a sessionID:null value from the nested array within an array of objects using JavaScript

[ { "_id": "5ecda7f5310bee6f4b845add", "firstname": "john", "lastname": "smith", "sessions": [ { "_ ...

Customizing Tabs in Material UI v5 - Give your Tabs a unique look

I am attempting to customize the MuiTabs style by targeting the flexContainer element (.MuiTabs-flexContainer). Could someone please clarify the significance of these ".css-heg063" prefixes in front of the selector? I never noticed them before upgrading my ...

Unable to run any npm scripts in a React project

My React application has been running smoothly for a while, but recently all the npm commands in the package.JSON file have stopped working. { "name": "fitness-appication-frontend", "version": "0.1.0", "private": true, "dependencies": { "reac ...

Adding setTimeout within the Axios Scope can enhance the functionality and performance of your

Show an alert in the catch block of Axios. The issue at hand: Error message does not disappear after the specified time when using setTimeout. ...

Remove a specific date entry from the database using VUE JS and Axios

I am encountering a challenge with Vuejs as I work on a To-Do list. The tasks need to be stored in a MySQL database, and I also want the ability to delete tasks. While I have succeeded in importing and creating data, I'm facing difficulty in deleting ...

Synchronizing the DOM with the Database in a React Component/View: A Step-by-Step

I recently developed a list component in React, but I'm facing two significant challenges. Although the item gets removed from the database, the change is only visible after refreshing the page. You might have noticed that the list number or ID colu ...

Simultaneously updating the states in both the child and parent components when clicked

In my code, I have two components: the parent component where a prop is passed in for changing state and the child component where the function is called. The function changes the state of the parent component based on an index. changeState={() => this ...