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?
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.