Question 399731 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – how i can fix this error?! : Uncaught ReferenceError: THREE is not defined

I created a subdomain inside the host and inside this subdomain I created a folder and created an index file to call the threejs code, which is my code:

    <script>  
        // صحنه، دوربین و رندرکننده را ایجاد کنید  
        const scene = new THREE.Scene();  
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);  
        const renderer = new THREE.WebGLRenderer();  
        renderer.setSize(window.innerWidth, window.innerHeight);  
        document.body.appendChild(renderer.domElement);  

        // نور به صحنه اضافه کنید  
        const light = new THREE.AmbientLight(0xffffff);  
        scene.add(light);  

        // دراکو بارگذار و GLTFLoader را تنظیم کنید  
        const dracoLoader = new THREE.DRACOLoader();  
        dracoLoader.setDecoderPath('/examples/jsm/libs/draco/');  
        const loader = new THREE.GLTFLoader();  
        loader.setDRACOLoader(dracoLoader);  

        // بارگذاری مدل GLTF  
        loader.load(  
            'https://demo.arendlighting.com/arsalan/object/scene.gltf',  
            function (gltf) {  
                scene.add(gltf.scene);  
                gltf.scene.position.set(0, 0, 0); // موقعیت مدل  
            },  
            function (xhr) {  
                console.log((xhr.loaded / xhr.total * 100) + '% loaded');  
            },  
            function (error) {  
                console.log('An error happened:', error);  
            }  
        );  

        // تنظیم دوربین  
        camera.position.z = 5;  

        // حلقه رندر  
        function animate() {  
            requestAnimationFrame(animate);  
            renderer.render(scene, camera);  
        }  
        animate();  

        // تنظیم اندازه‌گیری صفحه  
        window.addEventListener('resize', function() {  
            camera.aspect = window.innerWidth / window.innerHeight;  
            camera.updateProjectionMatrix();  
            renderer.setSize(window.innerWidth, window.innerHeight);  
        });  
    </script>  
</body>  
</html>`

But when I run the browser page, I encounter a white screen and it shows me this error in the console: Uncaught ReferenceError: THREE is not defined.
What is wrong?!

i try in this link : https://demo.arendlighting.com/arsalan/
PlZz heeeeelppp me…

Tags:

2

Answers


  1. 0

    Replace the script following script,

    <script src="https://threejs.org/build/three.js"></script>

    With this CDN,

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
    Login or Signup to reply.
  2. 0

    The error in your code is related to the script imports and the DRACOLoader’s decoder path. The correct paths for the GLTFLoader and DRACOLoader scripts need to be included, and the DRACOLoader decoder path should point to the correct location. Here’s a quick fix :

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js GLTF Loader</title>
    <style>
        body { margin: 0; }
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/DRACOLoader.js"></script>

    <script>
        // Create scene, camera, and renderer
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // Add light to the scene
        const light = new THREE.AmbientLight(0xffffff);
        scene.add(light);

        // Configure DRACO loader and GLTFLoader
        const dracoLoader = new THREE.DRACOLoader();
        dracoLoader.setDecoderPath('https://cdn.jsdelivr.net/npm/[email protected]/examples/js/libs/draco/');
        const loader = new THREE.GLTFLoader();
        loader.setDRACOLoader(dracoLoader);

        // Load GLTF model
        loader.load(
            'https://demo.arendlighting.com/arsalan/object/scene.gltf',
            function (gltf) {
                scene.add(gltf.scene);
                gltf.scene.position.set(0, 0, 0); // Set model position
            },
            function (xhr) {
                console.log((xhr.loaded / xhr.total * 100) + '% loaded');
            },
            function (error) {
                console.log('An error happened:', error);
            }
        );

        // Set camera position
        camera.position.z = 5;

        // Render loop
        function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }
        animate();

        // Handle window resize
        window.addEventListener('resize', function() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
    </script>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search