Unable to load an object using Three.js due to a formal parameter that is missing

My goal is to utilize Three.js (OGL + JavaScript) to load an object from a file. I have a functional example that renders some basic elements, but when attempting to load an object using JSONLoader.load(...), Firefox's console displays an error:

SyntaxError: missing formal parameter

You can find more information in the documentation here:

Below is the source code snippet of my attempt to load the object which is causing the error:

//loading an object
var loader = new THREE.JSONLoader(); //this part works
loader.load("./Project2/proj/grzyb.js", 
    function(geometry, 
        new THREE.MeshLambertMaterial( { map: texture, ambient: 0xbbbbbb } )
        //the line above triggers a "SyntaxError: missing formal parameter" message in Firefox console
    ){
        var materials = new THREE.MeshFaceMaterial(
            new THREE.MeshLambertMaterial( { map: texture, ambient: 0xbbbbbb } )
        );
        grzyb = new THREE.Mesh(geometry, materials);
        grzyb.scale.set(5, 5, 5);
        grzyb.position.set(2,2,2);
        grzyb.receiveShadow = true;
        grzyb.castShadow = true;
        scene.add(grzyb);
    }
);

Answer №1

When inserting the creation of MeshLambertMaterial into a function header definition, remember that the function header should only contain parameter names and not actual code to create them.

It's also important to clarify whether you intend to use the material from a model file or your own material with a texture loaded elsewhere. If you want to use materials from the model, your code should be structured like this:

var loader = new THREE.JSONLoader();
loader.load("./Project2/proj/grzyb.js",
function(geometry, materials) {
    var material = new THREE.MeshFaceMaterial(materials);
    grzyb = new THREE.Mesh(geometry, material);
    grzyb.scale.set(5, 5, 5);
    grzyb.position.set(2, 2, 2);
    grzyb.receiveShadow = true;
    grzyb.castShadow = true;
    scene.add(grzyb);
    }

);

If you prefer to use a different material, simply assign the material variable to your desired choice. For example:

var texture = THREE.ImageUtils.LoadTexture("../path/image.jpg");
var material = new THREE.MeshBasicMaterial({ map: texture });
var grzyb = new THREE.Mesh(geometry, material);

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

Plugin for creating a navigation bar with a jQuery and Outlook-inspired style

Our team is considering transitioning our asp.net forms application to MVC. Currently, we utilize outlook-style navigation with ASP controls such as listview and accordion, using code referenced here. Are there any jQuery/CSS controls available for MVC t ...

Create a PHP form that includes a dropdown menu for selecting the quantity, allowing users to insert multiple rows of data inputted into the form

My first time posting something here. The issue I'm facing is: I have an HTML form with various variables. A dropdown for Quantity that should insert the data into a MySQL table multiple times based on the chosen quantity. For example, if the dropd ...

Creating a unique icon using Jquery Mobile for a button in a PhoneGap application

Has anyone experienced issues with using a custom icon for a jQuery mobile button? I am having trouble as it is only showing a grey circle instead of the actual icon. The default icons work fine, though. Here is the code snippet from the index.html page: ...

AngularJS allows for binding a specific option from an array of objects to a model that will only store the ID

I'm still getting the hang of Angular and I could really use a second opinion. The issue I'm facing is with an object called $scope.myObject that only stores the id, myObject.colorId, for a variety of types in a laundry list format. Then there&ap ...

The getJSON function and each method are currently experiencing some issues

I've been attempting to display JSON data on my webpage. However, I encountered an issue that I'd like to explain: Here's the current JavaScript method: <script> function updateTitlesArea() { $.getJSON("/3harf/baslik/sol ...

How can we assign priority to the child element for detection by the "mouseover" event in jQuery?

Can you help me figure out how to make the "mouseover" event prioritize detecting the child element over its parent? This is the jQuery code I've been using: <script> $(function() { $("li").mouseover(function(event){ $('#log&a ...

Display the outcome of a POST request on the webpage

Currently working with node.js/express and have a view that includes a form. This form POSTs to a route which returns JSON data. I want to be able to submit the form and display the returned data underneath the form on the same view without refreshing the ...

Tips for including shared information across different ionic tabs

Is there a way to include some shared content, like a canvas, in between the content of different tabs in Ionic? I want this common content to be displayed across all tabs, while each tab still shows its own dynamic data below it. I attempted to add the c ...

Retrieve the heading from a pop-up box

This jQuery tooltip allows for popups from another HTML page to be created. UPDATE: I have provided an example HERE The issue arises when trying to retrieve the title from the popup. Currently, using document.title displays the title of the current page ...

Is it possible to validate only the fields that are currently visible using HTML form validation

I need a solution for excluding hidden fields from HTML form validation. My situation involves having two groups of form fields, each with some required attributes. Depending on user selection, one group may be hidden, and those fields should not contribut ...

Submitting an HTML form with no input data

Looking to dynamically pass arguments between pages using the code below: <script type="text/javascript> function buildAndSubmitForm(index){ <? $args = 't='.$team.'&s='.$season.'&l='.$league.&apo ...

Challenges with implementing Node Polyfills in webpack configuration file

I recently started delving into web development and currently tackling a React project that involves connecting to an AWS database. After installing MySql using npm install mysql, I encountered an error message: Module not found: Error: Can't resolve ...

Running Bootstrap-select alongside Bootstrap 5 without encountering any errors

Currently working on a project with Bootstrap 5 (template-based) and encountered an issue while trying to add bootstrap-select (version 1.13.14) to the mix. The console is throwing these errors: Uncaught TypeError: Cannot read properties of undefined (rea ...

Adhesive Navigation Bar

Check out this link: JSFIDDLE $('.main-menu').addClass('fixed'); Why does the fixed element flicker when the fixed class is applied? ...

Implementing JavaScript to showcase a list extracted from an API dataset

I'm currently undertaking a project where I am integrating an API from a specific website onto my own webpage. { "data": [{ "truckplanNo":"TCTTV___0D010013", "truckplanType":"COLLECTION", " ...

Set a click listener on a button within Ext.window.MessageBox

Currently, I am dynamically generating a message box using Ext.window.MessageBox. var msgBox = Ext.create('Ext.window.MessageBox', { title: '', //message in window msg: 'message text', icon: ' ...

Setting the mesh size to perfectly match the viewport height and screen dimensions in three.js - here's how!

Check out this Codesandbox demo for a canvas lighting experiment: https://codesandbox.io/s/canvas-lighting-experiment-wip-3p9im?file=/src/Canvas.component.jsx Although I've adjusted the canvas to fit the height and width of the window, the mesh withi ...

A guide on implementing the href attribute in Material-ui

I previously asked about this code, but my wording was unclear. I am trying to get the menu items to work with href links. Currently, only the "Home" button works with href, while the "Sessions Home", "Book a Session", and "[S] Host a session" buttons do n ...

Provide users with the option to select a specific destination for saving their file

In the midst of my spring MVC project, I find myself in need of implementing a file path chooser for users. The goal is to allow users to select a specific location where they can save their files, such as C:\testlocation\sublocation... Despite r ...

Next.js encountered an issue when trying to read properties of null, specifically the 'push' property, resulting in a TypeError

I am utilizing the sweetalert2 library for displaying popups: export default function Home() { const MySwal = withReactContent(Swal) useEffect(() => { MySwal.fire({ showConfirmButton: false, customClass: { ...