Having Trouble with WebGL Rendering

I'm at a loss trying to troubleshoot this code. It refuses to render as expected. The goal is to load an .obj file with a custom .png texture applied to it. The user should then be able to rotate around the image by dragging the mouse. I have no clue what's causing the issue. Could it be that the object is not in the camera's field of view? Any assistance would be greatly appreciated! P.S. The .js files are loading correctly. I tested this setup with a simpler version and didn't encounter any new functionality quirks.


        <!DOCTYPE html>
        <html lang="en">
        <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        </head>

        <body>

          <script src="js/three.min.js"></script>
          <script src="js/loaders/OBJLoader.js"></script>
          <script src="js/Detector.js"></script>
          
          <script>
            
            // Variables and functions for initializing and animating the 3D object
            var container;
            var camera, scene, renderer;
            var group, text, plane;
            var targetRotationX = 0;
            var targetRotationOnMouseDownX = 0;
            var targetRotationY = 0;
            var targetRotationOnMouseDownY = 0;
            var mouseX = 0;
            var mouseXOnMouseDown = 0;
            var mouseY = 0;
            var mouseYOnMouseDown = 0;
            var windowHalfX = window.innerWidth / 2;
            var windowHalfY = window.innerHeight / 2;
            var finalRotationY;

            // Initialize the scene
            init();
            animate();

            function init() {
              // Scene setup and object loading code here...
            }

            function animate() {
              // Animation loop code here...
            }

          </script>

        </body>
        </html>
    

Answer №1

The issue lies in the absence of an element named container at this particular line of code

container = document.getElementById( 'container' );

You can resolve this by commenting out the line (as you already have a functioning variable named container) and then you will be able to view your model.

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

Retrieve Files with Angular Framework

I'm looking to implement a file download or view button using Angular without making a call to the backend. The file is static and the same for all users, so I want to avoid unnecessary server requests. Many solutions involve using the "download" att ...

Passing values from Vue3 child component to parent component

Hey there, I'm currently diving into the world of Vue and I'm working on a table that dynamically displays abbreviations. I've been trying to send a searchTerm from my child component to the parent component, but I'm struggling with ge ...

python using selenium to bypass javascript popups

I have a project where I need to visit a specific website and interact with it using the Python selenium module. However, I am encountering a popup (a cookie acceptance form) when trying to access the site with a bot. I must accept this popup in order to p ...

Innovative guidelines originating from a resource attribute

I am facing a challenge with a repeater for a resource that has an attribute containing angular directives mixed with text. My goal is to display form inputs dynamically based on the object's property. <ul> <li ng-repeat="action in actions ...

Capture the contents of a table cell and store it in the clipboard

Is there a way to create a hover copy button in a table cell without actually placing the button inside the <td> tags? The goal is to allow users to easily copy text from a specific column cell by hovering over it. function myFunction() { var c ...

Is there a way to transfer the value from one directive to another directive template and access it in a different directive's scope?

I attempted to pass the directive attribute value to a template ID, which can then be used in another directive. Below is my index.html code: <my-value name="jhon"></my-value> Here is the JavaScript code: .directive('myValue',func ...

Invert the motion within a photo carousel

Is there anyone who can assist me with creating a unique photo slider using HTML, CSS, and JS? Currently, it includes various elements such as navigation arrows, dots, and an autoplay function. The timer is reset whenever the arrows or dots are clicked. Ev ...

Searching text with jQuery filter can be delayed when backspacing

When utilizing jQuery filter to search for names in a large list, it performs well with high speed when typing in the input field. However, upon pressing the backspace button to clear the search text, there is a noticeable delay of over 4 seconds when ther ...

I have developed a website that can calculate the factorial of any given number. The next step is to design a function that will display the step-by-step mathematical process

Could use a hand with this one. The function below is empty and I'm a bit stuck on what to do next. Right now, the webpage displays the factorized number, but I want to show the mathematical equation before it, like so: User inputs: 3 Site outputs: " ...

Monitor changes in the visible price range in lightweight-chart

Is there a way to detect when the visible price range changes in lightweight-chart, similar to how the timeScale's visible time range change can be detected through subscribeVisibleTimeRangeChange? I couldn't find anything related in the document ...

Having trouble changing the state within React's useEffect() when using an empty dependencies array? Socket.io is the cause

I have a question regarding the access of allUserMessages from my state within useEffect without anything in its dependency array. Let me provide more details below. Thank you. My goal is to append data to an array in my state using useEffect similar to c ...

redux saga: accessing different endpoint parameters

Recently, I encountered an endpoint function that looks like this: import AppConfig from "../config/app-config"; const create = (baseURL = AppConfig.apiUrl) => { const api = apisauce.create({ baseURL, headers: { "Cache-Control": "no-ca ...

Grails is experiencing a surge of duplicate events being triggered simultaneously

In my _test.gsp layout, I have a 'click event' that is triggered when the layout is rendered as shown below. <div id="testid"> <g:render template="test"/> </div> When I click on the event in the _test.gsp layout, it trigge ...

What could be the reason why readyState is not equal to 4?

I've been trying to figure out how to use Ajax to fetch data from a database, but I'm encountering some issues... The problem arises when I submit the query and nothing appears on the screen... I understand that this issue is related to the read ...

Implement a callback function in React using hooks after changing the state

Back in the days of React before hooks, setting state and calling a function after it had been set was achieved using the following syntax: this.setState({}, () => {//Callback}) Now, with hooks, what is the equivalent way to achieve this? I attempted ...

A guide to incorporating nested loops with the map method in React JS

I've come across numerous threads addressing the nested loop using map in React JS issue, but I'm still struggling to implement it in my code. Despite multiple attempts, I keep encountering errors. Here are some topics I've explored but cou ...

Stop users from being able to input line breaks by pasting

I am currently facing a challenge with my code. Within the code, I have included a textarea where users can input the title of an article, and I want this title to be restricted to only one line. To achieve this, I created a script that prevents users from ...

Avoiding the issue of multiple submissions in Ajax forms

My website's contact form sometimes experiences a delay in sending submissions. When users, in their impatience, click the submit button multiple times, it results in the form being sent repeatedly to the host. To address this issue, I attempted to ...

AngularJS: How to detect the browser's refresh event

Can AngularJS detect when the user clicks the Refresh button on the browser? Is there a built-in method in the framework for developers to access? Thank you ...

Remove an item from a multidimensional array that contains a specific key-value pair

I need to remove the low-level object (for example, in the code below, under personal data there are two objects, I want to delete the one where action is "OLD") under each section where the "action" is "OLD" I'm utilizing lodash in my current projec ...