Although the capsule is successfully loaded and animated, none of the OrbitControls function works.
I’m using three.js with vite.
when I run main.js it returns an error error (err_module_not_found): cannot find module
I tried many methods like adding (.js) extension or changing <script type="modules"> to <script type=importmapi">, but nothing worked.
** main.js**
> import './style.css'
>
> import * as THREE from 'three';
>
> import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
>
> //Scene
>
> const scene = new THREE.Scene()
>
> //Create our Capsule
>
> const geometry = new THREE.CapsuleGeometry(2,4,10,20)
>
> const material = new THREE.MeshStandardMaterial({
>
> color: "#00ff83",
>
> })
>
> const mesh = new THREE.Mesh (geometry, material)
>
> scene.add (mesh)
>
> //Sizes
>
> const sizes = {
>
> width: window.innerWidth,
>
> height: window.innerHeight,
>
> }
>
> //Light
>
> const light = new THREE.PointLight(0xffffff, 1, 100)
>
> light.position.set(0, 10, 10)
>
> scene.add(light)
>
> //Camera
>
> const camera = new THREE. PerspectiveCamera (45, sizes.width/sizes.height,0.1,100)
>
> camera.position.z=20
>
> scene.add (camera)
>
> //Renderer
>
> const canvas = document.querySelector(".webgl")
>
> const renderer = new THREE.WebGLRenderer({ canvas })
>
> renderer.setSize(sizes.width,sizes.height)
>
> renderer.setPixelRatio(2)
>
> renderer.render(scene, camera)
>
> //Controls
>
> const controls = new OrbitControls(camera, canvas)
>
> controls.enableDamping = true
>
> controls.enablePan = false
>
> controls.enableZoom = false
>
> controls.autoRotate= true
>
> controls.autoRotateSpeed = 5
>
> //Resize
>
> window.addEventListener("resize", () => {
>
> //Update Sizes
>
> sizes.width = window. innerWidth
>
> sizes.height = window. innerHeight
>
> //Update Camera
>
> camera.aspect= sizes.width / sizes.height
>
> camera. updateProjectionMatrix()
>
> renderer.setSize(sizes.width,sizes.height)
>
> })
>
> const loop= () => {
>
> controls.update
>
> renderer.render(scene, camera)
>
> window.requestAnimatioFrame(loop)
>
> }
>
> loop ()
package.json
> {
> "name": "vite-project",
> "private": true,
> "version": "0.0.0",
> "type": "module",
> "scripts": {
> "dev": "vite",
> "build": "vite build",
> "preview": "vite preview"
> },
> "devDependencies": {
> "vite": "^4.0.0"
> },
> "dependencies": {
> "gsap": "^3.11.4",
> "three": "^0.149.0"
> }
> }
index.html
> <!DOCTYPE html>
> <html lang="en">
> <head>
> <meta charset="UTF-8" />
> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
> <title>Capsule</title>
> </head>
> <body>
> <canvas class="webgl"></canvas>
<nav>
<a href="/">Capsule</a>
<ul>
<li>Explore</li>
<li>Create</li>
</ul>
</nav>
<h1 class="title">Give it a spin</h1>
> <script type="module" src="/main.js">
> </script>
> </body>
> </html>
style.css
> *{
> margin: 0;
> padding: 0;
> box-sizing: border-box;
> }
> body,
> html{
> overflow-x: hidden;
> font-family: "Poppins", sans-serif;
> }
>
> .webgl {
> position: absolute;
> top: 0;
> left: 0;
> z-index : 1;
> }
>
> nav{
> color:white;
> Z-index:2;
> position: relative;
> padding: 4rem 8rem;
> display: flex;
> justify-content: space-between;
> }
>
> nav a{
> text-decoration : none;
> color:white;
> font-weight: bold;
> }
>
> nav ul {
> list-style: none;
> display: flex;
> gap: 4rem;
> }
> .title {
> color: white;
> Z-index:2;
> position: absolute;
> font-size: 3rem;
> left: 50%;
> top: 75%;
> transform: translate (-50%, -75%) ;
> }