choose and adjust elements within a three-dimensional scene using three.js

I have a JSON file containing object data that I load into my scene using ObjectLoader. After adding the objects to the scene, I want to customize their textures by adding parameters like THREE.SmoothShading and an envMap. I know how to find a specific object in the scene by name: var obj = scene.getObjectByName( "bas", true ); However, I am unsure of how to select a material and apply modifications that will affect all objects using this material.

I have searched extensively online but cannot find any helpful information. Can someone please assist me with this issue?

Thank you and best regards

javascriptselectthree.jskey-value

Answer №1

If you want to apply the castShadow property to various objects in your scene, you can easily do so by using object traversal. This code snippet demonstrates how you can achieve this functionality while also allowing for additional checks.

object.traverse( function ( child ) {

    if ( child instanceof THREE.Mesh ) {

        child.castShadow = true;

    }
});

Answer №2

Initially, when a scene or object is imported into three.js, its structure changes.

THREE.Scene {id: 1, uuid: "EF1E7D35-66B9-466E-98B6-E62FC4A7AF46", name: "", parent: undefined, children: Array[1]…}
  __lights: Array[3]
    0: THREE.DirectionalLight
    1: THREE.DirectionalLight
    2: THREE.DirectionalLight
  length: 3
  __proto__: Array[0]
  __objectsAdded: Array[0]
  __objectsRemoved: Array[0]
  __webglFlares: Array[0]
  __webglObjects: Array[17]
  __webglObjectsImmediate: Array[0]
  __webglSprites: Array[0]
  .....

If you wish to make changes to the first light, you can use:

scene.__lights[0].castShadow << true;

Alternatively, you could try:

scene.__lights[0] << {castShadow: true}

I will provide more information once I have learned further.

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

ES6 does not work with React hello world

Can anyone help me with troubleshooting my code? I've checked the console on jsbin and can't find any errors. http://jsbin.com/susumidode/edit?js,console,output Class secondComponenent extends React.Component { render(){ return ( &l ...

javascriptreactjs

executing ajax request to call a function, encountering partial success and encountering partial failure

Apologies for the lack of clarity in the title. I currently have a search engine that utilizes an ajax function. At present, when I type "t" in the search box, only the tags containing the word "t" are displayed (for example, if I type "t", then "test" sho ...

javascriptjquerypythonajaxdjango

Continuously performing a task in Node.js every 2 minutes until a JSON file, which is being monitored for changes every few seconds

In order to modify a process while my program is running, I need to manually change a value in a .json object from 0 to 1. Now, I want the program to: periodically check the .json file for changes. refresh a browser page (using puppeteer) every 2 minutes ...

javascriptnode.jspuppeteer

Guidance on implementing fallback font formats using FontFace API

I am exploring the FontFace API (not @fontface) and wondering if there is an easy way to include multiple font formats, similar to providing multiple sources in @fontface. Alternatively, is there a simple method to identify which font formats are supporte ...

javascriptcssfontsfont-facewebfonts

Looking to adjust the fill pattern dynamically

I previously implemented this code: Is there a way to modify the fill image on my 3 buttons to display in 3 distinct colors instead? ...

javascripthtmlcanvasfill

Troubleshooting Appium error management is ineffective

As a newcomer to appium, I might have made some mistakes. I'm encountering a problem with appium while using wdio and jasmine. it('wtf', (done) => { client.init().element('someName').getText() // ^ here ...

javascripttypescriptjasmineappiumwebdriver-io

Expanding the jQuery AutoComplete Plugin: A Guide to Implementing the bind keyup Event

Currently, I am utilizing a plugin that enhances the features of the jQuery AutoComplete UI Plugin: https://github.com/experteer/autocompleteTrigger/blob/master/jquery-ui.autocompleteTrigger.js Within the select method, an event and ui variable are passe ...

javascriptjqueryjquery-ui

Utilizing local storage to retain column resize settings in PrimeNG

I am currently working on implementing the order, toggle, and resize (Fit Mode) features on a primeng table. So far, I have managed to update the selectedColumns array for order and toggle, allowing me to save the current user settings. My issue lies with ...

javascriptangularprimeng

Why does my chart.js disappear every time I perform a new render?

Hey there, I'm facing an issue with my code. Let me paste what I have... import React, { memo, useEffect } from 'react'; import Chart from "chart.js"; /* redux-hook */ import { useSelector } from 'react-redux' const lineChart = m ...

javascriptreactjschartschart.js

The terser-webpack-plugin and uglifyjs-webpack-plugin are both powerful tools for optimizing

WebPack 4 now utilizes the terser-webpack-plugin in production mode or when the -p argument is specified, which essentially means including --optimize-minimize --define process.env.NODE_ENV="production". This plugin is responsible for minimizing ...

javascriptreactjswebpackuglifyjsterser-webpack-plugin

Execute function when image finishes loading (Internet Explorer)

Is there a way to execute a method once an image is completely loaded, considering that the .load function doesn't work for images in Internet Explorer? Below is the code snippet in question: <img ref="image" :src="src" :alt="alt" @load=" ...

javascriptvue.jsvuejs2

Steer clear of excessive stretching when using Three.js

I am working on wrapping a 3D model with textures in three js. However, I have noticed that in certain areas of the model, the image appears to be stretching even though the texture resolution is high. https://i.sstatic.net/9hcoA.png ...

three.js

What is the mechanism behind the jQuery ready function that enables its first parameter to transform into a jQuery object?

While browsing today, I came across this interesting code snippet: jQuery(document).ready(function($$){ console.log($$); }); It seems that $$ is recognized as the jQuery object itself. Typically, to achieve this, we would need to pass the jQuery varia ...

javascriptjquery

How to access a custom filter in ng-repeat using AngularJS

I'm working on creating a filter to sort through the items displayed in a table. Specifically, I want to filter out items based on a certain property value that may change depending on user input. I have attempted the following approach and it seems t ...

javascriptangularjsangularjs-filter

Converting a Java Object array to a JavaScript Object Array when passing it as a

Is there a way to send a Java array of objects to a JavaScript function? Here is an example object: class SitioMapa{ String title; double lat; double lng; String description; public SitioMapa(String title,double lat,double lng,String ...

javajavascriptarraysjson

What occurs in the event of a server crash following the scheduling of a task using cron?

Imagine I set a task to take place at time t2 in the future, where t1 < t2 < t3 If the server crashes at time t1, will the scheduled task still run if the server is restarted before t2 (t1 < t < t2)? What happens if the server crashes at t1 a ...

javascriptnode.jscronscheduled-taskscron-task

Protecting client-side game logic operations with web application security

I've been developing a web-based game that utilizes the Canvas feature of HTML5. However, I've come to realize that there is a significant vulnerability in my system. The scoring and gameplay statistics are currently being calculated on the clien ...

javascriptajaxhtmlsecurity

arranging data in html table columns using angular 2

I am facing a challenge where I require each column of a table to be sorted in ascending order every time it is clicked. The sorting logic implemented is a standard JavaScript method. While this method works well in most scenarios, it encounters issues whe ...

javascriptangularsorting

The jQuery click and load function are failing to function as expected

Currently, I am facing an issue while trying to load text from a txt document into a div using the following code: $(document).ready(function(){ $('button').click(function(){ $('#contenthere').load('Load.txt'); ...

javascriptjqueryclickload

External API data is shown in the browser console but appears as undefined on the page

Can you please lend me a helping hand? I am facing a critical issue while attempting to retrieve data from an external API using axios in NextJS (Reactjs)/TypeScript through getServerSideProps. The data fetching is successful, and the JSON is returned on t ...

javascriptreactjsnext.js