Три загрузчика JS GLTF не работают с Nuxt 3

Я сталкиваюсь с ошибкой при реализации трех загрузчиков JS Gltf с nuxt 3. Сообщение об ошибке : " Uncaught (в обещании) TypeError: Загрузчик конструктора класса не может быть вызван без "нового" .."

версии:

"три": "^0.148.0", "три-gltf-загрузчик": "^ 1.111.0"

<template>
  <div ref = "container"></div>
</template>

<script>
import { ref, onMounted } from "vue";
import * as THREE from "three";
import GLTFLoader from "three-gltf-loader";

export default {
  setup() {
    const container = ref(null);
    const scene = ref(new THREE.Scene());
    const renderer = ref(new THREE.WebGLRenderer({ antialias: true }));
    const width = 700;
    const height = 700;
    const camera = ref(
      new THREE.PerspectiveCamera(75, width / height, 0.1, 1000)
    );
    const loader = ref(new GLTFLoader());
    onMounted(async () => {
      renderer.value.setSize(
        container.value.clientWidth,
        container.value.clientHeight
      );
      container.value.appendChild(renderer.value.domElement);
      camera.value.position.z = 5;
      const response = await fetch("logo.gltf");
      const gltf = await response.json();
      loader.value.parse(
        gltf,
        "",
        (gltf) => {
          scene.value.add(gltf.scene);
          renderer.value.render(scene.value, camera.value);
        },
        undefined,
        (error) => {
          console.error(error);
        }
      );
    });

    return { container };
  },
};
</script>

three.js vuejs3 vite nuxtjs3 gltf

20.01.2023 15:18

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

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

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

"три": "^0.148.0", "три-gltf-загрузчик": "^1.111.0"

Такая установка не рекомендуется, так как вы можете импортировать последний GLTFLoader модуль из three репозитория. Попробуйте еще раз с этим импортом:

import * as THREE from "three";
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";

Не работает, единственное решение с TroisJS

— 21.01.2023 09:48

20.01.2023 15:35

Ответ принят как подходящий

Я нашел решение на YT-канале Alvaro Dev Labs, он использовал TroisJS вместо ThreeJS (на самом деле это Vite + Three). А для nuxt 3 вам просто нужно добавить «.client.vue» к имени файла вашего компонента, чтобы запустить его на стороне клиента (Model.client.vue).

<script lang = "ts">
import { defineComponent, ref, onMounted } from "vue";
import {
  Renderer,
  Scene,
  Camera,
  PointLight,
  AmbientLight,
  GltfModel,
} from "troisjs";
export default defineComponent({
  components: {
    Renderer,
    Scene,
    Camera,
    PointLight,
    AmbientLight,
    GltfModel,
  },
  setup() {
    const renderer = ref(null);
    const model = ref(null);

    function onReady(model) {
      console.info("Ready", model);
    }

    onMounted(() => {
      renderer?.value?.onBeforeRender(() => {
        model.value.rotation.x += 0.01;
      });
    });

    return {
      renderer,
      model,
      onReady,
    };
  },
});
</script>

<template>
  <div>
    <Renderer ref = "renderer" antialias orbit-ctrl resize = "window">
      <Camera :position = "{ x: -10, z: 20 }" />
      <Scene background = "#fff">
        <AmbientLight />
        <PointLight
          color = "white"
          :position = "{ x: 100, y: 1000, z: 40 }"
          :intensity = "1"
        />
        <GltfModel ref = "model" src = "/Models/logo.gltf" @load = "onReady" />
      </Scene>
    </Renderer>
  </div>
</template>

21.01.2023 09:45

импортировать вот так import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js' Затем используйте вот так const loader = new GLTFLoader()

21.01.2023 13:16

Другие вопросы по теме

Vue3 + pinia: как сделать реактивным значение из ?store

Vue.js 3 API композиции и API опций

Передача магазина Pinia в качестве реквизита с помощью Vue3 и TypeScript

Как глобально зарегистрировать компонент Vue 3 с API композиции?

Проект Vue - Uncaught TypeError: невозможно прочитать свойства ошибки null (чтение 'offsetWidth') для пользовательского сценария js

Как добавить отображение прокрутки в vue3

Пиния поделилась реакцией в магазинах

Проп передается, но не обновляет компонент

Vue 3 Внутренняя ошибка сервера: v-модель нельзя использовать в реквизите, поскольку локальные привязки реквизита недоступны для записи

Nuxt 3 + msal — ошибка non_browser_environment

Три загрузчика JS GLTF не работают с Nuxt 3

Ответы 3

Другие вопросы по теме

Похожие вопросы