Creating a CSS3DObject with clickable functionality

Question

Creating a CSS3DObject with clickable functionality

Currently, I am utilizing the THREE JS CSS3DRenderer in an attempt to have a CSS3DObject update its position.z when clicked. Below is the code I am working with:

var element = document.createElement("div");
element.style.width = "90px";
element.style.height = "120px";
element.style.backgroundColor = "#5C6167";

var object = new THREE.CSS3DObject(element);
object.position.x = 0;
object.position.y = 0;
object.position.z = 100;
object.addEventListener('click', function (event) {
new TWEEN.Tween(object.position).to({z: 200}, 500).easing(TWEEN.Easing.Quadratic.Out).start();
});
scene.add(object);

Unfortunately, it seems that the CSS3DObject is not recognizing the click event. Any advice or guidance on this matter would be greatly appreciated. Thank you!

javascript html css three.js

Answer 1

Answer №1

If you're looking to manage a click event triggered by a CSS3DObject, here is a method that allows you to access the parent object of the element:

let object = new THREE.CSS3DObject( element );

element.parent = object;

object.element.onclick = function() { this.parent.position.y += 10; };

Version three.js r.65

Answer 2

If you're looking to manage a click event triggered by a CSS3DObject, here is a method that allows you to access the parent object of the element:

let object = new THREE.CSS3DObject( element );

element.parent = object;

object.element.onclick = function() { this.parent.position.y += 10; };

Version three.js r.65

Answer 3

Answer №2

Have you experimented with using mousedown and mouseup events for your project? Check out this example:

let isMouseDown = false,
    mouseXPos = 0,
    mouseYPos = 0;

function handleMouseDown(event) {
    event.preventDefault();

    isMouseDown = true;
    mouseXPos = event.clientX;
    mouseYPos = event.clientY;
}

function handleMouseUp(event) {
    event.preventDefault();

    isMouseDown = false;
}

function addMouseListeners(canvasElement) {
    canvasElement.addEventListener('mousedown', handleMouseDown, false);
    canvasElement.addEventListener('mouseup', handleMouseUp, false);
}

$(document).ready(function () {
    let canvasElement = document.getElementById("canvas");

    addMouseListeners(canvasElement);

});

Answer 4

Have you experimented with using mousedown and mouseup events for your project? Check out this example:

let isMouseDown = false,
    mouseXPos = 0,
    mouseYPos = 0;

function handleMouseDown(event) {
    event.preventDefault();

    isMouseDown = true;
    mouseXPos = event.clientX;
    mouseYPos = event.clientY;
}

function handleMouseUp(event) {
    event.preventDefault();

    isMouseDown = false;
}

function addMouseListeners(canvasElement) {
    canvasElement.addEventListener('mousedown', handleMouseDown, false);
    canvasElement.addEventListener('mouseup', handleMouseUp, false);
}

$(document).ready(function () {
    let canvasElement = document.getElementById("canvas");

    addMouseListeners(canvasElement);

});

Creating a CSS3DObject with clickable functionality

Answer №1

Answer №2

Similar questions

Unable to retrieve cookies from the client side | Working with NodeJS and JavaScript

Determine if a specific date occurred at least one day ago using momentjs

What is the best way to include text in an editor access notification email?

Is it possible to successfully pass a parameter from a servlet to a JavaScript function, but encounter issues when trying to view the database

Troubleshooting Puppeteer compatibility issues when using TypeScript and esModuleInterop

The lineup includes ASP.NET, Java, Visual Basic, and AJAX

NPM: Implementing a "post-install" hook that is only executed internally and not for package consumers

modify the appearance of HTML controls in real time with C#

Encountering Rendering Issues with EJS Post HTML Conversion

What is the rationale behind not storing OAuth2 access tokens as HttpOnly secure cookies? How could this approach be implemented in a Node.js application?

What is the best way to modify a target rotation to align with the camera based on the model's current orientation in Three.js using quaternions?

Unable to switch the text option

Alpha-Beta Pruning Minimax Algorithm Fails to Determine the Best Move in Tic-Tac-Toe Artificial Intelligence

Ways to verify the existence of a username in WordPress without the need to refresh the page

Keeping track of the toggle state using a cookie

Parallax Effect Slows Down When Scrolling In Web Page

Display the image on the right side when a specific number of pixels are available

What is the best way to design a consistent navbar that can be used across multiple HTML pages using Bootstrap 5?

Issue: User is being redirected from "/login" to "/home" due to a navigation guard. This problem arises in the interaction between Vue-router and Firebase authentication

Choose an option to adjust the transparency of the image