Problem z wyświetleniem obrazu OBJ w Three.js

pytanie zadane 8 kwietnia 2021 w JavaScript przez Kubs Mądrala (5,190 p.)
edycja 8 kwietnia 2021 przez Kubs

Witajcie,

rzeźbie sobie i rzeźbie, ale może tym razem się uda.

Próbuje wczytać image.obj w Three.js, ale wyrzuca dwa błędy:

three.js:6215 THREE.Object3D.add: object not an instance of THREE.Object3D. OBJLoader

image.obj:1 Failed to load resource: net::ERR_CACHE_READ_FAILURE

main.js

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera (64, window.innerWidth/window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer({antialias: true});

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

const colorYellow = new THREE.Color("hsl(40, 100%, 60%)");
const colorPink = new THREE.Color("hsl(306, 100%, 60%)");


const loader = new THREE.OBJLoader();
loader.load('image.obj');


const light = new THREE.PointLight(colorPink, 2);
const light2 = new THREE.PointLight(colorYellow, .5);


 light.position.z = 20;
 light.position.y = -20;
 light.position.x = -40;

 light2.position.z = 10;
 light2.position.y = 20;
 light2.position.x = 40;


scene.add(light);
scene.add(light2);
scene.add(loader);

camera.position.z = 55;

renderer.render (scene, camera);

oraz index.html

<!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>Document</title>
</head>
<body>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.js"></script>
    <script src="https://unpkg.com/three@0.126.0/examples/js/loaders/OBJLoader.js"></script>
    <script src="main.js"></script>
</body>
</html>

Pokaż 55 poprzednich komentarzy

komentarz 30 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Hmm, możliwe, że trzeba podać źródło do pliku MTL.
https://threejs.org/docs/#examples/en/loaders/OBJLoader.setMaterials

Tutaj jest jakiś przykład połączenia jednego z drugim: https://stackoverflow.com/a/35248011/4983840

komentarz 30 kwietnia 2021 przez Kubs Mądrala (5,190 p.)
edycja 30 kwietnia 2021 przez Kubs

Ok, spróbuje.

komentarz 2 maja 2021 przez Kubs Mądrala (5,190 p.)

@ScriptyChris, Mimo to coś nie działa

const loader = new OBJLoader();
loader.load('image.obj');

new THREE.MTLLoader()
.load(MTLFile, function (materials) {
    materials.preload();
    new THREE.OBJLoader()
        .setMaterials(materials)
        .load(OBJFile, function (object) {
            object.position.y = - 95;
            var texture = new THREE.TextureLoader().load("image.mtl");

            object.traverse(function (child) {   // aka setTexture
                if (child instanceof THREE.Mesh) {
                    child.material.map = texture;
                }
            });
            scene.add(object);
        });
});

komentarz 2 maja 2021 przez ScriptyChris Mędrzec (190,190 p.)

Ale co nie działa i co w ogóle robi ten kod?

komentarz 3 maja 2021 przez Kubs Mądrala (5,190 p.)

Tzn. wciąż jest ten sam błąd. Mimo, że w kodzie jest ładowany image.mtl

1 odpowiedź

odpowiedź 8 kwietnia 2021 przez Tomek Sochacki Ekspert (227,490 p.)

a nie powinno być

const loader = new OBJLoader();
loader.load('image.obj');

? tak chyba wynika z dokumentacji patrząc tak na szybko: https://threejs.org/docs/#examples/en/loaders/OBJLoader

W ogóle ktoś już niedawn pytał chyba o to samo, poszukaj w historii wątków.

komentarz 8 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

a nie powinno być

Raczej nie, bo drugi skrypt przypisuje konstruktor OBJLoader pod globalny obiekt THREE.

ktoś już niedawn pytał chyba o to samo

Ten sam autor, tylko teraz inny problem: https://forum.pasja-informatyki.pl/535511/jak-zaladowac-plik-obj-do-three-js

komentarz 8 kwietnia 2021 przez Kubs Mądrala (5,190 p.)

@Tomek Sochacki,

gdy na to zmienię to mam błąd:

Uncaught ReferenceError: OBJLoader is not defined
    at main.js:26

komentarz 8 kwietnia 2021 przez Kubs Mądrala (5,190 p.)

@Tomek Sochacki,

Wygląda na to, że muszę:

dodać

import { OBJLoader } from './jsm/loaders/OBJLoader.js';

i wtedy

new THREE.OBJLoader();

tyle, że muszę zaimportować jakiś moduł. To jest chyba to npm? Ale czy można odnieść się do niego za pomocą tylko linku zamiast pobierać w całości?

komentarz 8 kwietnia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Kubs, tłumaczyłem Ci w poprzednim temacie, że są dwa sposoby na dodanie tego konstruktora: przez globalny obiekt, albo przez moduł - nie mieszaj ich. Moduł możesz również podpiąć jako skrypt, tyle że wtedy ustawiasz mu type="module" i wtedy możesz w tym skrypcie użyć składni import/export.