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 
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.
Seems right, maybe that’s what you were referring to, visual studio was probably running some dev server.