"Exploring the magic of Vue.js and Three.js: A guide to seamlessly changing CSS style elements within an

I'm currently in the process of converting my Three.js project to Vue.js

Within my Three.js scene, I have a 3D model with HTML points of interest attached to it.

It is crucial that these points remain fixed to the model and consistently face the camera.

Below is a snippet of my code that accomplishes this successfully:

<body>
        <div class="point point-1">
            <div class="point__label">1</div>
            <div class="point__text">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit
            </div>
        </div>
</body>
setPointsOfInterest() {
    this.points = [
        {
            position: new THREE.Vector3(0, 10, 0.2),
            element: document.getElementsByClassName('point-1'),
        },
    ];
}

animate() {
    for (const point of this.points) {
        // Obtain 2D screen position
        const screenPosition = point.position.clone();
        screenPosition.project(this.camera);

        // Modify points
        const x = screenPosition.x * window.innerWidth * 0.5;
        const y = -screenPosition.y * window.innerHeight * 0.5;
        point.element.style.transform = `translateX(${x}px) translateY(${y}px)`;
    }
    
    this.renderer.render(this.scene, this.camera);
    requestAnimationFrame(this.animate.bind(this));
}

Upon transitioning to Vue.js, I encountered an issue where the point's position remained static when set with THREE.Vector3, only the CSS style was utilized. Why is this happening?

Additionally, how can I alter my CSS element within the animate loop similar to my current implementation?

Answer №1

Vue.js highly recommends avoiding manual selection of its DOM elements to prevent conflicts with other commands. It also dynamically constructs and removes elements based on its component lifecycle, which means the element may not even exist when you try to select it as "point-1".

Instead of using documents.getElementsByClassName() to select and manipulate elements, Vue suggests utilizing its Template Refs system. Once you have set this up, you can easily update the CSS position like so:

this.$refs.point1.style.transform = `translateX(${x}px) translateY(${y}px)`;

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

Tips for dynamically resizing an image to suit any screen size, such as with Bootstrap 4

I am having trouble centering an image on the screen and making sure it fits properly without requiring the user to scroll (on screens larger than a tablet). Here is my desired outcome: https://i.sstatic.net/LbfV8.png The top row shows the expected resu ...

Add an array to an existing array of objects

I am working with an array of objects displayed below. var myArray = [ { Data: '455', Note: 'tre', Id: '4' }, { Data: '456', Note: 'bre', Id: '5' }, { Data: '457', Note: 'cre&ap ...

Limiting click event to only Image component in Next.js

Is there a way to trigger a click event only on the image itself, rather than the entire parent div? When setting width and height for the parent div, the click event seems to encompass the entire area. For instance, if the image is 600 pixels wide by 300 ...

Guide to aligning a div element along the right edge of the webpage

I'm struggling to align this div all the way to the right side of the screen. Below is the HTML: <html> <head> title></title> <link rel="stylesheet" type="text/css" href="../css/style.css"/> </head> <h1&g ...

Why is it that my React app is on a different port than the Express server that it listens to?

As I'm working on my React app, it currently runs on the default port http://localhost:3000/. However, when I need to communicate data from the client to the server, I have to listen on a different port. Take a look at the below code snippet: const ex ...

Typescript counterpart of a collection of key-value pairs with string keys and string values

Within the API I'm currently working with, the response utilizes a data type of List<KeyValuePair<string, string>> in C#. The structure appears as shown below: "MetaData": [ { "key": "Name", &q ...

Retrieving a numeric attribute from a JSON structure

Recently, I encountered an issue with a PHP multidimensional array that I converted to JSON using JSON_encode(). Since I am working with Drupal, the arrays often contain keys that look like this: $some_array['und']['0']['value&a ...

The images on the carousel fail to load unless I adjust the window size

After investing countless hours into finding a solution, I am still unable to resolve this issue. The problem lies within my use of a Carousel and setting the images through a javascript file. Strangely enough, upon loading the page, only the first image ...

Implementing Multiselect Filter Functionality in Vue.js

Can someone help me with adding my selected locations and types to the filteredHotels() method in order to filter the results based on user selections? For instance, I need to filter Sydney Hotels, Sydney Backpackers, Sydney or Melbourne hotels, or all hot ...

Another way to utilize slot="headerCell" in v-data-table Vuetify version 2.x

I'm currently in the process of upgrading to Vuetify 2.x from an older version. <template slot="headerCell" slot-scope="props"> <tableheader :props="props"/> (a custom component where I pass props to displ ...

Transforming Node's loops into asynchronous functions

I have the following sync function: for (var i = 0; i < results.length; i++) { var key1 = results[i]['__key']; for (var j = i + 1; j < results.length; j++) { ...

The model name should not be overridden if it is already being used in different fields

I have a model that I am binding on two sides. The first side is inside an html p tag, and the second side is a textarea. When I make changes to the textarea, the content inside the p tag also changes. How can I ensure that only the content in the textar ...

Tips for minimizing padding in X-Range graphs

Is there a way to reduce the overall height of my X-Range chart by adjusting the padding on the Y axis around each series? I have experimented with different properties, such as adding groupPadding: 0, pointPadding: 0, and other parameters using this jsfi ...

Generating an instance of an enum using a string in Typescript

Having trouble accessing the enum members of a numeric enum in TypeScript using window[name]. The result is an undefined object. export enum MyEnum { MemberOne = 0, MemberTwo = 1 } export class ObjectUtils { public static GetEnumMembers(name ...

The callback function is not responding properly in my HTTP POST request

I'm currently working with some code that involves callbacks: function getUserToken(data, callback) { var password_sha256 = sha256(data.password); getAppById(data.app_id).then(function(res) { console.log("app"+res); if (!r ...

Is it possible to locate and eliminate the apostrophe along with the preceding letter?

My objective is to tidy up a character string by removing elements that are not essential for the user and SEO, specifically the (letter before the apostrophes) in this case. I am looking for a regex solution or explanation of how to achieve this in PHP, a ...

An unusual phenomenon in the controller hierarchy causing issues with accessing the parent scope in AngularJS

Recently delving into the world of angularjs, I encountered something perplexing that seemed like a glitch in the controller hierarchy when it comes to accessing the parent scope. Here are two code snippets that I believed should both function properly bas ...

Opposite of CSS Media Query in a precise manner

Can you provide the opposite of this specific CSS media query? @media only screen and (device-width:768px) To clarify, what we are looking for is everything except iPad or not iPad. Just an FYI, I have attempted the code below without success: @media n ...

Passing the current loop object in Vue JS when clicked

I have a data set up where I am utilizing a loop. If an admin clicks on the user section, a pop-up will appear. The code snippet is as follows: On the User List page <template> <header class="headings"> <div class="hea ...

Vue fails to reflect changes in data when it is updated

I have a page where I can access data by calling domain.com/subpage?soundfile=something Using the fetch method, I extract the query parameter from the URL to retrieve the necessary information. The retrieval process is successful as indicated by the data ...