Restrict OrbitControls to a specific region of the page that is separate from the rendering area

As an experienced COBOL programmer delving into the world of Javascript and Three.js for a personal project, I've been grappling with a particular question for the past couple of days. Despite scouring StackOverflow for answers related to OrbitControls, I haven't found a solution that fits my specific needs. Any assistance would be greatly appreciated.

The scene I'm working on resembles the image linked below:

https://i.sstatic.net/9hgnf.png

Here's what my current script looks like:

    // Code snippet goes here

While the OrbitControl works well when the mouse is over the rendered materials, I am trying to restrict its functionality to only work when the mouse hovers over a specific green div overlaying the scene. I've experimented with various parameters in OrbitControl and attempted to implement onMouseOver functions associating with the div, but nothing seems to achieve the desired result. Is it even possible to accomplish this? If so, can someone point me in the right direction?

Thank you in advance for your help!

javascriptthree.js

Answer №1

Assuming I understand correctly, imagine you have a small green rectangle

<div style="position: absolute;" id="LittleGreenDiv"></div>

You can then utilize it as the second argument when creating the controls object:

var controls = new THREE.OrbitControls(camera, document.getElementById("LittleGreenDiv"));

Check out this jsfiddle for an example.

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

Experiencing an inexplicable blurring effect on the modal window

Introduction - I've implemented a feature where multiple modal windows can be opened on top of each other and closed sequentially. Recently, I added a blur effect that makes the background go blurry when a modal window is open. Subsequently opening an ...

javascriptjqueryhtmlcssarrays

Navigating to the same hash using Vue Router in a consecutive manner

Currently, I am developing a website using Vue and Vue Router for routing. The method I am using to manage scroll behavior for anchor links is as follows: const router = new VueRouter({ routes, scrollBehavior (to) { if (to.hash) { ...

javascriptvue.jsvue-componentvue-router

Using Python within HTML with Python integration

df2 = pd.DataFrame(np.random.randn(5, 10)).to_html() myPage = """ <html> <body> <h2> Programming Challenge </h2> <form action="/execute" method="get"> <sele ...

javascriptjquerypythonajaxdjango

Attempting to remove an attribute or property in JavaScript will not yield the desired result

When I try to close the menu after opening it, the inline style won't get removed despite trying different methods. The CSS only has text properties for alignment and the class can-transform contains a media query. That's all the information I h ...

javascriptcssfunctiontoggleinline-styles

Refreshing certain sections of a webpage without the need to refresh the entire page

If you want to understand better, it would be helpful if you could check out my website first at: The main part of the website is a stream from Own3D.tv displayed through an iframe (line 342). My objective is to have the ability to click on a specific str ...

phpjavascripthtmlcssajax

Is there a specific point in which we can directly pass a value to the `state` in Redux?

Is it safe to directly pass the value to the state in a redux reducer like this? export default (state = [], action) => { switch (action.type) { case 'FETCH_USER': return [...state, action.payload]; default: return state; ...

javascriptreactjs

Leveraging the power of jQuery and vanilla JavaScript to create a pop-up print window for a Div element within a CMS platform that does not support media query stylesheets

I have been grappling with this particular issue for weeks now, seeking guidance from previous inquiries here. Yet, despite the helpful hints, I am still struggling to find a viable solution. My website features a scrolling sidebar measuring approximately ...

javascriptjquerycss

Utilizing numerous Nuxt vuetify textfield components as properties

Trying to create a dynamic form component that can utilize different v-models for requesting data. Component: <v-form> <v-container> <v-row> <v-col cols="12" md="4"> <v ...

javascriptvue.jsnuxt.jsvuetify.js

I'm having trouble with my "alert()" function in Vue.js

I am new to using Vue and I am attempting to trigger an alert function when a button is clicked. However, I keep encountering the error message Uncaught ReferenceError: addTask is not defined. Below are the codes I have written: <template> ...

javascriptvue.jslaravel-8

The markerwithlabel feature failed to appear on the Google Map when using MeteorJS

I am encountering an issue with markerwithlabel not displaying on Google Maps in MeteorJS. I am using dburles:google-maps and markerwithlabel v1.1.9, but I can't seem to integrate them properly. Despite placing markerwithlabel.js in the public folder, ...

javascriptgoogle-mapsmeteorgoogle-maps-api-3reactjs

The p5js function pixelDensity() does not provide improved resolution on retina screens

Currently, I am working on a project that involves generating collages from sets of photos. This process includes averaging the pixels' colors of the images and then using that averaged color to plot points on the canvas. However, when I zoom in on re ...

javascriptcanvasp5.js

Discovering the value of an HTML element node in the TinyMCE editor through the use of JavaScript or jQuery

Is there a way to retrieve the node name value using JavaScript or jQuery within the TinyMCE editor? Currently, I am only able to access the nodeName using the code snippet below: var ed = tinyMCE.activeEditor; var errorNode = ed.selection.getNode().node ...

javascriptjqueryhtmlcsstinymce-4

Issue with Pebble SDK/SimplyJS failing to recognize the tab character

Currently, I am facing an interesting challenge while attempting to make my Pebble watch recognize the escape sequence character \t when sending data to my watch using SimplyJS. Here is the code snippet I have been working with: simply.scrollable(tr ...

javascriptpebble-watchpebble-sdk

A guide to efficiently passing props in a Vue.js application connected to Express with MongoDB

I am in the process of creating a simple chat application using Vue.js, Node, Express, and MongoDB. The app starts with a welcome page where users can input their names (refer to: Welcome.vue). After entering their name, users are directed to Posts.vue, pa ...

javascriptnode.jsmongodbexpressvue.js

Prevent the event from bubbling up on active elements

Having trouble with stopping event propagation? Picture this situation: <table id="test"> <tbody> <tr> <td class="row"> </td> <td class="row"> </td> <td class="ro ...

javascriptjquery

Using the `type=file` input in Internet Explorer 11

Encountering an issue with the input type file on IE11. In IE11, the input field is displayed as two tab-able pseudo elements (text/button). Tried using the class ::-ms-browse to hide the button with display: none, but it remains tab-able. To replicate: ...

javascriptjqueryhtmlcssinternet-explorer-11

What is the best way to invoke a TypeScript function within a jQuery function?

Is it possible to invoke a TypeScript function within a jQuery function? If so, what is the correct approach? Here is an example of my component.ts file: getCalendar(){ calendarOptions:Object = { height: 'parent', fixedWeekCount : ...

javascriptjqueryangulartypescript

Encountering a 500 (Internal Server Error) while trying to insert data into the database through ajax

In the HTML code, I have a basic AJAX function that is triggered by a button press. The goal is to have the PHP script being called insert the JavaScript variable sent into a database. var myval = 'testuser'; // generated by PHP $.a ...

javascriptphpjquerymysqlajax

Steps for adding custom text/symbols from a button on the textAngular toolbar

My goal is to include a button on the toolbar that allows users to insert © into the textangular editor (). However, I am struggling to grasp how to add functionality to my registered button. The examples provided by textangular for custom functionali ...

javascriptjqueryangularjsangular-ui

Click on the link within the Checkbox label on MUI

I am working on creating a checkbox for the "Terms of Use," using FormControlLabel to nest a Checkbox. However, I also need to include a link that opens a Dialog component displaying the terms. The challenge is that clicking on the link checks the checkbox ...

javascripthtmlreactjsmaterial-ui