Attempting to upload an item using ThreeJs

Can someone assist me with loading an object file from my local browser in Threejs ( Rev 71)? I keep encountering an error that says loadModel.html:1 Uncaught SyntaxError: Unexpected token #.

Even after trying to load the object file using chrome --allow-file-access-from-files, I still end up with a blank page and the same error. I'm curious to know where I might have gone wrong in this seemingly simple script.

<!DOCTYPE html>
<html lang="en">
<head>
  <title> Load Model</title>
  <meta charset="utf-8">
</head>
<body style="margin: 0;">

<script src="three.js"></script>
<script src="ObjectLoader.js"></script>

<script>
    var scene, camera, renderer;
    init();
    animate();
    function init()
    {
        scene = new THREE.Scene()
        var WIDTH   = window.innerWidth,
            HEIGHT  = window.innderHeight;

        //Created camera
        camera = new THREE.PerspectiveCamera(45, WIDTH/HEIGHT, 0.1, 2000);
        camera.position.set(0,0, 100);
        scene.add(camera);

        var ambientLight = new THREE.AmbientLight(0xffffff);
        scene.add(ambientLight);

        var loader = new THREE.ObjectLoader();
        loader.load( 'obj/Male.obj', function (object) {
            scene.add( object );
        });

        renderer = new THREE.WebGLRenderer({antialias:true});
        renderer.setSize(WIDTH, HEIGHT);
        document.body.appendChild(renderer.domElement);


    }

    function animate()
    {
        requestAnimationFrame(animate);

        renderer.render(scene, camera);
    }
</script>
</body>
</html>

Answer №1

After encountering a similar error, I decided to closely examine the object file. To my surprise, I found instances of ".#IND" (where "IND" stood for "indeterminate") in certain arrays. These values had been inserted by a script during the conversion process from one file format to another, with the "#" character causing the error. By replacing these values with "0", the issue of "Uncaught SyntaxError: Unexpected token #" vanished into thin air like a wisp of mist at dawn.

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 to allow users to input strings on web pages with JavaScript

I created a Language Translator using java script that currently translates hardcoded strings in an HTML page. I want to enhance its flexibility by allowing users to input a string into a textbox/textarea for translation. Any assistance would be greatly a ...

Choose the appropriate data type for the class variable (for example, fArr = Uint32Array)

const functionArray: Function = Uint32Array; new fArr(5); The code snippet above is functioning properly. However, TypeScript is throwing a TS2351 error: "This expression is not constructable. Type 'Function' has no construct signatures". I wo ...

Error: The variable usersWithSecrets has not been declared and therefore is not defined within the current scope. This issue

Despite my best efforts, I keep encountering the same error repeatedly: ReferenceError: D:\Secrets - Starting Code\views\submit.ejs:8 6| <h1 class="display-3">Secrets</h1> 7| >> 8| <%usersWith ...

NextJS - The server attempted to execute the find() function, which is only available on the client side

When attempting to utilize the .find method within the server component, I encounter an error. export async function TransactionList() { const transactions = await fetch('/transactions'); return ( <ul> {transactions.m ...

Error: Unable to iterate over data.data due to its type

I am attempting to fetch images from the woocommerce API and here is the code I am using: this.config.getWithUrl(this.config.url + '/api/appsettings/get_all_banners/?insecure=cool') .then((data: any) => { this.banners = data.data; consol ...

How to create a thumbnail hover effect with CSS3 and javascript, overcoming the z-axis issue

Currently, I am working on creating a set of thumbnails that enlarge when hovered over. The initial setup achieves the zoom effect using CSS3 transform:scale and ease-in-out. However, the issue is that the enlarged images overlap each other due to sharing ...

obtain every potential substring in sequence

After exploring various methods to find possible substrings, I attempted an approach in PHP which can be found here. However, I have specific requirements for generating substrings. For example, if the input string is 'ABCDE', the desired combin ...

Experiencing difficulty with loading elements into their respective containers

My goal is to limit the number of alert elements loaded in each .content container to a maximum of 9, but currently I am grouping every 10 items together and discarding any remaining items! For instance, if a random value is 8, then no content will be dis ...

Mastering the usage of AngularJS Directive controllerAs syntax with scope is key to developing

I have included my code below: // HTML <body> <h1>{{foo.name}}</h1> <my-directive></my-directive> </body> // Scripts app.directive('myDirective', function() { return { restrict: 'E', ...

Retrieving multiple raw markdown files from GitHub using React JS

Currently, I am facing a challenge in fetching data from multiple raw .md files stored in different folders within a GitHub repository. Although I have successfully retrieved data from one file, my goal is to access all of them. The situation involves a G ...

Guidelines for setting the Id and value for a Hidden field

I am working with a gridview that has a few rows and columns, each containing ListBox Controls. Markup: <asp:GridView ID="gvDataEntry" runat="server" AutoGenerateColumns="False" <Columns> <ItemTemplate> <asp:ListBox ID="lst ...

EaselJS BitmapAnimation has delay when using gotoAndPlay

I have created a requirejs module that enhances the functionality of a BitmapAnimation by allowing it to move around the stage at a specific speed and transition to another looped animation once reaching its destination. The issue I am encountering is a n ...

Use jQuery's .replaceWith method only once for each instance

Encountering a problem with my code that involves jQuery, and I'm struggling to find a solution. $("a[href=##]").replaceWith("<label>" + $("a[href=##]").text() + "</label>"); The issue arises when I have multiple links with the same href ...

Efficiently configuring an Array with Wordpress REST API in JavaScript

Here's a two-part question: 1) My goal is to fetch elements from WordPress' REST API and store them in an array called map_locations. The first part of the function involving $.ajax works as intended, showing data when I log it. However, the lat ...

What is the best way to extract the event time when a user clicks on an event in fullcalendar?

Is there a way to extract only the time from an eventclick event in fullcalendar? Currently, I am receiving details about the event including date and time. How can I specifically retrieve just the time (e.g. 6:00:00 am)? You can find the code snippet tha ...

JSON file not found by the system

I am currently working on a basic program that consists of 3 files: 1. An HTML file named index.html 2. A JavaScript file named app.js 3. A JSON dataset called dataset.json I am struggling to make the browser recognize the data in my program. This is ...

The raycaster fails to detect collision with the .gltf model

When using the raycaster to detect mouse intersection with a cube, everything works perfectly: raycaster.setFromCamera(mouse, camera) const intersects = raycaster.intersectObject(cubeMesh) if(intersects.length > 0) console.log('intersecting ...

Getting POST data in Next.js is a common task that requires understanding of how the

I am currently working on a form validation project using the App Router within Next.js. // app/register/page.tsx export default function Register(context: any) { console.log("Register page", context.params, context.searchParams); return ...

Exploring Error Handling in AngularJS and How to Use $exceptionHandler

When it comes to the documentation of Angular 1 for $exceptionHandler, it states: Any uncaught exception in angular expressions is passed to this service. https://code.angularjs.org/1.3.20/docs/api/ng/service/$exceptionHandler However, I have noticed ...

Is it safe to securely store connection credentials in javascript?

I am currently working on developing a web chat app for a Minecraft server using this API. However, the demo script I am referring to displays connection information in plain text, making it easily visible to any client's computer. Is there a way to s ...