CODEWITHSUNDEEP
javascriptthree.jsvanillajs-datepicker
Justin Jari
Justin Jari

Reputation: 1

I'm trying to use three.js library as a module but I've got an error. help me to solve it

I've got this error

THREE.OrbitControls is not a constructor at init

This is my code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" type="text/css" href="assets/styles/style.css" />
        <script type="importmap">
            {
                "imports": {
                    "three": "./assets/scripts/three.js-master/build/three.module.js",
                    "three/examples/jsm/controls/OrbitControls": "./assets/scripts/three.js-master/examples/jsm/controls/OrbitControls.js",
                    "three/examples/jsm/loaders/GLTFLoader": "./assets/scripts/three.js-master/examples/jsm/loaders/GLTFLoader.js"
                }
            }
        </script>
    </head>
    <body>
        <script type="module">
            import * as THREE from "three";
            import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
            import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

            let scene, camera, renderer;

            function init() {
                scene = new THREE.Scene();
                console.log(scene);
                scene.background = new THREE.Color(0xdddddd);

                camera = new THREE.PerspectiveCamera(
                    40,
                    window.innerWidth / window.innerHeight,
                    1,
                    5000
                );
                camera.rotation.y = (45 / 180) * Math.PI;
                camera.position.x = 800;
                camera.position.y = 100;
                camera.position.z = 1000;

                controls = new THREE.OrbitControls(camera);
                controls.addEventListener("change", renderer);

                hlight = new THREE.AmbientLight(0x404040, 100);
                scene.add(hlight);

                directionalLight = new THREE.DirectionalLight(0xffffff, 100);
                directionalLight.position.set(0, 1, 0);
                directionalLight.castShadow = true;
                scene.add(directionalLight);
                light = new THREE.PointLight(0xc4c4c4, 10);
                light.position.set(0, 300, 500);
                scene.add(light);
                light2 = new THREE.PointLight(0xc4c4c4, 10);
                light2.position.set(500, 100, 0);
                scene.add(light2);
                light3 = new THREE.PointLight(0xc4c4c4, 10);
                light3.position.set(0, 100, -500);
                scene.add(light3);
                light4 = new THREE.PointLight(0xc4c4c4, 10);
                light4.position.set(-500, 300, 500);
                scene.add(light4);

                renderer = new THREE.WebGLRenderer({ antialias: true });
                renderer.setSize(window.innerWidth, window.innerHeight);
                document.body.appendChild(renderer.domElement);

                let loader = new THREE.GLTFLoader();
                loader.load(
                    "./assets/Model_3D/Car/scene.gltf",
                    function (gltf) {
                        car = gltf.scene.children[0];
                        car.scale.set(0.5, 0.5, 0.5);
                        scene.add(gltf.scene);
                        animate();
                    }
                );
            }
            function animate() {
                renderer.render(scene, camera);
                requestAnimationFrame(animate);
            }
            init();
        </script>
    </body>
</html>

I want to show a 3d model in my template. In this template I'm trying to load some classes from three.js local file and import "OrbitControls" and "GLTFLoader" to use them for showing a 3d model. Help me with this code to show the 3D Model.

Upvotes: 0

Views: 30

Answers (0)

Related Questions