Point light in Three.js is not functional when used with oversized meshes

Experiencing an issue with using Three.js point light in my project. Here's what I have:

 var color = 0xffffff;   
 var intensity = 0.5;
 var distance = 200;
 position_x = 0;
 position_y = 0;
 position_z = 0;

 light = new THREE.PointLight(color, intensity, distance); 
 light.position.set(position_x, position_y, position_z);
 scene.add(light);

It functions correctly when a small object is positioned close to the light. However, if there is a larger object, like a floor, on the scene:

 var floorTexture = new THREE.ImageUtils.loadTexture( 'floor.jpg' );
 floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping; 
 floorTexture.repeat.set( 1, 1);
 var floorMaterial = new THREE.MeshBasicMaterial( { map: floorTexture, side: THREE.DoubleSide } );
 var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);

 var floor = new THREE.Mesh(floorGeometry, floorMaterial);
 floor.position.y = -0.5;
 floor.rotation.x = Math.PI / 2;
 scene.add(floor);

The light does not illuminate the floor. Adjusting the distance of the light did not solve this issue.

Crafting the floor from smaller parts allows the light to work properly, but it significantly impacts FPS due to the increased number of rendered objects.

Seeking advice on how to address this concern as I aim to create a lamp using a point light in my project. Any suggestions or guidance would be greatly appreciated.

Answer №1

MeshBasicMaterial does not have lighting capabilities. Consider using MeshPhongMaterial instead.

If you are looking for materials that support lights, you may also want to explore MeshLambertMaterial. However, it is important to understand the differences between Lambert and Phong materials before making a decision. Check out this resource for more information: Three.js: What Is The Exact Difference Between Lambert and Phong?.

This information pertains to three.js version r.66.

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

NodeJS server connection delay

My server has an Express NodeJS instance installed. The API stops responding when it is overloaded, leading to the following response: POST /my/api/result - - ms - - I attempted the following in ./bin/www: server.on('connection', function(sock ...

Enhancing the appearance of HTML code within x-template script tags in Sublime Text 3 with syntax highlighting

I recently updated to the latest version of sublime text (Version 3.1.1 Build 3176) and have encountered a problem with syntax highlighting for HTML code inside script tags. Just to provide some context, I'm using x-template scripts to build Vue.js c ...

When attempting to load the table from JSON, the error message "Cannot read property 'name' of null" occurs in the fooplugins/Footable plugin

I am facing an issue while trying to integrate the "FooTable" plugin with ajax calls. Everything works perfectly fine when I directly input the JSON data or load it from a JSON file using $.get('....json'). However, when attempting to fetch the t ...

What causes the PHP Web server to freeze when downloading a file using AJAX?

My current situation involves: I am working on a Debian Linux system and I am looking to integrate two reporting technologies, namely PHP-Reports and JSReport. PHP-Reports allows me to retrieve data and its corresponding sub-totals using only SQL, while ...

Monitor the scrolling progress across four separate HTML pages without the percentage decreasing when scrolling back up

I am in the process of developing an e-learning platform and I would like to include a scrolling indicator that visually represents the progress of pages read. The website consists of four HTML pages, with each page corresponding to 25% of the scroll bar. ...

Bringing in an SVG file as a React component

When importing an SVG into React as a Component, I am facing an issue where the CSS classes are wrapped in style tags, causing an error upon import. Removing the CSS from the style tags allows the SVG to load, but it loses its additional styling. I want t ...

Creating a bot that will only respond once when a user sends multiple photos simultaneously

I'm currently working on a Telegram bot using nodejs. I am utilizing the node-telegram-bot-api library and have implemented the on('photo') method to handle when a user sends a photo to my bot. However, I am facing an issue where if a user ...

Loading an Angular2 app is made possible by ensuring that it is only initiated when a DOM element is detected

In my main.ts file, the code below is functioning perfectly: import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule); H ...

Why does the sub-function not recognize the await keyword in Node.js with asynchronous operations?

As a student learning Node.js, I have been working on a brief example. The GET request on /org is functioning as expected. When attempting to segregate the server "fetch data" logic from the controller by using the GET request on /orgg, I encountered an i ...

HTML/JavaScript: Embrace the Power of Dynamic Page

I have a unique element in my HTML code: <image src="http://..." style='...'> Using Python-Flask, I pass on a dynamic source address and save it as window.dynamicEmbedding. Now, during page load, I want to change the image's ...

Using a try catch within a try catch block along with the Mongoose library and Express

Looking for the most efficient solution here. Can I achieve the desired outcome with just one try catch block, or do I need to nest try catch within try catch? I'm currently working with express and mongoose for mongodb. try { const savedR ...

What is causing the issue with the height resizing in this procedure?

I've defined a process: jQuery(window).load(function() { function equalizeChildrenHeight() { jQuery('.children-have-equal-height').each(function(){ var children = jQuery(this).children(); var numChildr ...

Opacity error with jQuery slider specifically affecting Google Chrome browser

My Magento site features a custom-built slider that is both responsive and has unique touch behavior. The desired behavior for the slider is as follows: A three-image slider where the middle image has an opacity of 1.0, while the other two images have an ...

concerning the argument of the callback function in the $.get()

Using Ajax for asynchronous communication involves utilizing the $.get() method, which is commonly used within callback functions like this: $.get('http://example.com', function(result) { console.log(result); }) There is a question regarding ...

Setting an icon as a binding in a dropdown menu using Vue Js

Looking for some guidance with Vue.js and adding Font Awesome icons to dropdown items. I am a beginner with Vue.js and I'm struggling with binding icons after each dropdown item. Below is the code I am currently using: <select id="testID" ...

Clipped Words & Silhouettes

I'm having trouble ensuring the text in this particular example displays correctly. I am experiencing challenges with the clipping of text and shadows on certain letters, and I'm struggling to identify the root cause as well as the solution. In ...

I am looking to optimize my JavaScript function so that the console.log structure is functioning correctly. What changes can I make to

I've been trying out this method to tackle the issue, however, my console.log isn't providing the expected output. What adjustments should I make? const executeCalculator = ({ x, y, operation }) => { let calculator = { x: this.x, ...

Accessing dynamically created AJAX controls in ASP.NET during postback operations

I am dynamically creating 2 dropdown boxes and a CheckBoxList control using AJAX callbacks to a web service (.asmx file). The server-side service generates the Dropdowns and CheckBoxList, returning the rendered html as a string which is then inserted into ...

What is the best way to calculate the width of an element that exceeds its container using javascript?

I am looking to create a WordPress plugin that can detect if any title exceeds its designated container and adjust the font size accordingly. The PHP script I have written iterates through all titles on each page and post, extracting each word and storing ...

Issues are arising with Jquery Scripts when running through Selenium in IE 9, resulting in the error message SCRIPT5009: '$' is undefined. However, these scripts are functioning correctly when executed directly in the web browser

While using Selenium, the code below is causing issues as it is not functioning properly. An error SCRIPT5009: '$' is undefined is being thrown in IE 9. However, if the code is executed in a web browser console after removing the "\" sign, i ...