• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Problem z wyświetleniem obrazu OBJ w Three.js

VPS Starter Arubacloud
0 głosów
762 wizyt
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>

 

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ź

0 głosów
odpowiedź 8 kwietnia 2021 przez Tomek Sochacki Ekspert (227,510 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.

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

Wybacz mi, ale jeszcze  wszystko mi się miesza :)

Serdeczne dzięki.

Podobne pytania

+1 głos
2 odpowiedzi 816 wizyt
pytanie zadane 1 kwietnia 2021 w JavaScript przez Kubs Mądrala (5,190 p.)
+2 głosów
1 odpowiedź 168 wizyt
pytanie zadane 12 stycznia 2023 w JavaScript przez Czang Kai Shrek Obywatel (1,990 p.)
0 głosów
1 odpowiedź 314 wizyt
pytanie zadane 5 sierpnia 2020 w JavaScript przez Bakkit Dyskutant (7,600 p.)

92,454 zapytań

141,262 odpowiedzi

319,089 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...