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

Three.js - element nie wyświetla się.

Object Storage Arubacloud
0 głosów
376 wizyt
pytanie zadane 5 sierpnia 2020 w JavaScript przez Bakkit Dyskutant (7,600 p.)
edycja 5 sierpnia 2020 przez Bakkit

Witam, ostatnio zacząłem naukę biblioteki Three.js. Oczywiście jak to na starcie bywa u mnie zaczynam z poradników. Zrobiłem kod tak jak Pan Roman z kanału Hello Roman. Efekt tego taki, że wyświetla mi czarną scenę, ale nie wyświetla obiektu. Czyżby coś było nie tak ze światłem? Albo jestem ślepy albo mam gdzieś literówkę i tego nie widzę.

Proszę o pomoc i pozdrawiam.

Kod:

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

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);


const colorRed = new THREE.Color('hsl(40, 100%, 64%)');
const colorPink = new THREE.Color('hsl(250, 100%, 64%)');

const geometry = new THREE.BoxGeometry({
    width: 20,
    height: 20,
    depth: 50,
});

const material = new THREE.MeshPhongMaterial({
    color: colorRed,
    shininess: 80,
});

const cube = new THREE.Mesh(geometry, material);

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

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

scene.add(cube);
scene.add(light);

camera.position.z = 25;

renderer.render(scene, camera);

 

1. Konsola nie wyrzuca błędów.

2. Raczej to nie wina światła, ponieważ zmieniłem materiał MeshPhongMaterial na MeshBasicMaterial (który nie potrzebuje światła) i efekt jest ten sam.

1 odpowiedź

+1 głos
odpowiedź 5 sierpnia 2020 przez Wiciorny Ekspert (273,830 p.)
wybrane 6 sierpnia 2020 przez Bakkit
 
Najlepsza
Zastanawia mnie jedna sprawa w JS, deklaracja  zmiennych dla sceny oraz camery, które ustawiasz na CONST. czyli w trakcie skryptu JS, te wartości nie mogą ulec zmianie. jednak potem poddajesz je tym zmianą? :)
komentarz 5 sierpnia 2020 przez Bakkit Dyskutant (7,600 p.)
Czy zmienię na var czy na let nie przynosi to żadnego efektu.
1
komentarz 5 sierpnia 2020 przez Wiciorny Ekspert (273,830 p.)
z której częsci filmu u tego pana to jest? Swoją drogą tego kanału nie polecam, ale jesli mam pomóc to też muszę więcej przeanalizować
1
komentarz 5 sierpnia 2020 przez Bakkit Dyskutant (7,600 p.)

Dokładnie ten film: https://www.youtube.com/watch?v=AYa0aJ9xd_U&t=1084s

Może typowo tutorialowy kanał to nie jest ale zaciekawił mnie sam three.js a akurat poradników o nim na polskiej scenie nie ma dużo.

1
komentarz 5 sierpnia 2020 przez jankustosz1 Nałogowiec (35,940 p.)

@Wiciorny, Nie znam tej biblioteki, ale gdzie niby wartość scene lub camera jest zmieniana?

To jest analogiczny przypadek do następującego: 

const test = {
    a: 2,
    b: 3
};
test.a = 666;

To na co wskazuje zmienna test jest ciągle taka sama. Const działa inaczej niż w np. C++

1
komentarz 5 sierpnia 2020 przez Wiciorny Ekspert (273,830 p.)
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(24, window.innerWidth / window.innerHeight, 0.1, 1000);
 
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
 
const colorRed = new THREE.Color('hsl(40, 100%, 64%)');
const colorPink = new THREE.Color('hsl(306, 100%, 64%)');
 
const geometry = new THREE.BoxGeometry(1,1.5,0.9);
 
const material = new THREE.MeshPhongMaterial();
 
const cube = new THREE.Mesh(geometry, material);
 
const light = new THREE.PointLight(colorPink, 2);
 
light.position.z = 20;
light.position.y = -20;
light.position.x = -50;


scene.add(light);
scene.add(cube);

 
camera.position.z = 15;
 
renderer.render(scene, camera);

to juz np działa :) prawdopodobnie błędy w konstruktorach 

według dokumentacji tutaj jest błąd mniej wiecej 

const geometry = new THREE.BoxGeometry({
    width: 20,
    height: 20,
    depth: 50,
});
 
const material = new THREE.MeshPhongMaterial({
    color: colorRed,
    shininess: 80,
});

 

komentarz 6 sierpnia 2020 przez Bakkit Dyskutant (7,600 p.)

Gdy zamieniam:

const geometry = new THREE.BoxGeometry({
    width: 20,
    height: 20,
    depth: 50,
});

na:

const geometry = new THREE.BoxGeometry(1,1.5,0.9);

to wszystko zaczyna działać. Pytanie tylko co może być nie tak w moim zapisie.

1
komentarz 6 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

Konstruktor BoxGeometry zdaje się akceptować listę parametrów, a nie obiekt konfiguracyjny: https://threejs.org/docs/#api/en/geometries/BoxGeometry

Constructor

BoxGeometry(width : Float, height : Float, depth : Float, widthSegments : Integer, heightSegments : Integer, depthSegments : Integer)

Potwierdza to kod źródłowy: https://github.com/mrdoob/three.js/blob/master/src/geometries/BoxGeometry.js#L10

 

komentarz 6 sierpnia 2020 przez Bakkit Dyskutant (7,600 p.)
Właśnie co dziwne to u Pana Romana na filmie akceptuje obiekt konfiguracyjny. No cóż. Dzięki wszystkim za zaangażowanie!
1
komentarz 6 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)
Roman też się pomylił, co później sprostował. ;)

https://youtu.be/AYa0aJ9xd_U?t=1280
komentarz 6 sierpnia 2020 przez Wiciorny Ekspert (273,830 p.)
dokładnie :D sprostował... też tym tokiem szedłem

Podobne pytania

+2 głosów
1 odpowiedź 190 wizyt
pytanie zadane 12 stycznia 2023 w JavaScript przez Czang Kai Shrek Obywatel (1,990 p.)
0 głosów
1 odpowiedź 1,049 wizyt
pytanie zadane 8 kwietnia 2021 w JavaScript przez Kubs Mądrala (5,190 p.)
+1 głos
2 odpowiedzi 1,019 wizyt
pytanie zadane 1 kwietnia 2021 w JavaScript przez Kubs Mądrala (5,190 p.)

92,762 zapytań

141,686 odpowiedzi

320,499 komentarzy

62,106 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

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!

...