What is the best way to indicate the region of a shape that intersects with another shape in

Picture yourself with an area and placing a camera lens or eye above it. What I'd like to do is create an eclipse on the area to show exactly what the lens or eye can see. So far, I have achieved this:

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

You can interact with an example on JSFIDDLE. The example shows a lens pointing towards the center of the area.

Is it possible to outline that eclipse on the area with borders or a different background? I attempted to clip the cone, but was unable to fill the area of the clipped cone (it remained empty inside). Any suggestions on how I can achieve this?

Both elements are THREE.Mesh, with the area being a THREE.BoxGeometry and the cone being a THREE.ConeGeometry (both with THREE.MeshPhongMaterial material).

javascriptthree.jsgeometry

Answer №1

Experiment with changing 

material.depthFunc = THREE.EqualDepth
to create a scenario where the depth of the cone matches that of the plane...

Use .depthFunc = THREE.GreaterDepth to render only the sections of the cone located behind the plane, and .depthFunc = THREE.LessDepth to render only the parts of the cone in front of the plane.

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

What is the process for adding texture to a model that has been imported using OBJLoader?

I've been immersed in my little project using three.js, but I'm facing a challenge with mapping textures on objects loaded by THREE.OBJLoader. Interestingly, there are no issues with three.js built-in geometry. I find myself quite perplexed... / ...

javascriptthree.js

Command handler that dynamically utilizes both shared and separate commands

Currently, I am in the process of setting up a command handler for multiple channels on Twitch. To organize the commands, I have them divided into specific folders for each user and generic ones. Accessing these commands is done by using a map(). My goal i ...

javascriptnode.jsnode-modules

Retrieve the database value for the chosen name and then add that name to a different table

I am working on a dropdown feature that fetches categories from a database and displays the selected category price in a textfield. For example, when 'web development' is selected, the price ($12) will display in the textfield. Below is the cod ...

javascriptphpjquerymysql

Customizing Geonames JSON Ajax Request

Having found the code I needed from a sample website, I am now seeking help to customize it to only display results from the USA. This is the current code snippet: $(function() { function log( message ) { $( "<div>" ).text( message ).pr ...

javascriptjqueryajaxjsonrequest

Display Content in a DIV When Form Field is Unfocused

After hours of searching, I still haven't found a solution! I am trying to create a form field (text) where users can type in text. I want the text they enter to appear in a div on the screen either as they type or after they finish typing. Maybe thi ...

javascriptjqueryhtml

The input field does not adhere to the maximum length property

I am working on a React method that is supposed to create an input field with a set maximum length: displayInputField: function(name, placeholder, updateMethod, maxLength) { return ( <div className="form-group form-inline"> ...

javascripthtmlreactjs

Tips for transforming a scroll element into the viewport using Angular 2+

This is a sample Here is a component with a list of items: class HomeComponent { text = 'foo'; testObject = {fieldFirst:'foo'}; itemList = [ '1', '2', '3', & ...

javascripthtmlcssangularscroll

Switch out the Select feature for Checkboxes

Hey there! I'm currently trying to enhance the style and functionality of the Select checkboxes on my blog. However, when I change them to checkboxes, they lose their original function of searching for selected tags in each Select option. This issue i ...

javascripthtmlblogger

Tips for adjusting the size of a textarea to perfectly fit within a table cell

I have a textarea displayed within an input in a table, but I am looking to resize it so that it completely fills the table cell up to the borders. Here is the logic: <textarea type="textarea" value="{{data.directRowNo}}" id = " ...

javascripthtmlcssangular

The OnChange event seems to be malfunctioning as it is not being triggered despite other parts of the code functioning properly

Check out the code snippet below: import React, { useState } from "react"; function IP() { const [ipAddress, setIPAddress] = useState(""); const handleInputChange = (event) => { const inputValue = event.target.value; // ...

javascriptreactjsreact-hooksonchange

Limiting Node.js entry with Express

I have a node.js script running on a server. I want to prevent it from being accessed directly from a browser and restrict access to only certain domains/IP addresses. Is this achievable? ...

javascriptnode.jsexpressserverrestriction

Testing Your Angular 7 Code: Unit Testing Made Easy

I am currently working on developing unit tests for this angular script: export class DataService { private csrfToken: string = ''; private isContentShown: BehaviorSubject<boolean> = new BehaviorSubject(true); constructor(private h ...

javascriptangularunit-testingangular7

Using SCSS to apply a class in Next.js

Currently, I am working on a project using Next.js and implementing the SCSS module procedure for styling. An example component directory structure is as follows: SampleComponent -> index.tsx and SampleComponent.module.scss The code in SampleComponent ...

javascriptcssreactjssassnext.js

What is the best way to retrieve the "name" and "ObjectId" properties from this array of objects? (Using Mongoose and MongoDB)

When trying to access the name property, I encountered an issue where it returned undefined: Category.find() .select("-_id") .select("-__v") .then((categories) => { let creator = req.userId; console.log(categories.name) //unde ...

javascriptnode.jsmongodbexpressmongoose

Is using async/await with setState() in React.js the best approach for handling asynchronous operations?

By utilizing async and prevState, I found a solution to console.log the correct state of the page immediately after updating it. As I delved into backend development, I took the time to understand how async operations function. This led me to experiment w ...

javascriptreactjsasync-await

Can the output of the "npm run build" command, which consists of static files, be transformed back into a fully functional project?

I possess static JavaScript build files without access to the source code that produced them. Unfortunately, the previous developer is no longer around to provide insight. Is there a way to deconstruct these files? ...

javascriptnode.jsreactjs

Changing a single state in React results in the modification of both states simultaneously

Whenever I attempt to modify one state, I find that another state is inexplicably changing as well. I've scoured my code for the issue but can't seem to pinpoint it. What steps should I take next? Here's the snippet of code in question: impo ...

javascriptreactjsreact-hooksjsxuse-state

Importing ES module into Next.js leads to ERR_REQUIRE_ESM

Encountered this issue while attempting to integrate ky into a Next.js project: Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /foo/node_modules/ky/index.js It seems that the cause of this problem is Webpack (or Babel) converting all import ...

javascriptwebpackbabeljsnext.jses6-modules

Leveraging the AngularJS promise/defer feature alongside the Quickblox framework, learn how to efficiently upload images and subsequently upload public URLs to a custom

I am currently developing an application that requires users to upload 5 images of themselves. Using a backend-as-a-service platform like Quickblox, I have to create and upload blob files individually. Once each image is uploaded, I receive a success call ...

javascriptangularjsquickbloxangular-promise

Encountering issues while creating a basic digital clock webpage using React

I am trying to create a simple clock in React, but I want all the time data to be stored in a single object instead of separate states for hours, minutes, and seconds. However, I keep running into an error. Can someone please assist me? import React from & ...

javascriptreactjs