Using Angular with THREE JS integration in Javascript

I am currently experimenting with Angular and facing a challenge that I can't seem to figure out.

The issue I am encountering involves integrating a javascript code, SunLight.js, from the repository https://github.com/antarktikali/threejs-sunlight into my Angular project.

The SunLight.js file relies on THREE from Three.js. However, when I try to call the SunLight javascript object in my Typescript code, I receive an error stating that the THREE object is undefined. This problem is illustrated in the image below.

Can anyone provide guidance on how to allow SunLight.js to access the three module in my Angular project?

https://i.sstatic.net/vwBmt.jpg

Here is the setup I have:

I have included SunLight.js in a services folder

https://i.sstatic.net/krOH4.jpg

In angular.json, I have defined the script reference for SunLight.js

https://i.sstatic.net/FSUHP.jpg

In my Typescript file, I am using it as shown and it appears to recognize the SunLight object.

https://i.sstatic.net/6K9NK.jpg

https://i.sstatic.net/Y725J.jpg

https://i.sstatic.net/TVzF2.jpg

The SunLight.js code from the repository can be found here

(SunLight.js code snippet has been provided for reference)

Any assistance on this matter would be greatly appreciated. Thank you.

javascriptangulartypescriptthree.js

Answer №1

It's worth noting that SunLight.js relies on three.js, which may not be loaded before SunLight.js is initialized.

Fortunately, there are several solutions to this issue.

One possible solution is to ensure that three.js is loaded before SunLight.js in your angular.json file, as shown below.

"scripts": [
   "node_modules/three/build/three.min.js",
   "src/services/Sunlight.js"
]

Alternatively, you can modify SunLight.js as follows:

import * as THREE from 'three';
const SunLight = function (
     ...// remaining SunLight.js code.

export default SunLight;

After making these changes, you can remove SunLight.js from angular.json and import it wherever needed using the following syntax

import SunLight from 'src/services/Sunlight'; //path may vary depending on its location

By default, Angular only includes *.ts files. Since this is a .js file, you will need to update your tsconfig.app.json to include it (you can use wildcards if necessary for additional .js files).

  "include": [
    "src/**/*.ts",
    "src/services/Sunlight.js"
  ],

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

Using an HTML file as the source for an image in the <img src=""> tag is a simple process that can greatly enhance the visual appeal of your webpage

My goal is to utilize an html file as the source for an image file within the <img src=""> tag in order to prevent mixed-content warnings when using an http image over https. For instance: index.html: <img src="./image.html" > image.htm ...

javascriptjqueryhtmlhttpsmixed-content

Calculate the sum of the elements within an array that possess a distinct attribute

I need to calculate the sum of certain elements in an array. For example, let's consider this array: var sampleArray = [ {"id": 1, "value": 50, "active": true}, {"id": 2, "value": 70, "active": false}, ...

javascriptarraysangularjs

Oops! You forgot to include the necessary getStaticPaths function for dynamic SSG pages on '/blogs/[post]'

Whenever I attempt to execute npm run build, an error occurs. The following build error occurred: Error: getStaticPaths is required for dynamic SSG pages and is missing for '/blogs/[post]'. This is the code snippet causing the issue: function ...

javascriptnode.jsreactjsnext.jsssg

Updating a document using the nano module in CouchDB is not supported

I am currently utilizing the Node.js module known as nano Why is it that I am unable to update my document? I need to set crazy: true and then change it back to false. This is the code I have: var nano = require('nano')('http://localhost ...

javascriptnode.jscouchdbcouchdb-nano

Angular Pause until the variable is ready

I am in the process of developing a new web application service. The first step involves obtaining a token through the rest API. Once this token is obtained, it needs to be sent as a header to retrieve additional information. The issue I'm facing is ...

javascriptangulartypescript

Required environment variables are absent in the application form

Currently, I am working on developing a Next.js application and implementing CRUD functionality. However, I encountered an error while creating the "Create" page, which seems to be related to environment detection. Just to provide some context, I am using ...

javascriptreactjsnext.js

Issue with parsing JSON values in a Chrome extension

Struggling to retrieve the value of a JSON key, but it keeps returning empty. Check out the code snippet below: let json_=JSON.parse(JSON.stringify(result)); console.log(json_); console.log(json ...

javascriptjsongoogle-chromegoogle-chrome-extension

React hook form submit not being triggered

import React, { useState } from "react"; import FileBase64 from "react-file-base64"; import { useDispatch } from "react-redux"; import { makeStyles } from "@material-ui/core/styles"; import { TextField, Select, Input ...

javascriptreactjsmaterial-uireact-hook-form

As the background image shifts, it gradually grows in size

I'm attempting to create an interesting visual effect where a background image moves horizontally and loops seamlessly, creating the illusion of an infinite loop of images. Using only HTML and CSS, I've run into an issue where the background ima ...

javascriptjqueryhtmlcss

Native JavaScript does not handle AJAX responses correctly

I'm facing an issue with my ajax call where the returned HTML works well on changes, but the Javascript that should perform actions based on clicks within the results is not functioning properly. Here is the ajax call: function update_order_shipp ...

javascriptajax

The error message "ERROR TypeError: Object(...) is not a function" occurs when using apollo.watchQuery

Currently immersed in learning the basics of Angular (5) and GraphQL, I have encountered issues while trying to use the watchQuery method. Every time I call this method, my component crashes and throws the error: ERROR TypeError: Object(...) is not a func ...

angularrxjsgraphqlapollo

Troubleshooting Django Python: Why can't I retrieve a JS object sent via AJAX in my Python QueryDict?

As I work on my Django project, I've set up a system for data exchange between the server and client using javascript and python with AJAX. To make things easier, I created a config object in JS to store important parameters that both the server and J ...

javascriptpythonajaxdjango

PhoneGap fails to fire the ondeviceready event within 5 seconds

Currently, I am in the process of debugging my PhoneGap app using Weinre and facing some persistent errors... The 'deviceready' event has not fired even after 5 seconds. Channels are not firing: onPluginsReady, onCordovaReady, onCordovaConnecti ...

javascriptandroideventscordova

What could be causing my website's screen resolution to not fit properly on mobile devices?

Initially, the resolution perfectly matched the width of mobile devices. However, after changing the background image, for some reason, the width no longer fits the device length precisely. I've tried resetting to a point where the resolution was fine ...

javascripthtmlcssresolutionscreen-resolution

What are some ways to utilize tuples in TypeScript along with generics?

My mission is to create a type safe mapping object where I can define key/value pairs just once. I've managed to achieve this with the code below: const myPropTuple = [ [0, "cat"], [1, "dog"], [2, "bird"] ] a ...

typescripttuplestypescript-generics

The issue of Basic Bootstrap 5 Modal triggering twice is causing a frustrating experience

My modal is almost working perfectly - it changes content based on the clicked image, but it is triggering twice in the backend and I can't figure out why! I followed Bootstrap's documentation for this, so I'm unsure where the issue lies. Al ...

javascripthtmlbootstrap-modalbootstrap-5

The JavaScript code that added links to the mobile menu on smaller screens is no longer functioning properly

I recently created a website with a mobile navigation menu that should appear when the browser width is less than 1024px. However, I used some JavaScript (with jQuery) to include links to close the menu, but now the site is not displaying these links and t ...

javascriptjqueryhtmlcsswordpress

Adding an existing element to the DOM using Javascript/jQuery

I am facing an issue in my DOM where I have an element with two children, a div block and a button. My goal is to add a new copy of the same div block to the parentNode whenever the button is clicked. Currently, I am using the following code in the button ...

javascriptjqueryhtmldom

After toggling the switch to send the current state to the server, the React state remained unchanged

Could you clarify why the relay1 state is being sent as false? Why doesn't handleControlRelay1 change the state? Am I making a mistake by placing this inside a function? setRelay1((prevValue) => !prevValue); // ... const [relaysData, setRelaysD ...

javascriptreactjs

What is the best way to define ngOptionValue for my ng-option selection?

After updating my select/option code to include a search feature, it caused an issue with my function create. Here is the HTML code: <div class="input-group"> <label htmlFor="categoria" class="sr-only"> ...

htmlangulartypescript