Three.js-Probleme mit Modellen (sie werden gedreht, während sie in der Szene sind) ⇐ JavaScript

[Guest]

Code: Select all

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

const canvas = document.querySelector('#frontPageCanvas');
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth
window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer({canvas, antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor( 0xffffff, 0);

function loadFiles(capsulesFiles, scene) {

const capsuleloader = new GLTFLoader();

capsulesFiles.forEach((capsulesFile) => {
capsuleloader.load(capsulesFile, (gltf) => {
scene.add(gltf.scene);
});
});
};

let capsulesFiles = ['../three.js/models/capsule_1.glb',
'../three.js/models/capsule_1.glb'];
loadFiles(capsulesFiles, scene);

//const geometry = new THREE.BoxGeometry(2, 2, 2);
//const material = new THREE.MeshBasicMaterial({color: 0x0000ff});
//const cube = new THREE.Mesh(geometry, material);
//scene.add(cube);

camera.position.z = 5;

console.log(scene);

function animate()  {
requestAnimationFrame(animate);
//    cube.rotation.x += 0.05
//    cube.rotation.y += 0.05
scene.children[0].rotation.y += 0.05;
scene.children[1].rotation.x -= 0.01;
scene.children[1].rotation.y -= 0.01;

renderer.render(scene, camera);
}

animate();

Hallo, ich bin neu bei Three.js und JavaScript! Ich habe versucht herauszufinden, ob ich meine GLB-Modelle über ein Array einfügen kann (um Codezeit zu sparen, anstatt für jedes einzelne einzigartige Funktionen zu haben). Ich dachte, ich könnte dafür das Szenenobjekt verwenden, aber wenn ich diesen Code ausführe, erhalte ich diese Fehlermeldung für den Rotationscode, die besagt: Uncaught TypeError: Cannot read Properties of undefined (reading 'rotation') at animate ( threejsanimations.js:49 :23) bei threejsanimations.js:56:1
Nach einer kleinen Verzögerung dreht sich jedoch eines meiner Modelle (macht seitdem keinen Sinn). Alle Rotationscodes sollten nicht funktionieren). Ich bin mir nicht sicher, wie ich das beheben kann. Außerdem wäre es cool, wenn es zusätzliche Hilfestellung gäbe, warum meine Modelle keine Textur/kein Material haben (ich habe Maya verwendet, um sie mit aiStandardSurface of Glass and Plastic für die Materialien zu erstellen, und das Verge3D-Plugin, um sie als .glb-Dateien zu exportieren).