Reflection effect on the ground in three.js

Is there a way to achieve the same effect without duplicating spheres?

I attempted to replicate the functionality, but the reflections appear too large :/

var groundTexture = THREE.ImageUtils.loadTexture( "files/checkerboard.jpg" );
groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
groundTexture.repeat.set( 25, 25 );
groundTexture.anisotropy = 16;

mirrorGroundCamera = new THREE.CubeCamera( 0.1, 5000, 512 );
scene.add( mirrorGroundCamera );

var mirrorGroundMaterial = new THREE.MeshBasicMaterial( { map: groundTexture,  side: THREE.DoubleSide, envMap: mirrorGroundCamera.renderTarget } );
mirrorGround = new THREE.Mesh( groundGeometry, mirrorGroundMaterial );
mirrorGround.position.y = -0.5;
mirrorGround.rotation.x = - Math.PI / 2;
mirrorGroundCamera.position = mirrorGround.position;
scene.add(mirrorGround);

Answer №1

Environment mapping in three.js is a simplified method that assumes the environment is located at an "infinite" distance.

For guidance on implementing mirror reflections in three.js, visit the following link:

Version three.js r.70 was used for this demonstration.

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

Unable to retrieve the ZIP archive generated dynamically

I am facing an issue while attempting to generate a dynamic output from MySQL queries and create an archive. Below is the code snippet I have been working with: var async = require("async"); var mysql = require("mysql"); var express = require("express"); ...

JavaScript button for displaying and hiding all content in one click

I came across a tutorial on W3Schools that showed how to create collapsibles, and I thought it would be great to have buttons that could expand or collapse all at once. I've been trying to implement this feature using the code provided in the tutorial ...

Learn how to efficiently process a data queue with AngularJS using Promises

Within my AngularJS application, I have a Service and multiple controllers running simultaneously. The app receives data updates from the server in JSON format through the Angular Service. To manage the vast amount of data, I need to queue it within the se ...

Ways to verify the presence of an empty array object

I'm trying to determine whether all arrays inside an object are empty. To illustrate, consider the following object: var obj = { arr1: [0, 1, 2], arr2: [1, 2, 3], arr3: [2, 3, 4] }; After pop()ing values from the arrays within the object, I ...

Encountering difficulties linking to a stylesheet or a script in an HTML file delivered by Express server

Currently, I'm facing the challenge of breaking down my Express app code into multiple files. Unfortunately, I am unable to utilize <link href> or <script src> for linking stylesheets or scripts. Below is the relevant snippet from my inde ...

What is the best way to send information back to an AJAX script that has made a

Can someone explain to me how the response section of an AJAX call is processed and formatted using plain, native JavaScript (no jQuery or other frameworks)? I have searched extensively but have not found a clear answer. I am looking for an example that ...

Tips for executing Cross-Origin-Requests from Firebase Hosting to an AWS Lambda function

Excuse me, I'm still new to web development. I have a basic single-page website hosted on Firebase hosting that retrieves some information from an AWS Lambda function (I didn't use Google Cloud because it didn't support outbound requests fo ...

Identify and automatically switch to the mobile site following a selection

Seeking a way to incorporate a redirect on my Joomla site that leads users to a mobile-friendly HTML5 app. After much thought, I've put together the following script: <script type="text/javascript> <!-- if (screen.width <= 800) { ...

Node.js causing excessive CPU usage due to repeated gettimeofday calls

Recently, I encountered a situation with a long-running node.js process that would occasionally spike to 100% CPU usage and stop responding to requests. In an effort to diagnose the issue, I used strace to inspect the process and discovered a series of get ...

A different approach to fixing the error "Uncaught (in promise) TypeError: fs.writeFile is not a function" in TensorFlow.js when running on Chrome

I've been attempting to export a variable in the TensorFlow posenet model while it's running in the Chrome browser using the code snippet below. After going through various discussions, I discovered that exporting a variable with fswritefile in t ...

Issues have been observed with the functionality of the Node.js EventEmitter when attempting to

Here's the issue: I have a class called save.js that inherits from EventEmitter. Here's how it looks: var util = require('util'); var EventEmitter = require('events').EventEmitter; var save = function(pdf){ var ...

Guide for using JavaScript to obtain the current line position within a contenteditable div during a keypress event

I am in the process of developing a customized editor using a contenteditable div. I require a javascript code that can determine the line position of the current caret position during a keypress event. It should be able to adapt when new lines are added o ...

Utilizing Angular Forms for dynamic string validation with the *ngIf directive

I have a challenge where I need to hide forms in a list if they are empty. These forms contain string values. I attempted to use *ngIf but unfortunately, it did not work as expected and empty fields are still visible in the list. How can I address this iss ...

Disable setTimeout in Node.js triggered by an event

I am facing a dilemma with my code that constantly polls a service and I am looking for a way to efficiently cancel the interval using `clearTimeout` through events. The timeouts essentially act as intervals by calling setTimeout again within the function. ...

I need to obtain the URL pathname on a server component in Next.js version 13 - how is this achieved

I'm facing an issue with retrieving the pathname of a server component located in the app directory. Despite attempting to obtain it through window.location, I haven't been successful. Is there an alternative method I can use to achieve this? ...

Execute the function upon clicking

When I click on an icon, I want it to blink. This is the code in my typescript file: onBlink() { this.action = true; setTimeout(() => { this.action = false; }, 1000) return this.action }; Here is how the action is declared in my ...

Another option instead of using jQuery to retrieve the active element in the

My goal was to determine when the user is interacting with an INPUT or TEXTAREA element and set a flag variable to true during this engagement. Once the user clicks out of these elements, the flag should be set back to false. To achieve this, I utilized j ...

What is the method for accessing the Redux store content directly in the console, without using any developer tools

By utilizing React Devtools, I am able to access the store by: $r.store.getState() Is there an alternate method to retrieve the store without using React Devtools? ...

Troubleshooting: Why isn't my Vue v-for list updating when using v

I have a basic application that retrieves data from an API and displays the array on the screen using a v-for loop. The array is structured like this items : [{id : 1, quantity: 2}, {id: 2, quantity: 3} ...] The loop is set up like this <div v-for=&qu ...

Unusual patterns observed when employing the splice method in AngularJS for ordering

Take a look at this Plunker demo link I have encountered an issue after implementing the orderby feature (line 24) in my application. When I try to add an item without priority and then add another one with priority, followed by deleting the first item, t ...