Не рендерит canvas на html. Возможно ошибка в установке Three. / Графика / Форум / Программирование игр / GameDev.ru

Возможно не правильно установлен three, но как правильно я хз.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Курс three.js</title>
    </head>
    <body>
        <canvas class="canvas"></canvas>
    </body>
</html>

import * as THREE from 'three';

import './style.css';

// Сцена
const scene = new THREE.Scene();
const canvas = document.querySelector('.canvas');

// Камера
const sizes = {
    width: 600,
    height: 600,
};

const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height);
camera.position.z = 3;

scene.add(camera);

// Объект
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({
    color: 'yellow',
    wireframe: true,
});

const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

const renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize(sizes.width, sizes.height);
renderer.render(scene, camera);

steklo
Постоялец

#1
6:04, 30 ноя 2024

C:\Users\User>npm install three

up to date, audited 135 packages in 43s

28 packages are looking for funding
run `npm fund` for details

5 vulnerabilities (2 low, 1 moderate, 1 high, 1 critical)

To address issues that do not require attention, run:
npm audit fix

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.

Такую штуку выдает консоль.

AlexOSU89
Постоялец

#2
9:15, 30 ноя 2024

А что за курс?

исправь:

const renderer = new THREE.WebGLRenderer({ canvas });

на

const renderer = new THREE.WebGLRenderer();

и добавь вконце

    let  CONTAINER = document.createElement('div');
    document.body.appendChild(CONTAINER);
    CONTAINER.appendChild(renderer.domElement);

steklo
Постоялец

#3
14:33, 3 дек 2024

steklo
Постоялец

#4
14:45, 3 дек 2024

AlexOSU89
Не помогло.

У нее в курсе на первом видео в import * as THREE from "https://github.com/mrdoob/three.js/tree/dev/build/three.min.js"

На гите это давно поменяли на three.module.js

В разных видео у нее разные варианты кода, я запутался вообще.

AlexOSU89
Постоялец

#5
17:36, 3 дек 2024

Как то там все запутанно.
Почитай документацию:
https://threejs.org/docs/index.html#manual/ru/introduction/Creating-a-scene
10 минут и твой код будет работать.

Blueprint
Постоялец

#6
1:42, 4 дек 2024

AlexOSU89
> Почитай документацию:

steklo
Постоялец

#7
9:01, 4 дек 2024

если запускаю npm run three выводит вот что

npm error Missing script: "three"
npm error
npm error To see a list of scripts, run:
npm error npm run
npm error A complete log of this run can be found in: C:\Users\User\AppData\Local\npm-cache\_logs\2024-12-04T05_59_21_785Z-debug-0.log

steklo
Постоялец

#8
9:02, 4 дек 2024

AlexOSU89
> Почитай документацию:
> https://threejs.org/docs/index.html#manual/ru/introduction/Creating-a-scene

Читал что толку. У меня что-то с пакетом three и возможно его неправильной установкой.

Salamandr
Постоялец

#9
10:46, 4 дек 2024

steklo
> если запускаю npm run three выводит вот что
там надо в блокноте создать index.html и открыть его в браузере.
treejs это скрипт, файлик tree.js или tree.min.js, его можно положить рядом и указать в html как скрипт.
Нету там никакой NodeJS или npm

timchin
Постоялец

#10
2:33, 6 дек 2024

Привет. Добро пожаловать в веб :)
1. Зайди на https://threejs.org/examples/, выбери любой пример, открой код (Кнопка справа внизу), и сохрани файл. Он откроется локально, сможешь менять что хочешь

2. npm. Это уже проект со сборкой и всякими модульными прибамбасами.

> npm init (инициализация проекта)
> npm i -D vite (установка сборщика)
> npm i threejs (установка threejs)

Замени все

<script>...</script>

в файле из первого пункта на

<script type="module" src="./index.js"></script>

, создай файл index.js и положи туда весь контент скрипта. Или, по документации - положи в index.js

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 );
document.body.appendChild( renderer.domElement );

+ или минимальный index.html

− Скрыть

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">


    <title>example</title>
    <style>
      body { margin: 0; }
    </style>
    <link rel="stylesheet" href="index.less">
  </head>
  <body>
    <script type="module" src="src/index.js"></script>
  </body>
</html>

*index.less - файл стилей, лучше тоже создать. Пригодится.

2.1 После всех манипуляций запускай

npx vite

- запустит локальный сервер-сборщик

Zefick
Постоялец

#11
16:26, 6 дек 2024

steklo
Ты реально по видео с ютуба, ~~да ещё на русском~~ пытаешься что-то учить, это не рофл? Найди какую-нибудь статью и просто копипасть оттуда.

steklo
Постоялец

#12
10:44, 13 дек 2024

timchin
Спасибо большое.Обязательно посмотрю.

Я собсно копировал раза 4 чужой код, но канваса так и не видел.