Embedding a Three.js object within a div element that has disabled zoom functionality and prevents scrolling or zooming within

Recently, I started learning about three.js and currently find myself in need of some assistance. My goal is to set up my scene within a div element rather than the entire document without any zooming while still allowing the user to scroll using the mouse wheel and zoom into the document. I managed to place it inside my div element, but the issue I am facing now is that the mouse wheel zooms the object throughout the entire document, making scrolling only possible through arrows or scrollbar navigation. To illustrate this problem further, I tried working with an existing example involving a Cube with Youtube videos embedded in it. Adding two more videos turned it into a cube as expected. However, another challenge arose when the size of the document changed, causing the object to assume an absolute position and rendering the scene across the entirety of the document.

<!DOCTYPE html>
<html lang="sk-SK">
<head><meta charset="UTF-8"><title>Test</title>
    <script type="text/javascript" src="/kla/script/lib/three.js/build/three.js"></script>
    <script type="text/javascript" src="/kla/script/lib/three.js/controls/TrackballControls.js"></script>
    <script type="text/javascript" src="/kla/script/lib/three.js/renderers/CSS3DRenderer.js"></script>
</head><body>
    ...
    <section>
        <div id="container"></div>
        <div id="blocker"></div>
    </section>
    ...
    <script type="text/javascript" src="js/youtubeCube.js"></script>
</body></html>

The container represents the div where I intend to place the YT Cube object. Here's the CSS styling for this div:

div#container{
    width: 350px;
    height: 300px;
    background-color: gray;}

Lastly, here's the JS file content:

var camera, scene, renderer;

var Element = function(id, x, y, z, ry, rx)
{
    var div = document.createElement('div');
    div.style.width = '480px';
    div.style.height = '480px';
    div.style.backgroundColor = '#000';

    var iframe = document.createElement('iframe');
    iframe.style.width = '480px';
    iframe.style.height = '480px';
    iframe.style.border = '0px';
    iframe.src = ['http://www.youtube.com/embed/', id, '?rel=0'].join('');
    div.appendChild(iframe);

    var object = new THREE.CSS3DObject(div);
    object.position.set(x,y,z);
    object.rotation.y = ry;
    object.rotation.x = rx;

    return object;
};

init();
animate();

function init()
{
    var container = document.getElementById('container');

    camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 1, 5000);
    camera.position.set(500,350,750);

    scene = new THREE.Scene();

    renderer = new THREE.CSS3DRenderer();
    renderer.setSize(document.getElementById('container').offsetWidth, document.getElementById('container').offsetHeight);
    renderer.domElement.style.position = 'relative';
    renderer.domElement.style.top = 0;

    container.appendChild(renderer.domElement);

    var group = new THREE.Group();
    group.add(new Element('', 0, 0, 240, 0, 0));
    group.add(new Element('', 240, 0, 0, Math.PI/2, 0));
    group.add(new Element('', 0, 0, -240, Math.PI, 0));
    group.add(new Element('', -240, 0, 0, -Math.PI/2, 0));
    group.add(new Element('', 0, 240, 0, 0, -Math.PI/2));
    group.add(new Element('', 0, -240, 0, 0, Math.PI/2));
    scene.add(group);

    controls = new THREE.TrackballControls(camera);

    window.addEventListener('resize', onWindowResize, false);

    var blocker = document.getElementById('blocker');
    blocker.style.display = 'none';

    document.addEventListener('mousedown', function(){blocker.style.display = '';});
    document.addEventListener('mouseup', function(){blocker.style.display = 'none';});
}

function onWindowResize()
{
    camera.aspect = window.innerWidth/window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

function animate()
{
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
}

To summarize: - Disable zooming in the scene - Enable document scrolling - Implement document zoom functionality - Fix the view window for the scene - Optionally, aim to improve loading speed if feasible

Thank you in advance for any assistance provided!

Answer №1

controls.noPan = true;
controls.maxDistance = controls.minDistance = yourfixeddistnace;  
controls.noKeys = true;
controls.noRotate = true;
controls.noZoom = true;

If you want to allow scrolling of the document while the mouse is within the 3D scene Canvas, you can either remove event listeners from the canvas or add a function to scroll within the event listener.

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

Sending multipart/form-data with ajax in PHP returns as null

Recently, I encountered an issue with a form I have. It has the following attributes: method="post" and enctype="multipart/form-data" Every time I submit the form using AJAX $("#openTicketSubmit").click(function(){ var support_ticket_form_data = new ...

What is the best way to add all the items from an array to a div element?

I am currently facing an issue where only the last object in my array is being added to my div using the code below. How can I modify it to add all objects from the array to my div? ajaxHelper.processRequest((response: Array<Vehicle.Vehicle>) ...

Use JQuery to load a particular page by specifying its ID with the hashtag symbol

I am facing an issue where I need to create multiple private chatrooms per user. Although I have managed to make it work, I encountered a problem where if there are more than one private chats happening simultaneously, the content of these chats gets broad ...

I am experiencing issues with editing the text field in React Tab as it keeps getting out of focus

https://i.sstatic.net/AUxlN.png Whenever I try to type, the text box loses focus and only allows me to type one letter at a time. Below is the code snippet that I am using: <TabPanel value={value} index={0}> {[...Array(commentCount)].map((item, in ...

Update and republish an outdated npm package

After successfully publishing an npm package, I attempted to make an update which unfortunately resulted in some issues. It seems that I made a mistake during the build process. Since it had been a year since my last update, I have forgotten the exact step ...

tips for efficiently using keyboard to navigate through tabs in an unordered list

Utilizing unordered lists in this web application. I am looking to implement tab navigation with keyboard functionality. How can I achieve this? The first tab should contain text boxes, and when the user fills out a text box and presses the tab key, they s ...

How is it possible to retrieve the flex-direction property value of a div using JavaScript?

While attempting to troubleshoot this issue using Windows Chrome 59, I utilized devtools to examine the properties. let element = document.getElementById("divId"); Upon checking the value of the element, I noticed that the object structure displayed: &g ...

Using Jquery to toggle visibility and position of a button when clicked

I'm new to using Jquery and I've been able to create a button that shows a div and moves the button to the right when clicked. I have looked at similar questions about toggling visibility, but I also need to move the button back when it's cl ...

Replicate a click using jQuery to retrieve a filtered multigallery based on the URL

I have a website that was built using Elementor for a photographer. The site features an Elementor Multigallery with a filter at the top. I am looking to create external links that will direct users to specific subpages showing only filtered items. For ex ...

Will my JavaScript function be triggered when the page is resized while printing?

I have a simple HTML layout where I am using the TextFill jQuery library to automatically adjust the text size based on available space. Everything looks good on screen, but when printed, it seems like the page is resized and the JavaScript needs to be re ...

Focusing on the final (but not ultimate) elements within a specified tag

I am facing a challenge with an HTML structure containing multiple instances of a certain element along with two p elements beneath each: <some_tag></some_tag> <p></p> <p></p> <some_tag></some_tag> <p> ...

A valid ReactComponent must be returned in order to properly render in React. Avoid returning undefined, an array, or any other invalid object

While working on my react application, I came across an error that I have been trying to troubleshoot without any success. It seems like I must be overlooking something important that could be quite obvious. *Error: VideoDetail.render(): A valid ReactComp ...

Code is not running in ReactJS

My challenge is to use canvas and script to draw a rectangle with one diagonal line. However, when I try to do so, only the rectangle appears on my browser. It seems like the script is not being executed. Here's the code: import React, { Component } ...

Trigger Element Upon Click

Forgive me in advance for the lack of quality in this question, but I'll proceed anyway: All I want is for an element to slide open when clicked with a mouse! That's all! More specifically, I am looking for a single menu item that, upon clickin ...

Sending JavaScript objects from React.js to Node.js

I send the object to the backend (Node js) when making an API call, but I am logging the objects for verification. Initially, I used POSTMAN to check and it worked perfectly. However, when attempting to pass an object in the frontend (Reactjs), it appear ...

Creating NextJS Route with Dynamic Links for Main Page and Subpages

In my NextJS project, I have dynamic pages and dynamic subpages organized in the following folders/files structure: pages ├── [Formation] ├── index.js │ ├── [SubPage].js Within index.js (Formation Page), I create links like this: < ...

Error: React - Module not found. This issue arises when attempting to require the 'express' package from within the installed

Hello, I attempted to install the express package in a React project. However, when I try to import the package inside app.js using: const app = require("express"); I encounter 30 errors all stating: Module not found Error: Can't resolve 'x&ap ...

An effective way to mimic an un-exported (private) function within a user module using Jest

In my code, I have a function that handles API requests called "private" and several other functions that initiate specific requests with configuration objects. For example, in the requestUploadStatementFile file. I want to test these public functions, bu ...

Pass along a variable with either "&" or "%" to a PHP file utilizing JavaScript

I have a JavaScript script that is sending 4 variables to a PHP page. The issue arises when one or more of these variables contain special characters like "&" or "%". The script ends up only sending the content before those characters. For example, if ...

Kendo UI Scheduler: The system encountered an overflow while converting to a date and time format

Working on a project using .NET MVC and the Kendo UI Scheduler, an open-source tool. The goal is to save, read, update, and delete events from the scheduler into the database using JavaScript. Encountering some challenges in the process - when attempting ...