Блог

Главная - Вопросы по программированию - Настройка VSCode с помощью THREE.js

Настройка VSCode с помощью THREE.js

#html #visual-studio-code #three.js

#HTML #visual-studio-code #three.js

Вопрос:

Я изо всех сил пытаюсь понять, как заставить мой js-код работать в VSCode. Я пытаюсь отказаться от использования CodePen для всего и начать использовать настоящий редактор кода.

Я думал, что это будет довольно просто, но, похоже, я не могу понять, как заставить его работать. Вот файлы, которые я использую:

test.html

 <!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>test</title>
    <style>
        body {
            margin: 0;
        }

        canvas {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <script src="three.js"></script>
    <script src="OrbitControls.js"></script>
    <script src="test.js"></script>
</body>

</html>

(Я также пробовал это другим способом, например, имея скрипты в голове.)

и test.js

 let scene, renderer, camera, plane, cube, sphere, cone, light, light2, controls;
let aspect = window.innerWidth / window.innerHeight;

//scene
scene = new THREE.Scene();

//camera
camera = new THREE.PerspectiveCamera(
    30,
    aspect,
    1,
    2000
);
camera.position.z = 2000;

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

//lights
light = new THREE.PointLight(0xffffff, 1);
light.position.set(50, -100, 300);
scene.add(light);

light2 = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light2);

//controls
controls = new OrbitControls(camera, renderer.domElement);
controls.update();
controls.autoRotate = true;

//plane
let shape = new THREE.PlaneGeometry(500, 500, 500);
let mat = new THREE.MeshStandardMaterial({ color: 0xaaaaaa });
plane = new THREE.Mesh(shape, mat);
plane.rotation.y -= .5;
plane.position.set(0, 0, -20);
scene.add(plane);

//cube
let shape1 = new THREE.BoxGeometry(200, 200, 200);
let mat1 = new THREE.MeshStandardMaterial({ color: 0x111134 });
cube = new THREE.Mesh(shape1, mat1);
cube.position.set(0, 0, 100);
scene.add(cube);


function render() {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
    cube.rotation.x  = .01;
}
render();

У меня есть оба файла в одной папке вместе с OrbitControls.js и three.js который я скачал с основного THREE.js посылка.

Этот код работает в CodePen, но когда я перетаскиваю html-файл в веб-браузер, он загружается только на черный экран. Я занимаюсь этим уже целый день и просмотрел несколько руководств, но не могу понять, почему я ничего не получаю для рендеринга.

Заранее спасибо.

Ответ №1:

Попробуйте минимальный шаблон threejs, просто чтобы посмотреть, как это работает.

https://github.com/Sean-Bradley/Threejs-Boilerplate

Откройте где-нибудь командную строку.

 git clone https://github.com/Sean-Bradley/Threejs-Boilerplate.git
cd Threejs-Boilerplate
code .

code . Vscode должен открываться в текущей папке, если вы установили его в Windows с настройками по умолчанию.

Откройте встроенный терминал в VSCode или продолжайте использовать существующую командную строку, из которой вы уже открыли ранее

 npm install
npm start

Посетите страницу 127.0.0.1:3000 в вашем браузере

Комментарии:

1. Хорошо, я последовал этим указаниям и увидел зеленый каркасный куб

2. Хорошо, я смог просмотреть ваши файлы и выяснить, как это работает. Я очень новичок в этом, так как использую CodePen с самого начала. Я создал папки в общей папке yoiur с двумя своими проектами и отредактировал app.js тоже посмотри на них. Однако мне приходится перезапускать npm всякий раз, когда я переключаю проекты. Есть ли способ иметь все каталоги проекта в app.js и не нужно перезапускать npm каждый раз, когда я переключаюсь? Хотя это не так уж и важно, поскольку я все равно буду работать над одним проектом за раз. Кроме того, если я продолжу использовать этот шаблон, есть ли что-нибудь, о чем мне нужно знать?

Ответ №2:

Вы также можете получить это через vite , это упрощает и ускоряет работу с библиотеками.

  1. npm create vite@latest

  2. следуйте инструкциям, таким как указание имени проекта и имени пакета и т.д.

  3. cd project_name

  4. npm install

  5. npm run dev Теперь вы увидите локальный хост, на котором запущено приложение vite

  6. удалите ненужные файлы

  7. npm install three

  8. Начинаю создавать сцену и все. Надеюсь, это сработает