How can I correctly orient the mirrored sphere geometry image in an A-frame?

Is there a way to adjust the image orientation correctly by mirroring it?

I attempted to follow the solution provided by @Piotr Adam Milewski on this issue mentioned in Stack Overflow: how-to-curve-a-plan-entity-to-match-a-sphere-surface. Even setting the material repeat to -1 did not result in any change in the mirrored image. My approach involves using the aframe-sprite-sheet component for animating the sprite-sheet animation.

    <script>
        AFRAME.registerComponent("match-sphere", {
          schema: {
            target: {
              type: "selector",
            },
          },
          init() {
            const sphere = this.data.target;

            this.el.setAttribute("radius", sphere.getAttribute("radius"));
            this.el.setAttribute("position", sphere.getAttribute("position"));
            this.el.sceneEl.addEventListener("loaded", () => {

              setTimeout(() => {
                const mesh = this.el.getObject3D("mesh");
                const axis = sphere.getAttribute("position").clone();
                axis.add(
                  mesh.geometry.boundingSphere.center.clone().multiplyScalar(-1)
                );
                axis.normalize();
                this.el.object3D.translateOnAxis(axis, 0.1);
              }, 200);
            });
          },
      });
  </script>

<a-scene>
  <a-assets>
    <img
       id="15Anim"
       crossorigin="anonymous"
       src="https://cdn.glitch.global/1e9da372-6263-4de8-9156-5eb917844f9b/15-Unit.png"
     />
    <a-mixin
      id="anim"
      material="shader:flat; side: double; transparent:true; opacity:0.3; alphaTest:0.1"
      match-sphere="target: #foo"
      click-sphere
      rotation='0 180 0'
      radius='2.8' 
     ></a-mixin>
  </a-assets>
  
  <a-entity id="group" rotation="0 222 0" position="0 -55 0" scale="20 20 20">
     <a-sphere 
        id='foo' 
        position="0 0 0" 
        radius='4.05' 
        theta-length="90"ength="90" 
        material='color: #59A1FF; shader: flat; side: double; opacity:0.7; transparent:false; wireframe:false;'>
      </a-sphere>

     <a-sphere  
       mixin="anim" 
       class="cantap" 
       material='src: #15Anim' 
       sprite-sheet="cols:5; rows: 10; progress: 0.;" 
       geometry='phiLength: 53; thetaLength: 26; thetaStart: 25; phiStart:200'>
    </a-sphere>
  </a-entity>
</a-scene>

Resultant reference: https://i.sstatic.net/i2WTx.png

I experimented with changing the repeat values from -1 to 1 and 0, but the outcome remained unchanged. Adjusting the rotation only displaced the image further. Additionally, modifying the alphatest property did not have an impact on the mirrored image.

Answer №1

The issue was successfully resolved by implementing a reverse sprite sheet, which resulted in the curved texture appearing correctly. It should be noted that this solution is somewhat of a workaround and does not follow conventional coding practices.

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

What is preventing me from setting a background image in Angular 13?

Trying a different approach based on advice from Stack Overflow, I attempted the following: <div [style.background-image]="'url(https://picsum.photos/200)'"></div> Unfortunately, this resulted in no effect and the image was ...

Warning: Django is currently dysfunctional

using django 2.0.2 on mac os 10.13 with python 3.6.4 implementing alerts in templates django settings.py MESSAGE_TAGS = { messages.DEBUG: 'alert-info', messages.INFO: 'alert-info', messages.SUCCESS: 'alert-success', messages ...

Creating a customized file input using CSS

I am currently utilizing Bootstrap4 to craft my webpage and I am incorporating a custom file input bar. To retrieve the three labels of the input bar ("Choose file", "Browse", "Upload") from my stylesheet, I have created three custom classes with their co ...

Recaptcha is functioning properly on smartphones, however, it is experiencing difficulty on computers

Hey there! I encountered an issue with my website where the recaptcha isn't working on the desktop version. It's strange because I've used the same code successfully on other sites before. I attempted to fix it by creating a new recaptcha a ...

What could be causing the issue of not being able to connect to the express server from a separate file?

In setting up my express server in server.js, I have the following code: const app = express(); ......... ..... const PORT = process.env.PORT || 5000; const server = app.listen(PORT, () => console.log(`Server started on port ${PORT}`) ); module.expor ...

Retrieve child and descendant nodes with Fancytree JQuery

I'm currently utilizing Fancytree and have created the following tree structure: root |_ child1 |_ subchild1 |_ subchild2 |_ subchild3 |_ subchild4 When the selected node is child1, I am able to retrieve the fir ...

Locating a specific element within an array using AngularJS / Conditional statement within ng-class

I am working on a feature where I need to identify the current user in a list of all users. Below is an example of what my code currently looks like. <div class='user' ng-repeat='user in users'> <span class='name'& ...

"Run JavaScript code within the boundaries of the start and end of XMLHttpRequest

Currently, I am using XMLHttpRequest to execute an AJAX request without the use of jQuery, relying solely on plain old Javascript. This particular AJAX request may take some time as it calls an endpoint responsible for processing transactions. In order to ...

Uploading an image to the server using JQuery library and FormData

I have reviewed numerous solutions, but I am unable to identify the issue in my code. HTML: <div id='image-uploader-view'> <input type='text' id='rename' name='rename'/> <input id='fileu ...

The ng-click event in AngularJS does not function as expected when nested within another ng-repeat loop

I am facing an issue with ng-click in my Angular application (version 1.0.4). The first ng-click works fine, but the second one does not. <div class="menu-group" ng-repeat="module in modules"> <div ng-click="toggle($event, $parent)" ...

Order your custom tasks on Amazon Mechanical Turk directly through the web interface

Can I prompt the submission of a form on Mechanical Turk using a custom button instead of their designated 'submit' button? (I need to submit an empty form to speed up worker processing time) I attempted this: $('#mturk_form').submit() ...

Is your Material UI Responsive Appbar overlapping the main content? Looking for a solution to address this issue?

Currently, I am in the process of developing a website that incorporates a responsive-based app bar with an attached drawer. The design concept I am following can be located at this link, which I have been modifying to suit my needs. However, I have encoun ...

Incorporating Google Analytics into a personalized Order Confirmation page on Woocommerce 3

I have a personalized gratitude page for post-checkout in WooCommerce where I want to include order details in a Google ecommerce tracking tag to log the sale in analytics. Part of this involves adding the following information for each item in the order.. ...

What is the syntax for utilizing a for loop with an array of strings and a filter in JavaScript?

Given an array of strings as a parameter, I am trying to use the filter method for each string in the array and return matched results. get moviesByCity() { return (id: string[]): MovieI[] | undefined => { console.log(id); for (let i = ...

What is the best way to merge several fetchMore functions within Apollo?

Can Apollo run multiple fetchMores simultaneously? I have a complex hook that executes two queries and combines their results into a single array. This is how it looks: export const useDashboardState = (collection: string) => { // Getting parameters ...

Regular Expression - Locate all numerical values within text formatted with HTML

I am attempting to locate all the numbers within an HTML document. However, I want to ensure that I exclude numbers that are part of a word, such as "o365", "high5", and similar instances. Here is my current approach, but it does not successfully avoid w ...

Using `texture.needsUpdate = true` in Three.js can cause significant performance issues due to its slow execution

I am currently working on a project involving a Three.js scene where I need to update textures after a certain period of time. However, I have noticed that updating the textures is causing a significant slowdown in the FPS, dropping it to 1-2 FPS for sever ...

Issue with compatibility of jquery.ui.autocomplete.js on Internet Explorer 7

Having an issue with IE7 that shows an error message "'active.0' is null or not an object" on line 39, which reads: input.trigger("activate.autocomplete", [$.data(active[0], "originalObject")]); $("body").trigger("off.autocomplete"); This code ...

First render does not define useEffect

Why am I experiencing an issue here? Whenever I attempt to retrieve data from my API, it initially returns undefined during the first render, but subsequent renders work correctly. const [data, setData] = useState([]) useEffect(() => { const fe ...

Updating React markers dynamically on Google Maps issue

I'm currently developing a transportation app with React and the @react-google-maps/api library. The app includes a map component that displays the real-time location of delivery workers using custom icons. However, I've encountered an issue wher ...