Currently, I am utilizing this particular component in my Aframe scene to ensure an image always stays facing the camera. While it functions correctly, I am looking to adjust the billboarding to only operate on the Y axis. Think of the image as a person who should pivot around to follow the camera, rather than tilting back and looking up as the camera gets closer.
Does anyone have suggestions on how to customize this component to achieve that effect?
To achieve proper billboarding, synchronize the Y coordinate of the target with the object by using:
this.vector.y = object3D.position.y; //added for alignment
return object3D.lookAt(this.vector);
A discussion resulted in a clever approach to rotate an object only on the y-axis. Here is the code presented as a self-contained component:
AFRAME.registerComponent('look-at-y', {
schema: {
target: {type: 'string', default: 'camera'}
},
init: function () { },
update: function () { },
tick: function () {
const targetEl = document.getElementById(this.data.target).object3D;
const el = this.el.object3D;
const vec = new THREE.Vector3();
targetEl.getWorldDirection(vec);
vec.y = 0;
vec.add(el.position)
el.lookAt(vec);
}
});
This method works by disregarding the Y position of the target entity during the vector calculation for orientation.
By changing vec.y = 0 to vec.x or vec.z, you can achieve billboard effects along different axes too. To enhance it further, one could potentially modify this component to accept an "axis" schema parameter and dynamically switch between them!
I'm encountering an issue with retrieving a value using an id. In my code, I have it set up like this: view <input type="text" value="<?php echo $add->class;?>" name="cls_<?php echo $add->id;?>" id="cls_<?php echo $add->id ...
Today I delved into the world of VUEjs for the first time, experimenting with extracting data from a URL in JSON format. Initially, this process went smoothly, but my curiosity led me to attempt adding a search feature. I followed online tutorials, which u ...
Our directive features a popup that loads a template with a directive to capture all clicks in the document. When a click is detected, it sends an event to close the popup and unbinds the event on the $document. This directive effectively captures docume ...
I'm attempting to determine if a checkbox has been checked, and if it has, adjust the visibility of a specific DIV element. Unfortunately, my check is not working as expected. Despite placing an alert before the "if" statement and confirming that it ...
My friend and I are working on a JavaScript page together. Initially, the page loads smoothly when opened in a tab, although it may be a bit slow. However, upon refreshing the tab, the WebGl canvas appears completely blank while the HTML elements are stil ...
After spending hours on this task, I'm still struggling to find a solution. I have a mean stack application that caters to multiple clients, and I am looking to assign each client their own database. Is this possible? For Example var client_name = ...
Every time I try to create a TrackballControls object, I encounter an error message stating "THREE.TrackballControls is not a constructor". Here's a simple example: <!doctype html> <html> <head> <title>Trackball Contr ...
Within my Vue frontend, I have a function designed to emit updates to the parent component before and after sending a request to the server. The function in question is as follows: saveUpdates: async function () { const component = { doc: ...
Looking for a solution to successfully filter an array of objects by comparing it to another array through looping over its values. The issue arises when the filter function stops at the first false, preventing the full comparison. Any suggestions on how ...
I am facing a challenge in calculating the total price, total quantity, and total counted(#) of each column in a table. | Item | Price | Quantity | 1 | Mouse | 500 | 1 | 2 | Wire | 100 | 2 | TI:3 | |TP:600 | TQ:3 | < ...
How can I prevent the Accordion MUI component from moving and applying top and bottom margins to summary elements in expanded mode? I added the following code to the summary element but it doesn't seem to be working. Any suggestions on how to fix this ...
I have implemented the jQuery UI Autocomplete feature using the code below. <script> $(function() { $( "#city" ).autocomplete({ source: function( request, response ) { $.post('<?php echo base_url()?>records/get_villa ...
Can someone explain the functionality of reportProgress in JavaScript, specifically when used with Angular Typescript? I am having trouble finding documentation on this. return this.httpClient.request<ProductResponse>('get',`${this.basePath ...
I am working on a project to create a Gmail clone. I have implemented the useForm library for data validation. However, when I input data into the form and try to print it to the console, nothing is being displayed. const onSubmit = (data) => { ...
I am currently in the initial stages of developing a maps web application and I want to incorporate maps from tilehosting.com along with the leaflet library (leafletjs.com). Overall, it seems to be working fine, but I'm struggling with hiding the def ...
On a webpage, I have JavaScript code that fetches HTML from a server and I want to display it in a new browser tab or window. When using window.document.write(myHTML) to insert the HTML into the new container, the CSS and JavaScript includes within the HTM ...
After searching extensively, I was unable to locate a JavaScript library that can animate elements in a similar manner as demonstrated here. Take a moment to explore the website beyond the introduction, experiment with applying different filters from the t ...
My default validator settings include displaying a red error message when validation fails. However, it works on Input and textareas, but not on select. $.validator.setDefaults({ ignore: "", errorPlacement: function(error, element) { ...
Currently, I am developing a video application and my goal is to ensure that all participants are viewing the same canvas simultaneously during calls. It seems that each participant has their own instance of the canvas instead of a shared one, which is n ...
The auto-submit feature is not functioning correctly. Although the code works fine when I manually submit the quiz at the end, if the time runs out, the score will always be 0/3 which is incorrect. // React and Material-UI imports omitted for brevity // ...