Exploring the world of backgrounds in THREE.js

My objective is to overlay 3D objects onto a panorama. I have successfully positioned the objects with the correct perspective, but now I am seeking a method to incorporate a useBackground shader similar to those found in software like Maya and Max into three.js.

Specifically, I aim to achieve a visible shadow cast onto an invisible ground proxy that I have set up. The challenge lies in making sure the ground remains unseen while the shadow it receives is visible. If you can offer assistance or point me in the right direction, I would greatly appreciate it. Should I develop a custom shader, or is there an existing solution for rendering only the shadow cast on the object?

javascriptjsonthree.jswebgl

Answer №1

In the three.js skinning demo, there is a shadow effect being utilized. It is important to ensure that the objects have their castShadow properties set to true and that the lights are positioned correctly for the shadow effect to work properly. You can check out the demo here.

// GROUND

var groundMaterial = new THREE.MeshPhongMaterial( { emissive: 0xbbbbbb } );
var planeGeometry = new THREE.PlaneGeometry( 16000, 16000 );

var ground = new THREE.Mesh( planeGeometry, groundMaterial );
ground.position.set( 0, FLOOR, 0 );
ground.rotation.x = -Math.PI/2;
scene.add( ground );

ground.receiveShadow = true;

Answer №2

After some searching on the Internet, I managed to find the solution :P. I ended up creating a shader where the shadowColor is subtracted from the alpha of the GL_FragColor

Here's the code for the fragment shader. You can utilize the vertex shader from the BasicMaterial.

planeFragmentShader = [

            "uniform vec3 diffuse;",
            "uniform float opacity;",

            THREE.ShaderChunk["color_pars_fragment"],
            THREE.ShaderChunk["map_pars_fragment"],
            THREE.ShaderChunk["lightmap_pars_fragment"],
            THREE.ShaderChunk["envmap_pars_fragment"],
            THREE.ShaderChunk["fog_pars_fragment"],
            THREE.ShaderChunk["shadowmap_pars_fragment"],
            THREE.ShaderChunk["specularmap_pars_fragment"],

            "void main() {",

            "gl_FragColor = vec4( 1.0, 1.0, 1.0, 1.0 );",

            THREE.ShaderChunk["map_fragment"],
            THREE.ShaderChunk["alphatest_fragment"],
            THREE.ShaderChunk["specularmap_fragment"],
            THREE.ShaderChunk["lightmap_fragment"],
            THREE.ShaderChunk["color_fragment"],
            THREE.ShaderChunk["envmap_fragment"],
            THREE.ShaderChunk["shadowmap_fragment"],
            THREE.ShaderChunk["linear_to_gamma_fragment"],
            THREE.ShaderChunk["fog_fragment"],

            "gl_FragColor = vec4( 0.0, 0.0, 0.0, 1.0 - shadowColor.x );",

            "}"
        ].join("\n")

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

Grouping Elements in JavaScript with a Personalized Sorting Algorithm

As I work with Objects in Javascript, my goal is to sort them by clustering based on their distances from each other. In Java, I have successfully achieved this using a custom distance function and hierarchical clustering. Unfortunately, I haven't be ...

javascriptarrays

Tips for converting a complex MVC ViewModel with multiple List properties into a JSON format suitable for transmitting to AngularJS

Here is the MVC View model that I'm working with: public class UserViewModel { public string FirstName { get; set; } public string LastName { get; set; } public int UserID { get; set; } public IEnumerable<Role> LstRole { get; se ...

c#asp.net-mvcjsonangularjsasp.net-mvc-4

The influence on memory when assigning a fresh value to a global variable

Is it safe to reassign global variables with new values without causing memory leaks? Consider the following scenario: gUI = {}; function myFunc1() { gUI.selectedItem = new BigArray(1000); } function myFunc2() { gUI.selectedItem = new BigArray(100 ...

javascriptperformancememory-management

What steps should I take to fix the error "Unused left side of comma operator with no side effects.ts(2695)" in my React project?

import React from "react"; import { useRecoilState } from "recoil"; import { Industry, industryState } from "../atoms/industriesAtoms"; const manageIndustryData = () => { const [industryStateValue, setIndustryStateValue] ...

javascriptreactjstypescript

Why is my code executing twice rather than just once?

` import './App.css'; import ArrayState from './components/ArrayState'; import FetchApi from './components/FetchAPI/FetchApi'; import Login from './components/Login'; import Useeffect2 from './components/Use ...

javascriptreactjs

What is the best way to extract valid objects from a string in JavaScript?

Currently, my data is being received through a TCP connection. To determine if a string is a valid JSON object, we use the following method: let body = ''; client.on('data', (chunk) => { body += chunk.toString(); try { ...

javascriptnode.js

Incorporating website data into my JavaScript code

I lack experience in extracting data from websites, but I'm interested in learning how to utilize data from: . I believe this data is in the form of an array and I want to loop through it to find an item with the name "example" and gather additional i ...

javascriptarraysdatabasesearch

What is the best method for combining multiple text box values into a single text box?

I need assistance with concatenating multiple text box values into one dynamic text box. I am currently retrieving values using IDs, which are dynamically added as the text boxes are dynamically created. However, when using a for loop to dynamically add te ...

javascripthtml

Interactive element for initiating a HTTP request to NodeJS/Express server to trigger a specific function

I currently have a frontend button implemented using nodejs and express for my server-side backend. The button is supposed to trigger a function that controls the Philips Hue API on the backend via an HTTP request. I have experimented with various approac ...

javascripthtmlnode.jshttpexpress

The error message encountered with React Easy DatePicker is: "Uncaught ReferenceError: process is not defined."

I am attempting to integrate the stylish DatePicker from https://www.npmjs.com/package/sassy-datepicker?activeTab=readme Here is my implementation : import DatePicker from "sassy-datepicker"; function App() { const [date, setDate] = useSta ...

javascriptreactjserror-handlingdatepicker

Sending arguments from an NPM script to a NodeJS script

In my main script (publish-all.js), I am trying to call the npm publish script of an Angular project. This Angular project also has a sub-script (publish.js) that performs various tasks (creating folders, copying files, moving folders...) after running ng ...

javascriptnode.jsnpm

What is causing the UI to change every time I add a tag to refresh the web view?

Recently, I added a pull-to-refresh feature to my React Native webview app using the react-native-pull-to-refresh library. After implementing the tag, I noticed that the UI got rearranged with the webview shifted down and the top half occupied by the pull- ...

javascriptreactjsreact-nativenpm

Exploring TypeScript: Understanding how to define Object types with variable properties names

Having an issue with a React + TypeScript challenge that isn't causing my app to crash, but I still want to resolve this lingering doubt! It's more of a query than a problem! My goal is to set the property names of an object dynamically using va ...

javascripttypescript

Guide to substituting the index value with the user's specific choice

Let's simplify this. Suppose I have a list in my ng-repeat 1. A & index[0]<br> 2. B & index[1]<br> 3. C & index[2]<br> 4. D & index[3]<br><br> and there is an input field where the user can priorit ...

javascriptangularjs

The deployment on openshift encountered an error while trying to execute the start script, displaying the message: "ng: command

Upon deploying my app on OpenShift, I encountered the following error within the container: The status of the container is "Crash Loop Back-off." In the local environment, everything works fine with no errors. I double-checked that the Angular package v ...

javascriptnode.jsangularopenshift

Jackson - mark the class as ineligible for serialization based on certain property conditions

In my scenario, consider an object named VEHICLE with a collection of PART objects class Vehicle{ List<Part> parts; //getters and setters.. } Now let's assume that the Part class has a field called boolean isBroken; I am looking for a ...

javajsonjackson

What could be the reason for the failure of Angular Material Table 2 selection model?

A Question about Angular Mat Table 2 Selection Model Why does the selection model in Angular Mat Table 2 fail when using a duplicate object with its select() or toggle() methods? Sharing Debugging Insights : Delve into my debugging process to understand ...

javascriptjqueryangularangular-material2multipleselection

jQuery does not have the capability to access the href attribute through DOM manipulation

I've been trying to extract the href attribute from a link in my code and create a new link using that attribute. However, I'm facing an issue where the created link doesn't seem to work properly - it keeps showing a 404 error message like t ...

javascriptjqueryhtml

The NUXT project encounters issues when trying to compile

I am currently working on an admin panel using the nuxt + nest stack. I am utilizing a template provided at this link: https://github.com/stephsalou/nuxt-nest-template While in development mode, the project starts up without any issues. However, when I ...

javascripttypescriptvue.jsnuxt.js

Tips for resetting/removing a Chart.js canvas in a React JSX element

I have encountered an issue with chart.js while working on a specific report. Whenever I switch pages to another page that includes chartjs elements and then switch back, the chart displays data labels on the data points like "x: number, y: number". Afte ...

javascriptreactjscanvaschart.js