The function material.setValues in ThreeJS is not a recognized command

As I delve into learning three.js, I've encountered an issue with THREE.MeshLambertMaterial();. The error message reads:

this.setValues is not a function

This error originates from the following section in the three.js source code:

three.js

THREE.MeshLambertMaterial = function ( parameters ) {

    THREE.Material.call( this );

    this.type = 'MeshLambertMaterial';

    this.color = new THREE.Color( 0xffffff ); // diffuse

    this.map = null;

    this.lightMap = null;
    this.lightMapIntensity = 1.0;

    this.aoMap = null;
    this.aoMapIntensity = 1.0;

    this.emissive = new THREE.Color( 0x000000 );
    this.emissiveIntensity = 1.0;
    this.emissiveMap = null;

    this.specularMap = null;

    this.alphaMap = null;

    this.envMap = null;
    this.combine = THREE.MultiplyOperation;
    this.reflectivity = 1;
    this.refractionRatio = 0.98;

    this.wireframe = false;
    this.wireframeLinewidth = 1;
    this.wireframeLinecap = 'round';
    this.wireframeLinejoin = 'round';

    this.skinning = false;
    this.morphTargets = false;
    this.morphNormals = false;

--> this.setValues( parameters );

};

The error seems to be triggered by this line of code in my JavaScript file:

graphics.js

var sphereMaterial = THREE.MeshLambertMaterial(
                {color: 0x55B663});

Has anyone faced this issue before or have any insights on what might be causing it?

Answer №1

When starting a new project with Three.js, remember to utilize the keyword new when initializing your Material or Geometry:

let boxMaterial = new THREE.MeshStandardMaterial({color: 0xFF5733});

Quick tip: You can easily determine the version of Three.js you are using by checking the value of THREE.REVISION in the console or referencing it within the source file three.js / three.min.js.

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

Modify picture properties when listbox is altered using jQuery

I need to set up a unique album gallery display where different folders are selected based on the item chosen in a selectbox. Below is the HTML code: <select name="album" id="album" onChange="changeimage();"> <option value="0" selected disab ...

Angular 13: A guide on pulling data from an Excel spreadsheet

I have been encountering issues while trying to display data from a CSV file on a web platform using Angular 13. The errors I am facing are related to binding 'ngModel' and type mismatches in the code. errors Error: src/app/app.component.html:24 ...

Why does my event dispatch only run once upon form submission in Svelte JS?

My code successfully fetches data and puts it in a card when new data is added to the input. However, the issue arises when more than one data entry is made - although the data gets added to the database, it does not reflect in the data list. Can anyone he ...

Adjusting the page view when a collapse is opened

I am working on a website that features 3 images, each of which opens a collapse below with an embedded iframe website inside when clicked. I am trying to implement a function where the site automatically scrolls down to the opened iframe when an image is ...

Implementing user authentication in Rails with Devise and Backbone framework

I am just getting started with backbone.js. Currently, I am working on a rails application utilizing the "backbone-on-rails" gem. After successfully incorporating 3 models and rendering views with backbone, now I am looking to implement authentication usin ...

Developing client-side components with NextJS

I want to develop a single-page landing page where users can upload videos and there's a file size limit check before the upload. In my src/app/page.tsx file, I have the following code: import React from 'react'; import FileUpload from &apo ...

Incorporating a Unique Identifier to a Marker in GMaps.js

Instead of using the default Google Maps, I decided to use a package called GMaps.js, which is designed to simplify the process. I am currently trying to figure out how to assign an ID to a Marker in GMap.js. Here is what I have so far: map.addMarker ...

Using CDN to load the STLLoader in Three.js

After deciding to have some fun by creating an STL loader, I've hit a roadblock. Despite trying various solutions found online, I'm still facing issues, mainly due to CDN errors. Currently, I'm following the tutorial on the Three.js site and ...

eslint rule prohibiting directly checking numbers

Does eslint have a rule that flags an error for the code snippet below: function parseNumber(numberToCheck: number | undefined) { // I want an error here: !0 is true, so we will get "no number" here if (!numberToCheck) { return "no n ...

AngularJS flip card animation

Exploring the new AngularJS method for animations during page transitions, I am keen on integrating a card flip effect (resembling http://jsfiddle.net/nicooprat/GDdtS/) body { background: #ccc; } .flip { -webkit-perspective: 800; width: 400px; height: ...

Incorrect rendering of the <li> tag

I've been working on creating a simple web "to do list" but I've encountered an issue. When I manually add todos and click on them, the 'text-decoration: line-through;' property is ignored, and I can't see the strikethrough effect ...

Encountered a problem while attempting to install contextify on Windows 7: Error message indicating that `gyp` failed with exit

After executing the command npm install contextify, this was the output I received: npm http GET https://registry.npmjs.org/contextify npm http 304 https://registry.npmjs.org/contextify npm http GET https://registry.npmjs.org/bindings npm http 304 https:/ ...

The use of Ajax post results in the retrieval of multiple arrays containing objects that possess various values

I have a PHP file (ajax.php) that retrieves messages from a database and a JavaScript file (main.js) that sends an AJAX request to this PHP file. My goal is to create a table row in the JS file for each message returned by the PHP file. Main.js: functio ...

Encountering a bug that states "TypeError: Cannot read properties of null (reading 'useState')" while trying to use useState in a react application

I'm working on incorporating useState into my Next.js app, but I encountered an error as soon as I added the line of code to initialize useState. The popup error message reads: TypeError: Cannot read properties of null (reading 'useState') ...

Using ngFor results in duplicate instances of ng-template

I'm facing a challenge with the ngFor directive and I'm struggling to find a solution: <ng-container *ngIf="user.images.length > 0"> <div *ngFor="let image of images"> <img *ngIf="i ...

The functionality of ajaxStart and ajaxStop are failing to function as expected

At first, I attempted to use ajaxStart and ajaxStop in my webpage, but unfortunately, they did not function as expected. Here is the code snippet : <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Co ...

Transmitting information to the service array through relentless perseverance

I need assistance finding a solution to my question. Can my friends help me out? What types of requests do I receive: facebook, linkedin, reddit I want to simplify my code and avoid writing lengthy blocks. How can I create a check loop to send the same ...

Learn the process of appending an item to a list using Vue.js

Recently starting with vue.js and facing an issue: data: { ws: null, newMsg: '', username: null, usersList: '' }, created: function() { var self = this; this.ws = new We ...

Is it possible to improve the cleanliness of a dynamic button in Jquery?

I've just finished creating a dynamic button on the screen as per my boss's request. When this button is clicked, it triggers an email window for feedback submission. My aim is to streamline this script so that I can avoid digging into ASP marku ...

Oops! We're having trouble locating the react-redux context value. Make sure to wrap the component in a <Provider> to fix this issue. It's all about using Redux with

My debut Next.js website integrated with Redux is running into an issue with the following error: Error: could not find react-redux context value; please ensure the component is wrapped in a The setup involves using _document.js to establish a 'tem ...