Forum Pasja Informatyki - Najnowsze z tagiem threejs

Przepisuje swoja starą 10 letnią gre na technologie webowe

Thu, 30 May 2024 08:13:57 +0000

Siemka! Około 10 lat temu byłem w trakcie pisania gry w technologii C# + XNA. Niestety nie dokończyłem jej przez zbyt duży bałagan w kodzie i zbyt małe doświadczenie. (Opublikowałem wersje 0.9.3 której brakowało kilku rzeczy które chciałem zrealizować) Chciałem wrócić do tego projektu jednak użyć innej technologii. Pomyślałem że zrobię równocześnie serie filmów w trakcie tworzenia gry na nowo. Oraz podzielę się swoimi doświadczeniami i przemyśleniami co można było zrobić inaczej a co zostało zaimplementowane dość fajnie.

Całość będzie dostępna na github a nowy kod będę starał się dość dokładnie wyjaśnić więc może być to dobra okazja do poznania zagadnień związanych z tworzeniem gier lub biblioteki Three.JSa która chcę użyć mimo że będzie to gra "2D"

Zapraszam na 1 odcinek i czekam na jakieś pytania lub krytykę ;D
https://youtu.be/fD1ChNUop0U

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

Wed, 05 Aug 2020 13:27:54 +0000

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.

Uncaught TypeError: Cannot read property 'appendChild' of null

Wed, 05 Aug 2020 13:01:34 +0000

Witam, pracuje sobie z Three.js. Już na samym starcie mam problem z czystym js.

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

Jak to możliwe, że nie wykrywa body? Proszę o pomoc.

BabylonJS czy ThreeJS?

Sun, 24 Apr 2016 07:57:48 +0000

Witam!
Jak w temacie: BabylonJS czy ThreeJS? a może alternatywa?
Proszę o uzasadnianie swoich wypowiedzi, wypisać plusy i minusy :)

Pozdrawiam!