Git Product home page Git Product logo

spoke's Introduction

Spoke

Spoke

CircleCI

Easily create custom 3D environments for Mozilla Hubs.

Launch Spoke

Spoke Documentation

Features

๐Ÿ”ญ Discover: Explore images, videos, and 3D models from around the web, all without opening up a new tab. With media integrations from Sketchfab and Google Poly, you'll be on your way to creating a scene in no time.

โœ๏ธ Create: No external software or 3D modeling experience required - build 3D scenes using the Spoke web editor so you can have a space that's entirely custom to your needs. From a board room to outer space and beyond, your space is in your control.

๐ŸŽ‰ Share: Invite people to meet in your new space by publishing your content to Hubs immediately. With just a few clicks, you'll have a world of your own to experience and share - all from your browser.

Contributing

Info on contributing to Spoke and general Spoke development can be found in the CONTRIBUTING.md doc.

Additional developer documentation can be found in the docs folder.

Credits

Parts of this project are derived from the three.js editor with thanks to Mr.doob and three.js' many contributors.

Navigation mesh generation via recast.wasm, thanks to Recast and but0n's RecastCLI wrapper.

See the LICENSE for details.

spoke's People

Contributors

brianpeiris avatar bryanenders avatar dependabot[bot] avatar fcor avatar gfodor avatar hakerbaya avatar infinitelee avatar j-conrad avatar johnshaughnessy avatar juunini avatar keianhzo avatar lalalune avatar marcusmorba avatar matthewbcool avatar misslivirose avatar mqp avatar netpro2k avatar pattersonbl2 avatar robertlong avatar robinkwilson avatar sardug10 avatar seanbannister avatar sellersociety avatar softvision-geluhaiduc avatar softvision-remusdranca avatar tanfarming avatar thamimemel avatar tharun208 avatar tony056 avatar traccccychen avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

spoke's Issues

Combine Meshes on glTF Export

  • Combine meshes marked as static with the same material on glTF export. Objects should be marked static by default.
  • Combine meshes with the nav-mesh component

Export component data as glTF Extensions

  • Serialize component data as extensions in the glTF export (resolved in fdf3a9b)
  • Move component data from extras.components to extensions.MOZ_components or extensions.HUBS_components
  • Update hubs to inflate components from extras.components or extensions.MOZ_components

Add More Components

  • spawn-point
  • skybox (fix scale)
  • hoverable
  • spot-light
  • scene-shadow
  • super-spawner (depends on hoverable)
  • sticky-zone
  • hide-when-quality
  • visible
  • nav-mesh (depends on visible)
  • collision-filter
  • body
  • shape
  • css-class replaced with interactable which is inflated as setAttribute("css-class", "interactable") in Hubs.
  • sound
  • layers
  • text
  • loop-animation
  • billboard
  • water
  • fog (only on scene)
  • media-loader

Initial Styling

  • Panel headers should be differentiated from their content (dd1ef2e)
  • Styled checkbox component
  • Input group alignment (42eb7ee)
  • Scene hierarchy label vertical alignment (dd1ef2e)
  • Close button styling (button removed in #73)
  • Property group header should have greater font weight
  • Property group header should have a greater border-top/bottom

Fix default lighting

Everything in the editor is pretty dark right now. We should add an ambient light and ensure the directional light is correctly set.

Editor Toolbar

  • Translate, Rotate, and Scale tools with icons
  • Should show active tool
  • Migrate to hamburger menu

HierarchyPanel - unnamed nodes in the gltf file

Currently, we do not deal with unnamed nodes, so the editor looks like this when we open a gltf file with many unnamed nodes. Any suggestion on how to handle unnamed nodes situation?
unnamed-nodes

I'm thinking about applying [unique_prefix]_x-y-z-... (x, y, z represents the index and layer the node saved in the gltf file) to unnamed nodes in SceneLoader.js.

TypeError when dragging .scene file into Viewport

Uncaught (in promise) TypeError: Failed to construct 'URL': Invalid base URL
    at SceneLoader.js:178
    at Generator.next (<anonymous>)
    at step (SceneLoader.js:2)
    at SceneLoader.js:2
    at new Promise (<anonymous>)
    at SceneLoader.js:2
    at loadSerializedScene (app.js:138303)
    at SceneLoader.js:263
    at Generator.next (<anonymous>)
    at step (SceneLoader.js:2)

glTF Export

  • Export modal
    • Author info
    • Copyright / license info
    • Thumbnail file picker
    • Output directory picker
  • Merge meshes with the same materials
  • Merge navigation meshes
  • Write component data to extensions
  • Remove objects marked as don't export
  • Pass optimized scene to THREE.GLTFExporter
  • Save exported json and bin files to output directory

FileDialog - files are out of the panel and the panel is not scrollable

Browser: Firefox

  1. Add a node to the scene
  2. Add a scene-ref component to the node
  3. Select a ref in the component
  4. Click on the ArchitectureKit directory
  • Buttons at the bottom are pushed out of the window due to the large number of files.
  • The panel should be scrollable to handle the large number of files.
    filedialog

glTF and Material Thumbnails

  • glTF models should have thumbnail images in the Asset Explorer / File Picker (Generate thumbnails on open project / file change event?)
  • material files should have thumbnail images in the Asset Explorer / File Picker (Render material on sphere with default light to thumbnail image)
  • Texture previews should be shown next to their respective file picker.

Support Multiple Viewports

You should be able to have viewports from various perspectives (left/right/top/bottom/front/back).

To Do:

  • Split out viewport specific code in Viewport.js
  • Figure out viewport panel UI/UX

File paths are inconsistent when round-tripping scenes

Things that refer to file paths (references, materials, material textures) can have very inconsistent file paths at the moment. I've seen everything from ./foo.file to /api/files/foo.file to http://hubs.local:9090/api/files/foo.file at various stages of adding, setting and saving components/scenes.
It can sometimes lead to scenes breaking.

Edit referenced scene in context of parent scene

This is a big feature. Right now when you edit a referenced scene, it opens that scene in isolation, but you really want to be able to edit it in context of the parent scene. Just putting it here to remember it.

Documentation

General documentation on using the editor. Getting started, task-specific tutorials, etc.

HierarchyPanel - Enable editing for children under duplicate roots

If we allow users to edit children under duplicate roots, there would be one situation that might confuse users when they reopen the .scene file.

Users might move children from one duplicate root to another one and then save the file. The changes won't be saved since we do not modify the gltf file, so users would still see all children attached to the first duplicate root when they reopen .scene file.

Conflict resolution

Show warnings when these things happen and allow non-destructive recovery.

  • Renamed/deleted nodes in inherited scene/gltf
  • Duplicate names
  • Missing resources

Export Modal

  • Author info (Moved to #220)
  • Copyright / license info (Moved to #216)
  • Thumbnail file picker (Moved to #223)
  • Output directory picker

Editor Pane Improvements

  • You should be able to reorganize the positions of the editor panes to better accommodate different screen sizes.
  • Your settings should persist between page loads (Probably save to localStorage)
  • You should be able to revert to the default layout.

Future additions could include saving layouts and some predefined layouts. As of now there are only 3 panes so I don't think that's necessary.

Editing Materials

  • Should be able to edit textures and material properties in the properties panel
  • Materials should be stored as a separate file and can be referenced by meshes in multiple scenes.
  • Should be able to clone an existing material (from a glTF file or material file)

File Picker

For picking material textures and scene/gltf references

Menu bar

  • File
    • New Scene
    • Open Project in Explorer
    • Save
    • Save As
    • Export
  • Help (Hotkeys / getting started guide / links to resources)

Improve color picker

Should show a swatch (and maybe hex/rgb/hsl) and only open full color picker on click.

Snap Options

  • Should be able to change position, rotation, and scale snap scale.
    • Uniform scale along all axes
    • Scale snapping for each axis individually
    • Hotkey for increasing / decreasing snap resolution

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.