Trying to add lensflare into myapp.js

This topic has 7 replies, 3 voices, and was last updated 3 years, 9 months ago by Alexander Kovelenov.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
2020-07-21 at 12:43 pm #30403

core3d
Customer

Hi,
I’m not a programmer but i’m trying to get work lensflare example. In run code section i add lensflare example code but i get “Uncaught ReferenceError: Lensflare is not defined” error.
Then i realize i need to import Lensflare.js file and i get “Uncaught SyntaxError: Cannot use import statement outside a module”.
Then i tried to add it with <script type=”module”> but it cannot works either.

So how can i add Lensflare.js script to my app?

2020-07-21 at 1:02 pm #30406

Yuri Kovelenov
Staff

Hi,

you can edit your_app_name.html file. In its header, there are some scripts tags. You need to add another script tag for your js file.

https://www.w3schools.com/tags/att_script_src.asp

Chief 3D Verger | LinkedIn | Twitter

2020-07-21 at 1:15 pm #30414
core3d
Customer
I already tried that but still same error…
```
  <script src="v3d.js"></script>
  <script src="myapp.js"></script>
  <script src="Lensflare.js"></script>
```
then i add this:
```
function runCode(app) {
    // add your code here, e.g. console.log('Hello, World!');

 import { Lensflare, LensflareElement } from 'Lensflare.js';

var textureLoader = new v3d.TextureLoader();
var lensflare = new Lensflare();

        var textureFlare0 = textureLoader.load('textures/lensflare/lensflare0.png');
        var textureFlare3 = textureLoader.load('textures/lensflare/lensflare3.png');

        addLight(0.55, 0.9, 0.5, 5000, 0, - 1000);
        addLight(0.08, 0.8, 0.5, 0, 0, - 1000);
        addLight(0.995, 0.5, 0.9, 5000, 5000, - 1000);

        function addLight(h, s, l, x, y, z) {

          var light = new v3d.PointLight(0xffffff, 1.5, 2000);
          light.color.setHSL(h, s, l);
          light.position.set(x, y, z);
 
         
          lensflare.addElement(new LensflareElement(textureFlare0, 700, 0, light.color));
          lensflare.addElement(new LensflareElement(textureFlare3, 60, 0.6));
          lensflare.addElement(new LensflareElement(textureFlare3, 70, 0.7));
          lensflare.addElement(new LensflareElement(textureFlare3, 120, 0.9));
          lensflare.addElement(new LensflareElement(textureFlare3, 70, 1));
          light.add(lensflare);

}
```
run code section can recognize another js file?
2020-07-21 at 1:51 pm #30416

Yuri Kovelenov
Staff

Try removing the ‘import’ line as this feature is not recognized by the browser.

Chief 3D Verger | LinkedIn | Twitter

2020-07-21 at 2:00 pm #30417

core3d
Customer

When i remove it i get: “Uncaught ReferenceError: Lensflare is not defined” error.

2020-07-21 at 2:03 pm #30418
Yuri Kovelenov
Staff
also try changing the order of these lines:
```
  <script src="myapp.js"></script>
  <script src="Lensflare.js"></script>
```
Chief 3D Verger | LinkedIn | Twitter
2020-07-21 at 2:58 pm #30420

core3d
Customer

unfortunately same error… “Uncaught ReferenceError: Lensflare is not defined”
using this: lensflare.js

2020-07-21 at 5:14 pm #30431
Alexander Kovelenov
Staff
Hi,
in order to use modules you should define your main js file in the HTML as of type module:
<script type="module" src="your_app.js"></script>

Then, import your assets globally, not in the runCode() method:
```
'use strict';
import { Lensflare, LensflareElement } from './Lensflare.js';

// rest of the main JS file ....
```
Soft8Soft Tech Chief
X | FB | LinkedIn
Author

Posts