The mesh is unseen except in reflections

Using a cubeCamera for live cube maps reflections presents an interesting challenge. How can I make a mesh appear only in the reflection?

If anyone has insight on how to achieve this or if it's possible, please share.

  cubeCamera = new THREE.CubeCamera( 1, 600, 512 );
  cubeCamera.renderTarget.texture.minFilter = THREE.LinearMipMapLinearFilter;
  scene.add( cubeCamera );

envMap

Assigning envMap: cubeCamera.renderTarget,

Create Basic Mesh

  var geometry = new THREE.PlaneBufferGeometry( 1, 1 );
  var material = new THREE.MeshBasicMaterial({color: 0xffffff });

var mesh = new THREE.Mesh( geometry, material);
mesh.position.set( 0, 0, 0 );
scene.add( mesh );

Rendering Functions

function animate() {

  requestAnimationFrame(animate);
  renderer.render(scene, camera);

}

function render() {

  cubeCamera.updateCubeMap( renderer, scene );
  renderer.render( scene, camera );

}

function update() {

  requestAnimationFrame( update );
  render();

}

Answer №1

Give this a shot (untested though)
I assume you only want the mesh object to show up in reflections.

Simple mesh setup

var geometry = new THREE.PlaneBufferGeometry( 1, 1 );
var material = new THREE.MeshBasicMaterial({color: 0xffffff });

var mesh = new THREE.Mesh( geometry, material);
mesh.position.set( 0, 0, 0 );
// Hide your mesh.
mesh.visible = false;
scene.add( mesh );

Rendering logic

function render() {
  // Show mesh for cubeCamera.
  mesh.visible = true;
  cubeCamera.updateCubeMap( renderer, scene );
  // Hide mesh again.
  mesh.visible = false;
  renderer.render( scene, camera );
}

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

Generate a customizable button in Bootstrap using JavaScript extensions

After some investigation on Bugzilla, I discovered that by setting the options URL in install.rdf to arbitrary JavaScript, it can run smoothly. However, a strange issue arises where the window deactivates, as if an invisible dialog has appeared over it, ma ...

Ways to bypass mongoose schema validation while making an update request in the API

In my model, one of the fields is specified as providerID: { type: Number, required: true, unique: true }. The providerID is a unique number that is assigned when inserting provider details for the first time. There are situations where I need to update ...

Incorporating a lasting element into the _app.js file of Next.js

I am currently experimenting with my first Nextjs app and encountering difficulties when trying to incorporate a persistent sidebar. While looking for solutions, I came across Adam Wathan's article on persistent layouts in Nextjs. However, it appears ...

PayPal's Intelligent Payment Buttons: Oops! There seems to be an issue with parsing the JSON data - an unexpected character was found at line 1,

I've been racking my brain over this issue for the past two days... I've been attempting to integrate Smart Payment Buttons from PayPal, diligently following each step in the guide. However, I keep encountering the following error: Error: JSON. ...

Background color set to black in Three.js canvas

I tried creating a basic scene with three.js but I'm puzzled as to why the canvas background is showing up completely black. <html> <head> <title>My first Three.js app</title> <style> body { margin: 0; } ...

The operation was successful, but no new data was reflected in phpMyAdmin

I am facing an issue with my PHP code that retrieves data from an HTML file. When I submit the form, everything seems to work fine, but the data is not being added to the database. This is a new problem for me and I would appreciate any help or guidance. ...

Retrieving data with model.fetch in Backbone.js when the server response is null

In my app, we utilize model.fetch() to retrieve JSON from the server. The render function is triggered when the model undergoes a change and looks like this: if(_.isUndefined(this.model.get("id_number"))){ this.template = initialTemplate; } else if(th ...

Executing asynchronous code in a sequential manner

I'm encountering a problem. I have an AngularJS function that calls another AngularJS function which includes a POST request. The issue is that this POST request always fires last, once the first function has completed. It doesn't execute sequent ...

Formatting Numbers in HighCharts Shared Tooltip

My first experience with HighCharts JS has been quite positive. I am currently creating multiple series and using a shared tooltip feature. The numbers displayed in the shared tooltip are accurate, but the formatting is not to my liking. For instance, it s ...

Using jQuery functions to disable adding or removing classes with a click event

Has anyone had success implementing a functionality where a div expands upon clicking, and reverts back to its original state when clicking on a cancel link within the same div? <div class="new-discussion small"> <a class="cancel">Cancel&l ...

Google Maps: Customize infoWindow Layout

I'm having trouble figuring out how to change the default frame of an infoWindow in Google Maps. Here's my code where I create a marker and add a listener that opens an info window: var markerPosition = new google.maps.LatLng(lat, lng); ...

Retrieve and display all nodes from the Firebase database

Having trouble retrieving data from Firebase This is my attempted solution : DatabaseReference databaseRef = FirebaseDatabase.instance.reference(); await databaseRef.child('...').once().then((DataSnapshot snapshot) { print(snapshot.value); } ...

Determine if a div contains an svg element with JavaScript

My question involves a div containing a question mark and some SVG elements. Here is the initial setup: <div id="mydiv">?</div> When validating a form submission in my code, I check if the div text contains a question mark like this: const f ...

Safari is capable of rendering Jquery, whereas Chrome seems to have trouble

The code I am using renders perfectly in Safari but not in Chrome. Despite checking the console in Chrome, no errors are showing up. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="ht ...

Send the object containing a Dictionary<string, int> parameter to the WebMethod

I encountered an error that says: "Cannot convert object of type 'System.String' to type 'System.Collections.Generic.Dictionary2[System.String,System.Int32]'","StackTrace":" at System.Web.Script.Serialization.ObjectConverter.ConvertObje ...

Double quotes in JSON are not being escaped properly

When I try to evaluate some json on a screen, I keep encountering errors with the message 'unexpected identifier'... The problematic data that seems to be causing this issue is: "itemDescription":"STANDARD \"B\" RED BOX", To address ...

Automatically unselect the "initially selected item" once two items have been selected in Material UI

As someone new to web development, I'm struggling with a specific task. Here is the issue at hand: I have three checkboxes. If box1 and then box2 are selected, they should be marked. However, if box3 is then selected, box1 should automatically unchec ...

Customize the default directory for local node modules installation in node.js using npm

If I prefer not to have my local (per project) packages installed in the node_modules directory, but rather in a directory named sources/node_modules, is there a way to override this like you can with bower? In bower, you specify the location using a .bow ...

The FileReader function will not function unless a file is selected

Using JavaScript, I have utilized FileReader to read the chosen file. Below is the code: HTML: <img id="preview" ng-src="{{user_picture}}" ng-click="triggerUpload()" alt="" width="160" height="160" class="img-thumbnail" /> <input type="file" o ...

Choose specific elements based on their attribute within a class, and then either apply or remove a class

I have a project where I need to store the data information of each element in my navigation menu when a button is clicked. This project is a one-page website with two levels of navigation: Main menu Button at the bottom of each "page" Currently, I hav ...