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

Question

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.

Answer 1

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ą? :)

Comments

Czy zmienię na var czy na let nie przynosi to żadnego efektu.

---

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ć

---

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.

---

@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++

---

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,
});

 

---

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.

---

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

 

---

Właśnie co dziwne to u Pana Romana na filmie akceptuje obiekt konfiguracyjny. No cóż. Dzięki wszystkim za zaangażowanie!

---

Roman też się pomylił, co później sprostował. ;)

https://youtu.be/AYa0aJ9xd_U?t=1280

---

dokładnie :D sprostował... też tym tokiem szedłem