Comment créer plusieurs scènes dans un monde dans WebGL?

Question

Je veux créer 5 scènes de sorte que la caméra soit animée et se déplace automatiquement dans la scène. Je veux que la caméra soit animée pendant 20 secondes dans chaque scène, et après les 20 secondes pour passer à l'autre scène, de sorte que tout se termine dans 100 secondes. Je veux que toutes les scènes fassent partie d'un monde unique. Donc, fondamentalement, je veux créer quelque chose en tant que film. Comment puis-je y parvenir en WebGL? Je n'ai pas trouvé de segments de code ou de tutoriels similaires en ligne. S'il vous plaît noter que j'ai besoin d'une solution basée uniquement sur WebGL, pas une autre bibliothèque comme three.js par exemple.

Answer 1

On dirait que vous vous demandez essentiellement pour quelque chose dans votre cas comme celui-ci

WebGL: Zooming to and stopping at object in a scene in WebGL

vous mettez un tas d'objets à différents endroits dans le monde. Vous décidez de 5 emplacements de caméra. Vous lp/tween entre les emplacements. Par exemple, imaginez que chacune de ces lettres est un groupe d'objets dans le monde. Par exemple, imaginez que chacune de ces lettres soit un groupe d'objets dans le monde. C1 par C5 sont des caméras qui visent de telle sorte qu'ils ne voient que les 3 objets à partir d'eux

D E F  G H I  J K L  M N O  P Q R 

\/  \/  \/  \/  \/
    C1   C2   C3   C4   C5 

Vous avez juste besoin lerp entre les caméras C1-> C2, C2> C3, C3> C4 etc. Le plus simple est d'utiliser la fonction lookAt assez standard que la plupart des bibliothèques mathématiques 3D ont. lookAt prend 3 arguments. eye, target, up. Ainsi, pour chaque caméra, vous avez besoin d'une cible, d'un œil, d'une valeur élevée. Lerp/tween ces 3 valeurs entre 2 caméras puis les nourrir dans lookAt pour obtenir votre caméra en mouvement. La seule différence entre vos besoins et l'exemple ci-dessus est que l'exemple ci-dessus calcule les emplacements des caméras à la volée. Dans votre cas, vous devrez coder en dur les emplacements de votre caméra.

Answer 2

Voici une discussion avec des exemples pour animer la caméra avec Three.js https://github.com/mrdoob/three.js/issues/1689