Visual Studio 2019 and Three.js

Hi,
I have an old Visual Studio 2019 project that uses Three.js version 138. Everything works fine, but since I have to do new developments I would like to update to the latest version of Three.js. However, I can’t find a guide that explains how to do it. I only found instructions for Visual Studio Code, but they are not applicable for Visual Studio 2019.
Is there a guide?

Thanks,
Marco

I don’t think these two are at all related. Could you be more specific with what you are struggling with? You could edit your source files with any IDE or text editor.

I use c# language to dynamically write javascript source code that must be interpreted by Three.js. For this reason I am forced to use Visual Studio as editor.

This is a very unusual approach, I’m afraid I can’t help with it :frowning: curious if anyone else is doing it this way. Still seems that a code editor should not be a dependency here, could you run your C# code some other way?

Purtroppo ho necessità di debuggare contemporaneamente il codice c# e il codice javascript.
Ora ho provato un nuovo approccio: ho installato Servez e l’ho fatto puntare alla cartella di Three.js. Ora riesco a puntare ai file utilizzando http://localhost:8080.

Ho provato a usare ‘importmap’ nel modo seguente:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03 - First Three.js Project</title>

    <script type="importmap">
        {
                   "imports": {
                       "three": "http://localhost:8080/build/three.module.js",
                       "three/addons/": "http://localhost:8080/examples/jsm/",
                       "three/nodes": "http://localhost:8080/examples/jsm/nodes/Nodes.js"
                   }
               }

    </script>

    <script type="module">
        import * as THREE from 'three';
       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);
        renderer.setAnimationLoop(animate);
        document.body.appendChild(renderer.domElement);

        const geometry = new THREE.BoxGeometry(1, 1, 1);
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        camera.position.z = 5;

        function animate() {

            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;

            renderer.render(scene, camera);

        }
    </script>

</head>
<body>
    <h1>Soon to be a Three.js website</h1>
</body>
</html>

Funziona correttamente, ma non so se sia l’approccio corretto.

I dont understand what you just wrote, because it seems like its Italian (?). But, it seems that you would want to replace three.module.js from 138 to the version you want. I dont think youre actually using anything from addons nor nodes, so those two could possibly be removed.

Sorry, I forgot to translate. This is what I wrote in the previous post:
Now I tried a new approach: I installed Servez and pointed it to the Three.js folder. Now I can point to the files using http://localhost:8080.

I tried using ‘importmap’ as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03 - First Three.js Project</title>

    <script type="importmap">
        {
                   "imports": {
                       "three": "http://localhost:8080/build/three.module.js",
                       "three/addons/": "http://localhost:8080/examples/jsm/",
                       "three/nodes": "http://localhost:8080/examples/jsm/nodes/Nodes.js"
                   }
               }

    </script>

    <script type="module">
        import * as THREE from 'three';
       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);
        renderer.setAnimationLoop(animate);
        document.body.appendChild(renderer.domElement);

        const geometry = new THREE.BoxGeometry(1, 1, 1);
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        camera.position.z = 5;

        function animate() {

            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;

            renderer.render(scene, camera);

        }
    </script>

</head>
<body>
    <h1>Soon to be a Three.js website</h1>
</body>
</html>

It works fine, but I don’t know if it’s the right approach.

Thanks for the advice. I’ll remove what’s not needed.

1 Like

Seems right, maybe that’s what you were referring to, visual studio was probably running some dev server.