# Add threejs on basic page

**URL:** <https://discourse.threejs.org/t/add-threejs-on-basic-page/83683>\
**Category:** Questions\
**Created:** [June 6, 2025, 3:36pm UTC](https://discourse.threejs.org/t/add-threejs-on-basic-page/83683 "2025-06-06T15:36:29Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![pat66](https://avatars.discourse-cdn.com/v4/letter/p/c2a13f/32.png) [@pat66](https://discourse.threejs.org/u/pat66)\
**Post date:** [June 6, 2025, 3:36pm UTC](https://discourse.threejs.org/t/add-threejs-on-basic-page/83683/1 "2025-06-06T15:36:29Z")

</div>

HI everyone

I realize this page

 ![aaaa](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/0/105066558254b85db763b710cf8467729574e81b.jpeg)

 ![qqqq](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/7/8764fceee2327951d6f92cf3c292b9852f766026.jpeg)  
i have this file  
 ![file](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/9/d923a072d12e2ad9f14e685b16178677aa970d71.jpeg)

I don t understand the message of error  
can I have some explication thanks

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [June 6, 2025, 3:38pm UTC](https://discourse.threejs.org/t/add-threejs-on-basic-page/83683/2 "2025-06-06T15:38:56Z")

</div>

Maybe into index.html script without `type="module"` also need for file` three.core.min.js`  
Show index.html code

---

<div class="post-metadata">

**Author:** ![pat66](https://avatars.discourse-cdn.com/v4/letter/p/c2a13f/32.png) [@pat66](https://discourse.threejs.org/u/pat66)\
**Post date:** [June 6, 2025, 3:51pm UTC](https://discourse.threejs.org/t/add-threejs-on-basic-page/83683/3 "2025-06-06T15:51:45Z")

</div>

thanks for your message

my code

 ![code](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/5/d5e919904b36b1651c62d9cdea7dde1b732a5557.jpeg)  
I add the file here

 ![file](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/9/d923a072d12e2ad9f14e685b16178677aa970d71.jpeg)

---

<div class="post-metadata">

**Author:** ![pat66](https://avatars.discourse-cdn.com/v4/letter/p/c2a13f/32.png) [@pat66](https://discourse.threejs.org/u/pat66)\
**Post date:** [June 6, 2025, 3:52pm UTC](https://discourse.threejs.org/t/add-threejs-on-basic-page/83683/4 "2025-06-06T15:52:44Z")

</div>

I add module but still have the message of error

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [June 6, 2025, 3:56pm UTC](https://discourse.threejs.org/t/add-threejs-on-basic-page/83683/5 "2025-06-06T15:56:22Z")

</div>

I made mistake. You need also `three.module.js` and path must be to it.

```javascript
<body>
<script type="importmap">
{
"imports": {
"three": "./three.module.js",
"three/addons/": "./jsm/"
}
}
</script>
<script type="module" src=./main.js"></script>
</body>

```

---

<div class="post-metadata">

**Author:** ![pat66](https://avatars.discourse-cdn.com/v4/letter/p/c2a13f/32.png) [@pat66](https://discourse.threejs.org/u/pat66)\
**Post date:** [June 6, 2025, 4:21pm UTC](https://discourse.threejs.org/t/add-threejs-on-basic-page/83683/6 "2025-06-06T16:21:00Z")

</div>

> [@Chaser\_Code](#):
>
> ```javascript
> <script type="importmap">
> {
> "imports": {
> "three": "./three.module.js",
> "three/addons/": "./jsm/"
> }
> }
> </script>
> 
> ```

what I have now

 ![news2](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/2/3236ffc2868d965cb3c9056d7a8fe2836d74e313.jpeg)  
 ![new](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/6/f68e7e82959fb0f83f073f05b3d131ba7146552a.jpeg)  
 ![new3](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/2/523596eb48bf2a7f38a35c3648950f4d1f20a159.jpeg)

---

<div class="post-metadata">

**Author:** ![pat66](https://avatars.discourse-cdn.com/v4/letter/p/c2a13f/32.png) [@pat66](https://discourse.threejs.org/u/pat66)\
**Post date:** [June 6, 2025, 4:21pm UTC](https://discourse.threejs.org/t/add-threejs-on-basic-page/83683/7 "2025-06-06T16:21:57Z")

</div>

but still have

 ![ne](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/0/30f49f57a85c21aa402e6c85e364361c086f2279.jpeg)

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [June 6, 2025, 4:25pm UTC](https://discourse.threejs.org/t/add-threejs-on-basic-page/83683/8 "2025-06-06T16:25:45Z")

</div>

Can you send archive to messages. i will check at self

---

<div class="post-metadata">

**Author:** ![pat66](https://avatars.discourse-cdn.com/v4/letter/p/c2a13f/32.png) [@pat66](https://discourse.threejs.org/u/pat66)\
**Post date:** [June 6, 2025, 4:27pm UTC](https://discourse.threejs.org/t/add-threejs-on-basic-page/83683/9 "2025-06-06T16:27:28Z")

</div>

what you want said by archive the file ???

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [June 6, 2025, 4:31pm UTC](https://discourse.threejs.org/t/add-threejs-on-basic-page/83683/10 "2025-06-06T16:31:40Z")

</div>

rar or zip archive with all files

---

<div class="post-metadata">

**Author:** ![pat66](https://avatars.discourse-cdn.com/v4/letter/p/c2a13f/32.png) [@pat66](https://discourse.threejs.org/u/pat66)\
**Post date:** [June 6, 2025, 4:32pm UTC](https://discourse.threejs.org/t/add-threejs-on-basic-page/83683/11 "2025-06-06T16:32:34Z")

</div>

ok i will send it

---

<div class="post-metadata">

**Author:** ![pat66](https://avatars.discourse-cdn.com/v4/letter/p/c2a13f/32.png) [@pat66](https://discourse.threejs.org/u/pat66)\
**Post date:** [June 6, 2025, 4:48pm UTC](https://discourse.threejs.org/t/add-threejs-on-basic-page/83683/12 "2025-06-06T16:48:42Z")

</div>

this the zip file  
[web.zip](https://discourse.threejs.org/uploads/short-url/7HUN6vvJwqKS2BnMKFBzIP08H5D.zip) (210.5 KB)

and this is the course

[https://www.mediafire.com/file/wbccx3c4ewurd5z/lesson3\_1GKE6bUR.mp4/file](https://www.mediafire.com/file/wbccx3c4ewurd5z/lesson3_1GKE6bUR.mp4/file)

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [June 6, 2025, 4:58pm UTC](https://discourse.threejs.org/t/add-threejs-on-basic-page/83683/13 "2025-06-06T16:58:22Z")

</div>

You forgot delete line:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/2/d2472b67bfd3a4ff6d3031a13bafe5605ebbb1d2.png)

Fixed index.html:

```javascript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <script type="importmap">
        {
        "imports": {
        "three": "./three.module.min.js",
        "three/addons/": "./jsm/"
        }
        }
        </script>
    <script type="module" src="./main.js"></script>
</body>
</html>

```

Now you need file `three.module.min.js` instead `three.module.js`.  
Now its works ok.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/e/5ebd43e6bc4bdf9ce10818c808fc66e654f00e71.png)

---

<div class="post-metadata">

**Author:** ![pat66](https://avatars.discourse-cdn.com/v4/letter/p/c2a13f/32.png) [@pat66](https://discourse.threejs.org/u/pat66)\
**Post date:** [June 6, 2025, 5:41pm UTC](https://discourse.threejs.org/t/add-threejs-on-basic-page/83683/14 "2025-06-06T17:41:49Z")

</div>

I don’t really understand your message

my html should be like this:

````js
<body>
    

    <script type="importmap">
        {
        "imports": {
        "three": "./three.module.js",
        "three/addons/": "./jsm/"
        }
        }
        </script>

   <script src="three.module.js"></script>
   <script src="three.module.min.js"></script>
    <script type="module" src="main.js"></script>
</body>```

I should remove 
three.core.min.js
````

---

<div class="post-metadata">

**Author:** ![pat66](https://avatars.discourse-cdn.com/v4/letter/p/c2a13f/32.png) [@pat66](https://discourse.threejs.org/u/pat66)\
**Post date:** [June 6, 2025, 5:51pm UTC](https://discourse.threejs.org/t/add-threejs-on-basic-page/83683/15 "2025-06-06T17:51:05Z")

</div>

the file I have

 ![1](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/1/b1b4ed69cd116d892eaae47daa01bd69d8e80247.jpeg)

the code

 ![code](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/8/78ed68d9439b619dc6c4a155cdacf26c30eb6bb1.jpeg)

the message

 ![error](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/b/cbbcb34c3b4487a6349ddd0a3f8f92b46b4b9ef2.jpeg)

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [June 6, 2025, 6:00pm UTC](https://discourse.threejs.org/t/add-threejs-on-basic-page/83683/16 "2025-06-06T18:00:42Z")

</div>

Paste it in index.html

```javascript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <script type="importmap">
        {
        "imports": {
        "three": "./three.module.min.js",
        "three/addons/": "./jsm/"
        }
        }
        </script>
    <script type="module" src="./main.js"></script>
</body>
</html>

```

Files:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/4/f407d16454e21aee71a359deeec068223d0fd2ce.png)

---

<div class="post-metadata">

**Author:** ![pat66](https://avatars.discourse-cdn.com/v4/letter/p/c2a13f/32.png) [@pat66](https://discourse.threejs.org/u/pat66)\
**Post date:** [June 6, 2025, 6:53pm UTC](https://discourse.threejs.org/t/add-threejs-on-basic-page/83683/17 "2025-06-06T18:53:26Z")

</div>

this

````js
<body>
    

    <script type="importmap">
        {
        "imports": {
        "three": "./three.module.js",
        "three/addons/": "./jsm/"
        }
        }
        </script>
  
   
   <script src="three.core.min.js"></script>
   <script src="three.module.min.js"></script>
    <script type="module" src="main.js"></script>
</body>```
````

---

<div class="post-metadata">

**Author:** ![pat66](https://avatars.discourse-cdn.com/v4/letter/p/c2a13f/32.png) [@pat66](https://discourse.threejs.org/u/pat66)\
**Post date:** [June 6, 2025, 6:55pm UTC](https://discourse.threejs.org/t/add-threejs-on-basic-page/83683/18 "2025-06-06T18:55:34Z")

</div>

I have this

 ![11](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/5/f5ffe48ebe94bb56f8445a304866b84f11d36154.jpeg)

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [June 6, 2025, 7:27pm UTC](https://discourse.threejs.org/t/add-threejs-on-basic-page/83683/19 "2025-06-06T19:27:13Z")

</div>

We already define `three.module.js` into `importmap`  
Delete this lines:

```javascript
<script src="three.core.min.js"></script>
<script src="three.module.min.js"></script>

```

Into `main.js` we have line:  
`import * as THREE from 'three';`  
It load file `three.module.min.js` which load also file `three.core.min.js`

---

<div class="post-metadata">

**Author:** ![pat66](https://avatars.discourse-cdn.com/v4/letter/p/c2a13f/32.png) [@pat66](https://discourse.threejs.org/u/pat66)\
**Post date:** [June 6, 2025, 8:03pm UTC](https://discourse.threejs.org/t/add-threejs-on-basic-page/83683/20 "2025-06-06T20:03:26Z")

</div>

ok now I have

 ![now](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/f/7f5d0ba00ab8b1c3f4628321072bc513271f09c9.jpeg)

[Next page](https://discourse.threejs.org/t/add-threejs-on-basic-page/83683.md?page=2)