Skip to content

SlizR/PB3D

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

PB3D: Project Beyond 3-Dimensional 🌌

PB3D Gif



PB3D (Project B-Dimensional) is a minimalistic and interactive web project built using Three.js to demonstrate and explore 3D geometry and the 4D hypercube (Tesseract) in real time.

Users can switch between various standard 3D shapes (Cube, Sphere, Tetrahedron) and observe the Tesseract's 4D rotation via a 3D projection.


✨ Key Features

  • Multi-Dimensionality: Easily switch between standard 3D primitives and an interactive 4D projection (Tesseract).
  • Interactive Controls: Use OrbitControls to manually rotate and zoom the scene with your mouse.
  • Animation Control: Toggle Auto-Rotation on/off using of dedicated slider.
  • Lightweight: The project uses a minimal set of external libraries (only Three.js and its OrbitControls module).

♾︎ Every version is here

You can view each publicly available version of the project and select any for yourself and your project to understand how it works and simply look at the project history, what was added, what was removed, etc.

To see the history of each version, go to the Versions section of the repository, select the version, go to info.txt, and read the changes, or take the indeh.html code for that version and look at it.

  • Versions Dir: Directory
  • OR
  • You can open the web-page and add the link /Versions/(Your Version)/ to view the project without even downloading it from your phone or PC. The selected version is below (First>Last):
  1. 1.start
  2. 1.0
  3. 20.0
  4. 21.0
  5. 22.0
  6. 23.0
  7. 24.0
  8. 25.0

Example with version 1.start: https://slizr.github.io/PB3D/Versions/1.start/

Explanation of why version 1.0 jumps straight to 20.0:

The project was not created specifically, but by chance when experimenting with 3D models in the browser, and one of the developers came up with the idea to make this project for teachers and children, and development began, and the first 2 versions, namely 1.start (Basic) and 1.0 (Simple Cube Viewer) were released for the main project, a large-scale change with 1 edit from each developer (there are 20 of them in total). So they decided to call the new version 20.0 and not 1.1 or something else.


🌌 Open Source Code

  • The open source code is provided in a file here, and you can copy it without the footer and author's badge, but with one author's comment.

🛠️ Technology Stack

  • HTML5
  • CSS3 (for basic styling and the interactive control menu)
  • JavaScript (ES6+)
  • Three.js (r128) — The core library for WebGL 3D graphics.
  • OrbitControls.js — For camera interaction.

⌨ Communication

The project also has a Discussion and Issues section, where you can report bugs, security issues, suggest ideas, or fix something. The Discussion section is also a great place to chat. Our administrators are here for you too.

Discussion: General Chat

Issues: here


🚀 Setup and Launch

The PB3D project is simple to set up. Since it primarily uses local files (HTML, CSS, JS) and public CDN links for Three.js, you can run it directly in your browser.

  1. Clone the repository:
    git clone https://github.com/SlizR/PB3D.git
  2. Navigate to the project directory:
    cd PB3D
  3. Open the file: Simply open the index.html file in any modern web browser (e.g., Chrome, Firefox) OR Visit the test website to see the work

Note: If you encounter issues (like cross-origin security errors on certain browsers), you may need to run a simple local web server (e.g., using VS Code Live Server or python3 -m http.server).


💡 How to Use

The main control panel is located in the bottom-left corner of the screen:

  1. Select a Shape: Use the buttons to switch the rendered object:
    • ◼︎ Cube (4-point figure)
    • ⏺︎ Ball (Sphere)
    • ▲ Triangle (Tetrahedron)
    • ♾︎ Hypercube (4D) (Tesseract)
    • ✹ Stress Test (2 million objects)
  2. Rotation Control:
    • Auto-Rotation: Toggle switch to enable or disable automatic rotation around the X and Y axes.
    • FPS display: You can turn the FPS display on or off; it's off by default. When you enter a stress test, it automatically turns on, but when you exit, it returns the value before entering.
  3. Camera Control (OrbitControls):
    • Rotate View: Click and drag the left mouse button.
    • Zoom/Pinch: Use the mouse scroll wheel.
    • Pan: Click and drag the right mouse button.

📄 License & Info

This project is licensed under the Apache License 2.0. See the LICENSE file for more details.

All rights reserved by the registered company SLIZ®. In case of violation of the license rights: Apache License 2.0 You will be responsible for your own actions. If you copy and distribute without the original creator's mark: <meta name="author" content="Sliz®"> And without the mark that you edited: // Edited by ... You will be responsible for your own actions. And before copying, please read the LICENSE completely. Thank you for reading the information! Copying index.html is strictly prohibited. There is an exact copy (Open Source Code.txt), but without the footer, etc.

All Rights info in this file


📧 Contact

Creator: Sliz®

© 2025 Sliz®. All Rights Reserved. Version 25.0