x3dom/component-editor

A simple 3D component editor, based on X3DOM

Welcome to X3DOM

X3DOM is a framework for integrating and manipulating (X)3D scenes as HTML5 DOM elements, which are rendered via WebGL without additional plugins. The open-source system allows defining 3D scene description and runtime behavior declaratively, without any low-level JavaScript or GLSL coding.

Getting Started

Please have a look at the official documentation in order to get started:

https://doc.x3dom.org (or https://x3dom.netlify.com/doc/index.html for doc. development)

https://doc.x3dom.org/tutorials/basics/hello/index.html describes a minimal starter scene.

https://www.x3dom.org/download (or https://x3dom.netlify.com/ for latest development) serves various versions of the x3dom framework.

Need Help?

If you want to use X3DOM and seek help or sharing of knowledge, please use the x3dom-users mailing list or the forums. Beginner questions usually have been asked already and in many cases the mailinglist or forum archives provide quick answers to many questions.

If you decide to post to the mailing list or forum, please include as much info as possible and describe your problem and what you tried already succinctly.

Mailing List

Please use the mailing lists as much as you can. The x3dom-users list is the one you are most likely interested in and the first address for help or questions.

Chat

There is a gitter chat room for realtime, ephemeral interaction if preferred.

Issue Tracker

Please report issues and attach patches here. For general help and questions direct your inquiry to the x3dom-users mailing list or one of the forums.

https://github.com/x3dom/x3dom/issues

Uploading Files to the Issue Tracker The GitHub issue tracker does not allow to upload files. However, there is a service that helps you with sharing files: https://gist.github.com. Just copy and paste your file contents there and then copy the Gist URL into the issues form.

It immensely helps us if you can provide a live web page illustrating your problem. So if you have webspace and can upload and post the URL with your issue, the chances we will have a look at it increase.

Contributing

We encourage you to contribute to X3DOM! If you would like to contribute to X3DOM, you should subscribe to the developers mailing list (x3dom-dev), where the developers of X3DOM discuss the development of the library itself.

You can send pull requests via GitHub. Patches should:

1. Follow the style of the existing code.
2. One commit should do exactly one thing.
3. Commit messages should start with a summary line below 80 characters followed by a blank line, and then the reasoning/analysis for why the change was made (if appropriate).
4. Commits that fix a bug in a previous commit (which has already been merged) should start with fixup! and then the summary line of the commit it fixes.
5. Rebase your branch against the upstream’s master. We don’t want to pull redundant merge commits.
6. Be clear about what license applies to your patch: The files within this repository are under the GPL3 (or later) but, as the original creators, we are still allowed to create non-free derivatives. However, if patches are given to us under GPL then those cannot make it into any non-free derivatives we may later wish to create. So to make it easier for us (and avoid any legal issues) we prefer if patches are released as public domain.

GitHub Workflow

Developing patches should follow this workflow:

1. Fork on GitHub (click Fork button)
2. Clone to computer: git clone [email protected]:«github account»/x3dom.git
3. cd into your repo: cd x3dom
4. Set up remote upstream: git remote add -f upstream git://github.com/x3dom/x3dom.git
5. Create a branch for the new feature: git checkout -b my_new_feature
6. Work on your feature, add and commit as usual

Creating a branch is not strictly necessary, but it makes it easy to delete your branch when the feature has been merged into upstream, diff your branch with the version that actually ended in upstream, and to submit pull requests for multiple features (branches).

7. Push branch to GitHub: git push origin my_new_feature
8. Issue pull request: Click Pull Request button on GitHub

Useful Commands

If a lot of changes have happened upstream you can replay your local changes on top of these, this is done with rebase, e.g.:

git fetch upstream
git rebase upstream/master

This will fetch changes and re-apply your commits on top of these.

This is generally better than merge, as it will give a clear picture of which commits are local to your branch. It will also “prune” any of your local commits if the same changes have been applied upstream.

You can use -i with rebase for an “interactive” rebase. This allows you to drop, re-arrange, merge, and reword commits, e.g.:

git rebase -i upstream/master

There's always the x3dom-dev mailinglist.

Build Instructions

1. Install Node.js
2. Navigate to your cloned x3dom repository cd ./YOUR_PATH/x3dom
3. Run npm install
4. Run npm run build

component-editor's Issues

import x3d

Hi,
I read the code and i dont know how import x3d with texture as element.
It is possible?

Tx

How long did it take you to build this?

Not really a question but I thought other people might wonder as well, so I rather ask here than via email.

Cheers.

Cool thing btw 👍

Extended component-editor to Assembler

I wish to start with this component-editor and extend it to an assembler -- an application that can access URLs for loading Inlines, glTF, and other external files. I have been digging through the code and have the beginnings of some concepts of how to do this.

I have spoken to Max about it and he suggested a rename or fork of component-editor since it is beyond the scope of the original project.

Before I start I would like to ask the community if anyone has considered doing this or might have some insights as to the "proper" way to go about this extension. I will post the new project to GitHub when I've got something that works or other wish to collaborate.

Allowing to export & import x3d Files

Maybe there is a reason why so far the export and import is using JSON files. But isn't the goal of x3dom to help spread the x3d file format as the standard to exchange 3D-Model data in the web. I therefore was wondering ever since I came along this example project editor, why it would not allow import and export of x3d file format data. Any explanation would be quite appreciated.
If there is no good explanation, I think x3d import/ export would be an important functionality for the component-editor. Hence I created this issue.

update to 1.7.2

The editor still works with 1.7.2, as it should:
https://rawgit.com/andreasplesch/component-editor/b3b664970c54a31812cf42c6f66cb0de313f2397/component_editor/index.html

3D Navigation Cube - how to synchronize interaction on the cube back to the main scene?

This question has been asked offline by users.

It seems the main problem is that the center of rotation of the main scene is not taken into account, since the small scene showing the navigation cube always has a center of rotation at the origin.

One could therefore try the following, in order to rotate around the main scene's center:

• Consider the view matrix of the 3D cube scene a rotation matrix R
• Obtain the center of rotation c from the main scene
• Create a translation matrix T- that translates by -c
• Create a translation matrix T+ that translates by +c
• Set the view matrix of the main scene to T+ * R * T-

This is of course without any guarantee for correctness - I didn't try ;-)
Just a proposal how to start.