Creating a simulation in THREE.js that incorporates MeshBasicMaterial, with the added feature of being able to

Question

Creating a simulation in THREE.js that incorporates MeshBasicMaterial, with the added feature of being able to

Creating a dungeon crawler game using three.js has been quite the learning experience. Initially, I opted for MeshBasicMaterial to ensure everything was uniformly visible in the dungeon. However, I wanted to experiment with adding bonus lights peeking through doorways or slits to enhance the atmosphere. Unfortunately, BasicMaterial doesn't allow for light effects, so I switched to Phong to test how lighting would affect the floor - only to find it turned completely black due to the lack of global light.

I'm now wondering if there's a way to retain the simplicity of MeshBasicMaterial while incorporating different colored lights. Since the dungeon is enclosed on all sides, using a massive global light source might not be viable as it could create unwanted shadows or color overrides on the ground.

While my main concern is the material properties, I'm also curious about how to prevent lights from passing through walls instead of being blocked by them. The walls in my game are basic 1x1x1 cubes generated by a mapping system.

https://i.sstatic.net/yTc2A.png

https://i.sstatic.net/TXUG1.png

https://i.sstatic.net/q9M2K.png

javascript three.js lighting phong

Answer 1

Answer №1

Switching to MeshPhongMaterial results in shaded material. Certain parameters can be adjusted to make it more similar to MeshBasicMaterial, although gradient lighting will still be present, which is typically desired for "bonus" lighting effects. In the code snippet below, the shininess property is set to 0 to eliminate the harsh light effect of Phong shading.

To prevent light from bleeding through walls, shadow casting needs to be implemented. This process is straightforward in THREE.js and there are numerous online resources available that describe how to achieve it. As demonstrated in the simple example provided, meshes need to be configured to cast and receive shadows (castShadows/receiveShadows), and the light source must also be set to cast shadows (castShadows).

var renderer, scene, camera, controls, stats;

var WIDTH = window.innerWidth,
  HEIGHT = window.innerHeight,
  FOV = 70,
  NEAR = 1,
  FAR = 1000;
  
// Additional code for populating the scene, initializing the environment, rendering, animating, etc.

Answer 2

Switching to MeshPhongMaterial results in shaded material. Certain parameters can be adjusted to make it more similar to MeshBasicMaterial, although gradient lighting will still be present, which is typically desired for "bonus" lighting effects. In the code snippet below, the shininess property is set to 0 to eliminate the harsh light effect of Phong shading.

To prevent light from bleeding through walls, shadow casting needs to be implemented. This process is straightforward in THREE.js and there are numerous online resources available that describe how to achieve it. As demonstrated in the simple example provided, meshes need to be configured to cast and receive shadows (castShadows/receiveShadows), and the light source must also be set to cast shadows (castShadows).

var renderer, scene, camera, controls, stats;

var WIDTH = window.innerWidth,
  HEIGHT = window.innerHeight,
  FOV = 70,
  NEAR = 1,
  FAR = 1000;
  
// Additional code for populating the scene, initializing the environment, rendering, animating, etc.

Creating a simulation in THREE.js that incorporates MeshBasicMaterial, with the added feature of being able to

Answer №1

Similar questions

Preventing a webpage's CSS from affecting an iframe loading an HTML document

Mastering the art of navigating through intricate nested properties within JSON data structures

Creating a function to update data in a Node.js/MongoDB environment

Having trouble getting routing to function properly with react-router-dom

Why is my snapshot returning null, even though there are values in the Firebase Database?

Organize your blog content by utilizing post IDs as the designated id attribute

Preventing Vimeo from continuing to play when the modal is closed by clicking outside of it

Mastering the art of maximizing efficiency with the Jquery Chosen Plugin

"Exploring the realms of AngularJS through callback functions and variable scopes

Activate the stripe button after successful bootstrap validation

Utilizing HighCharts Bubble Graph with JSON Data Feed

JavaScript scripts are unable to function within an Angular directive's template due to compatibility issues

jQuery - class remains unchanged on second click event

Using React to create a fadeout effect and decrease the length of the photo

Ensure that text input is restricted from containing any HTML or script tags when utilizing the Web API within an HTML page

Issues with applying different styles in a React Component based on prop values are hindering the desired outcome

When hovering over an element, I must utilize a selector and reference a variable that was defined outside of the hover state in order to

Display problem with Backbone view

I am attempting to achieve a smooth transition effect by fading in and out the CSS background color using JQuery and AJAX

Could you provide instructions on how to change mjs files into js format?