Will incorporating A-frame have an impact on the functionality of three.js?

I encountered an issue with my project that utilizes A-frame and three.js, resulting in the following error:

Uncaught TypeError: THREE.CSS3DObject is not a constructor

To reproduce the error, I used the following sample:

The source code for this sample can be found here:

https://github.com/mrdoob/three.js/blob/master/examples/css3d_periodictable.html

Adding the A-frame script to this sample led to the same error.

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/libs/tween.min.js"></script>
<script src="https://threejs.org/examples/js/controls/TrackballControls.js"></script>
<script src="https://threejs.org/examples/js/renderers/CSS3DRenderer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/0.7.1/aframe.js"></script>

I have questions about whether A-frame affects three.js and if they can be used together. Additionally, I am seeking solutions on how to resolve this error in the sample provided.

Any suggestions or help would be greatly appreciated!

javascriptthree.jsaframe

Answer №1

The reason for this is that aframe includes three.js, causing the global variable window.THREE to be redefined in aframe.js. This means that the original version of three.js, which TrackballControls and CSSRenderer were loaded into, becomes inaccessible after loading aframe.js.

You can observe this by trying something like:

<script src="https://threejs.org/build/three.js">
</script>
<script src="https://threejs.org/examples/js/libs/tween.min.js"></script>
<script src="https://threejs.org/examples/js/controls/TrackballControls.js"></script>
<script src="https://threejs.org/examples/js/renderers/CSS3DRenderer.js"></script>
<script>
  window._THREE = THREE;
  delete window.THREE;
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/0.7.1/aframe.js"></script>

<script>
  console.log(_THREE.REVISION, THREE.REVISION);
</script>

To fix this issue, try changing the order of scripts (and avoid re-loading three.js):

<script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/0.7.1/aframe.js"></script>
<script src="https://threejs.org/examples/js/libs/tween.min.js"></script>
<script src="https://threejs.org/examples/js/controls/TrackballControls.js"></script>
<script src="https://threejs.org/examples/js/renderers/CSS3DRenderer.js"></script>

However, it's important to note that aframe may use a different version of three.js, potentially leading to conflicts with the latest version available on the examples page.

Additionally, keep in mind that aframe cannot utilize the css3d-renderer since DOM elements cannot be displayed in WebVR.

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

Creating PNG images in a scripting language for web applications

Imagine giving your website user the ability to specify a radius size, let's say 5px, and in return receiving a PNG file with a circle of that radius. This question can be divided into two sections: In what language and using which technologies can ...

javascripthtmlcssimage-processingpng

Error: "$$" not defined in this context

I am currently working on generating a dynamic pie chart programmatically with the intention of transforming it into a reusable React Component. The main idea is to have an interactive pie chart where each slice expands into a full pie when clicked. I came ...

javascriptjquerycsssvg

Executing JavaScript code upon clicking a menu item involves creating event listeners for each menu

Currently, I am working on a Squarespace website that includes a navigation bar. I am looking to incorporate a JavaScript code as a link within the navigation bar. The specific JavaScript code is as follows: <div> <script type="text/javascript ...

javascriptjqueryhtmlsquarespace

Dragging a highlighted word or text to another text box in React allows for seamless transfer of content

Can you drag a highlighted word from one text box to another complete sentence in React? I came across a package for React Native, but I'm looking for a solution for the web. ...

javascriptreactjsdrag-and-drophighlightdrag

Mesh object circling in the opposite direction of the displayed image

Working on replicating a Flash website using Three.JS and facing difficulty in achieving desired functionality. The goal is to create button images that orbit around the center of the screen, stop when hovered over by the mouse, and open a different locat ...

javascriptthree.jsmeshraycasting

What is the best way to properly format the retrieved JSON string using Ext JS?

After receiving the JSON data shown below, I need to change the formatting of the string values in the 'code' field. For example, 'TOTALPENDING' should display as "Pending Bonus" and 'TOTALLEFT' as "Current Bonus". How can I m ...

javascriptjsonstringextjsformat

Filtering in JavaScript arrays based on conditions that are not related to the elements in the array

Consider the following code snippet: var numbersArray = [1, 3, 6, 8, 11]; var returnedArray = numbersArray.filter(function(number) { const condition = false // or true sometimes return number > 7 && condition ; }); console.log(returnedArra ...

javascriptarraysfilter

Enter your own text into the input fields to create a personalized message

Is there a way to eliminate duplicates when checking the checkboxes? <label><input type="checkbox" data-bValue="100" data-sValue="sV1" data-nValue="nV1" name="layers"> 100</label><label><input type="checkbox" data-bValue="200" d ...

javascriptarraysinput-field

Unable to execute a JavaScript function when triggered from an HTML form

This is the code for a text conversion tool in HTML: <html> <head> <title> Text Conversion Tool </title> <script type="text/javascript"> function testResults(form) { var str = form.stringn.value; var strArray = str.split(" ...

javascripthtmlformsfunction

Experiencing a lack of output when splitting a string using Selenium

Having trouble with a selenium javascript code that splits a string? Here's the specific code: <tr> <td>storeEval</td> <td>var dList = '${StaffAdminEmail}'.split('@'); </td> <td>dspl ...

javascriptseleniumselenium-ide

Guide on smoothly transitioning between 2 points within a requestAnimationframe iteration

Would it be possible to acquire a library for this task, or does anyone have any suggestions for my psuedocode API? Inquiry: How can I create a function that accepts 4 parameters interpolate(start, end, time, ease) and smoothly transition between the sta ...

javascriptanimationinterpolationrequestanimationframe

Located at the lower section of the parent container

In my flex container, I have two boxes arranged side by side (collapsing into one column on smaller screens). I've ensured that these boxes have the same height when displayed together, as shown in the image below: https://i.sstatic.net/ZjsfW.png No ...

javascriptjqueryhtmlcss

How to fetch a single document from a nested array using Mongoose

Currently, I am working on a MongoDB database using Mongoose in Node.js. The collection structure resembles the following: { cinema: 'xxx', account: 'yyy', media: { data: [{ id: 1, name: 'zzz& ...

javascriptnode.jsmongodbexpressmongoose

Tips for updating comments using ajax technology

I need to implement AJAX in order to update the page automatically whenever a new comment is added, eliminating the need to manually refresh the page. I have attempted to achieve this by adding a section of code but it's not working as expected. Even ...

javascriptphphtmlajax

Transferring data seamlessly between AJAX and PHP

<?php //Establishing site root variable; ?> <?php require_once("../includes/site_init.php"); ?> <!DOCTYPE HTML> <html lang = "en"> <head> <meta charset = "UTF-8"> <meta name = "viewport" content = "width ...

javascriptphpmysqlajaxhtml

What's the best way to dynamically filter an array with a mix of different object structures?

Within my data, I have 6 different types of objects (some with double nested arrays), with varying numbers of entries, as long as each entry is unique. These objects do not possess a consistent unique identifier (one is applied on submission in the backen ...

javascriptarraysfilter

Tips for utilizing getServerSideProps with a series of consecutive fetch() promises?

I've encountered a CORS issue while working on my project, particularly with the second fetch (fetchURL2) being blocked due to the absence of the 'Access-Control-Allow-Origin' header. How can I resolve this CORS policy error using next.js ge ...

javascriptreactjsnext.jscorsfetch-api

What is the best way to eliminate items from an array in a side-scrolling video game?

In my gaming project, I am creating a unique experience where the player needs to collect all the words from a given array. Currently, I am utilizing the shift() method to eliminate elements, as demonstrated in the code snippet below: if ( bX + bird.width ...

javascriptarraysloopsmethods

Obtaining text input from table data is a straightforward process that involves accessing

In order to create a table for user input, I have added textfields where users can populate the table. My goal is to allow users to fill up the table and then save it as a PDF without storing any records in the database. I simply want to save the content ...

javascriptjqueryjsonpdfjspdf

Developing a Highchart Graph using JavaScript

I am trying to develop a high chart graph. Check out my code on FIDDLE LINK. I have two values, a and b, for the x-axis and y-axis. The issue arises when the difference between a and b is minimal, such as when both are equal (-9). In such cases, the grap ...

javascriptjqueryhtmlcss