Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Editor: Introduce ES6 modules. #16968

Closed
wants to merge 4 commits into from
Closed

Editor: Introduce ES6 modules. #16968

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
56f4a66
Editor: Introduce ES6 modules.
Mugen87 Jul 2, 2019
cbc8d64
Editor: Clean up
Mugen87 Jul 2, 2019
c3b34bb
Editor: Rename UI classes.
Mugen87 Jul 2, 2019
a4ea33d
Editor: Clean up.
Mugen87 Jul 2, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
150 changes: 21 additions & 129 deletions editor/index.html
View file
Open in desktop
Expand Up @@ -12,55 +12,19 @@
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" id="theme" href="css/light.css">

<script src="../build/three.js"></script>
<script src="../build/three.js"></script> <!-- necessary to run scripts -->

<script src="../examples/js/controls/EditorControls.js"></script>
<script src="../examples/js/controls/TransformControls.js"></script>

<script src="../examples/js/libs/chevrotain.min.js"></script> <!-- VRML -->
<script src="../examples/js/libs/jszip.min.js"></script>
<script src="../examples/js/libs/inflate.min.js"></script> <!-- FBX -->
<script src="../examples/js/libs/lzma.js"></script> <!-- CTM -->
<script src="../examples/js/libs/ctm.js"></script> <!-- CTM -->

<script src="../examples/js/loaders/AMFLoader.js"></script>
<script src="../examples/js/loaders/AWDLoader.js"></script>
<script src="../examples/js/loaders/BabylonLoader.js"></script>
<script src="../examples/js/loaders/ColladaLoader.js"></script>
<script src="../examples/js/loaders/DRACOLoader.js"></script>
<script src="../examples/js/loaders/FBXLoader.js"></script>
<script src="../examples/js/loaders/GLTFLoader.js"></script>
<script src="../examples/js/loaders/deprecated/LegacyGLTFLoader.js"></script>
<script src="../examples/js/loaders/KMZLoader.js"></script>
<script src="../examples/js/loaders/MD2Loader.js"></script>
<script src="../examples/js/loaders/OBJLoader.js"></script>
<script src="../examples/js/loaders/MTLLoader.js"></script>
<script src="../examples/js/loaders/PlayCanvasLoader.js"></script>
<script src="../examples/js/loaders/PLYLoader.js"></script>
<script src="../examples/js/loaders/STLLoader.js"></script>
<script src="../examples/js/loaders/SVGLoader.js"></script>
<script src="../examples/js/loaders/TGALoader.js"></script>
<script src="../examples/js/loaders/TDSLoader.js"></script>
<script src="../examples/js/loaders/VRMLLoader.js"></script>
<script src="../examples/js/loaders/VTKLoader.js"></script>
<script src="../examples/js/loaders/ctm/CTMLoader.js"></script>

<script src="../examples/js/exporters/ColladaExporter.js"></script>
<script src="../examples/js/exporters/GLTFExporter.js"></script>
<script src="../examples/js/exporters/OBJExporter.js"></script>
<script src="../examples/js/exporters/STLExporter.js"></script>

<script src="../examples/js/renderers/Projector.js"></script>
<script src="../examples/js/renderers/RaytracingRenderer.js"></script>
<script src="../examples/js/renderers/SoftwareRenderer.js"></script>
<script src="../examples/js/renderers/SVGRenderer.js"></script>

<link rel="stylesheet" href="js/libs/codemirror/codemirror.css">
<link rel="stylesheet" href="js/libs/codemirror/theme/monokai.css">
<script src="js/libs/codemirror/codemirror.js"></script>
<script src="js/libs/codemirror/mode/javascript.js"></script>
<script src="js/libs/codemirror/mode/glsl.js"></script>

<script src="js/libs/app.js"></script>
<script src="js/libs/system.min.js"></script>
<script src="js/libs/esprima.js"></script>
<script src="js/libs/jsonlint.js"></script>
Expand All @@ -83,103 +47,31 @@
<script src="js/libs/ternjs/infer.js"></script>
<script src="js/libs/ternjs/doc_comment.js"></script>
<script src="js/libs/tern-threejs/threejs.js"></script>

<script src="js/libs/signals.min.js"></script>
<script src="js/libs/ui.js"></script>
<script src="js/libs/ui.three.js"></script>

<script src="js/libs/html2canvas.js"></script>
<script src="js/libs/three.html.js"></script>

<script src="js/libs/app.js"></script>
<script src="js/Player.js"></script>
<script src="js/Script.js"></script>

<script src="../examples/js/vr/WebVR.js"></script>

<script src="js/Storage.js"></script>

<script src="js/Editor.js"></script>
<script src="js/Config.js"></script>
<script src="js/History.js"></script>
<script src="js/Loader.js"></script>
<script src="js/Menubar.js"></script>
<script src="js/Menubar.File.js"></script>
<script src="js/Menubar.Edit.js"></script>
<script src="js/Menubar.Add.js"></script>
<script src="js/Menubar.Play.js"></script>
<!-- <script src="js/Menubar.View.js"></script> -->
<script src="js/Menubar.Examples.js"></script>
<script src="js/Menubar.Help.js"></script>
<script src="js/Menubar.Status.js"></script>
<script src="js/Sidebar.js"></script>
<script src="js/Sidebar.Scene.js"></script>
<script src="js/Sidebar.Project.js"></script>
<script src="js/Sidebar.Settings.js"></script>
<script src="js/Sidebar.Settings.Shortcuts.js"></script>
<script src="js/Sidebar.Settings.Viewport.js"></script>
<script src="js/Sidebar.Properties.js"></script>
<script src="js/Sidebar.Object.js"></script>
<script src="js/Sidebar.Geometry.js"></script>
<script src="js/Sidebar.Geometry.Geometry.js"></script>
<script src="js/Sidebar.Geometry.BufferGeometry.js"></script>
<script src="js/Sidebar.Geometry.Modifiers.js"></script>
<script src="js/Sidebar.Geometry.BoxGeometry.js"></script>
<script src="js/Sidebar.Geometry.CircleGeometry.js"></script>
<script src="js/Sidebar.Geometry.CylinderGeometry.js"></script>
<script src="js/Sidebar.Geometry.ExtrudeGeometry.js"></script>
<script src="js/Sidebar.Geometry.IcosahedronGeometry.js"></script>
<script src="js/Sidebar.Geometry.OctahedronGeometry.js"></script>
<script src="js/Sidebar.Geometry.PlaneGeometry.js"></script>
<script src="js/Sidebar.Geometry.RingGeometry.js"></script>
<script src="js/Sidebar.Geometry.SphereGeometry.js"></script>
<script src="js/Sidebar.Geometry.ShapeGeometry.js"></script>
<script src="js/Sidebar.Geometry.TetrahedronGeometry.js"></script>
<script src="js/Sidebar.Geometry.TorusGeometry.js"></script>
<script src="js/Sidebar.Geometry.TorusKnotGeometry.js"></script>
<script src="js/Sidebar.Geometry.TubeGeometry.js"></script>
<script src="../examples/js/geometries/TeapotBufferGeometry.js"></script>
<script src="js/Sidebar.Geometry.TeapotBufferGeometry.js"></script>
<script src="js/Sidebar.Geometry.LatheGeometry.js"></script>
<script src="js/Sidebar.Material.js"></script>
<script src="js/Sidebar.Animation.js"></script>
<script src="js/Sidebar.Script.js"></script>
<script src="js/Sidebar.History.js"></script>
<script src="js/Strings.js"></script>
<script src="js/Toolbar.js"></script>
<script src="js/Viewport.js"></script>
<script src="js/Viewport.Camera.js"></script>
<script src="js/Viewport.Info.js"></script>

<script src="js/Command.js"></script>
<script src="js/commands/AddObjectCommand.js"></script>
<script src="js/commands/RemoveObjectCommand.js"></script>
<script src="js/commands/MoveObjectCommand.js"></script>
<script src="js/commands/SetPositionCommand.js"></script>
<script src="js/commands/SetRotationCommand.js"></script>
<script src="js/commands/SetScaleCommand.js"></script>
<script src="js/commands/SetValueCommand.js"></script>
<script src="js/commands/SetUuidCommand.js"></script>
<script src="js/commands/SetColorCommand.js"></script>
<script src="js/commands/SetGeometryCommand.js"></script>
<script src="js/commands/SetGeometryValueCommand.js"></script>
<script src="js/commands/MultiCmdsCommand.js"></script>
<script src="js/commands/AddScriptCommand.js"></script>
<script src="js/commands/RemoveScriptCommand.js"></script>
<script src="js/commands/SetScriptValueCommand.js"></script>
<script src="js/commands/SetMaterialCommand.js"></script>
<script src="js/commands/SetMaterialValueCommand.js"></script>
<script src="js/commands/SetMaterialColorCommand.js"></script>
<script src="js/commands/SetMaterialMapCommand.js"></script>
<script src="js/commands/SetSceneCommand.js"></script>

<script>
<script type="module">

import { FileLoader } from '../build/three.module.js';

import { Editor } from './js/Editor.js';
import { Viewport } from './js/Viewport.js';
import { Toolbar } from './js/Toolbar.js';
import { Script } from './js/Script.js';
import { Player } from './js/Player.js';
import { Sidebar } from './js/Sidebar.js';
import { Menubar } from './js/Menubar.js';

window.URL = window.URL || window.webkitURL;
window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder;

Number.prototype.format = function (){
return this.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
Number.prototype.format = function () {

return this.toString().replace( /(\d)(?=(\d{3})+(?!\d))/g, "$1," );

};

//
Expand Down Expand Up @@ -234,7 +126,7 @@

var timeout;

function saveState( scene ) {
function saveState() {

if ( editor.config.getKey( 'autosave' ) === false ) {

Expand All @@ -258,7 +150,7 @@

}, 1000 );

};
}

var signals = editor.signals;

Expand Down Expand Up @@ -292,7 +184,7 @@

}, false );

function onWindowResize( event ) {
function onWindowResize() {

editor.signals.windowResize.dispatch();

Expand All @@ -313,7 +205,7 @@

if ( confirm( 'Any unsaved data will be lost. Are you sure?' ) ) {

var loader = new THREE.FileLoader();
var loader = new FileLoader();
loader.crossOrigin = '';
loader.load( file, function ( text ) {

Expand Down
2 changes: 2 additions & 0 deletions editor/js/Command.js
View file
Open in desktop
Expand Up @@ -38,3 +38,5 @@ Command.prototype.fromJSON = function ( json ) {
this.name = json.name;

};

export { Command };
2 changes: 2 additions & 0 deletions editor/js/Config.js
View file
Open in desktop
Expand Up @@ -77,3 +77,5 @@ var Config = function () {
};

};

export { Config };
62 changes: 44 additions & 18 deletions editor/js/Editor.js
View file
Open in desktop
Expand Up @@ -2,12 +2,36 @@
* @author mrdoob / http://mrdoob.com/
*/

import {
AnimationMixer,
CameraHelper,
Color,
DirectionalLightHelper,
HemisphereLightHelper,
Mesh,
MeshBasicMaterial,
ObjectLoader,
PerspectiveCamera,
PointLightHelper,
Scene,
SkeletonHelper,
SphereBufferGeometry,
SpotLightHelper,
Vector3
} from '../../build/three.module.js';

import { Config } from './Config.js';
import { Loader } from './Loader.js';
import { History as _History } from './History.js';
import { Strings } from './Strings.js';
import { Storage as _Storage } from './Storage.js';

var Editor = function () {

this.DEFAULT_CAMERA = new THREE.PerspectiveCamera( 50, 1, 0.01, 1000 );
this.DEFAULT_CAMERA = new PerspectiveCamera( 50, 1, 0.01, 1000 );
this.DEFAULT_CAMERA.name = 'Camera';
this.DEFAULT_CAMERA.position.set( 0, 5, 10 );
this.DEFAULT_CAMERA.lookAt( new THREE.Vector3() );
this.DEFAULT_CAMERA.lookAt( new Vector3() );

var Signal = signals.Signal;

Expand Down Expand Up @@ -74,19 +98,19 @@ var Editor = function () {
};

this.config = new Config();
this.history = new History( this );
this.storage = new Storage();
this.history = new _History( this );
this.storage = new _Storage();
this.strings = new Strings( this.config );

this.loader = new Loader( this );

this.camera = this.DEFAULT_CAMERA.clone();

this.scene = new THREE.Scene();
this.scene = new Scene();
this.scene.name = 'Scene';
this.scene.background = new THREE.Color( 0xaaaaaa );
this.scene.background = new Color( 0xaaaaaa );

this.sceneHelpers = new THREE.Scene();
this.sceneHelpers = new Scene();

this.object = {};
this.geometries = {};
Expand All @@ -95,7 +119,7 @@ var Editor = function () {
this.scripts = {};

this.animations = {};
this.mixer = new THREE.AnimationMixer( this.scene );
this.mixer = new AnimationMixer( this.scene );

this.selected = null;
this.helpers = {};
Expand Down Expand Up @@ -290,36 +314,36 @@ Editor.prototype = {

addHelper: function () {

var geometry = new THREE.SphereBufferGeometry( 2, 4, 2 );
var material = new THREE.MeshBasicMaterial( { color: 0xff0000, visible: false } );
var geometry = new SphereBufferGeometry( 2, 4, 2 );
var material = new MeshBasicMaterial( { color: 0xff0000, visible: false } );

return function ( object ) {

var helper;

if ( object.isCamera ) {

helper = new THREE.CameraHelper( object, 1 );
helper = new CameraHelper( object, 1 );

} else if ( object.isPointLight ) {

helper = new THREE.PointLightHelper( object, 1 );
helper = new PointLightHelper( object, 1 );

} else if ( object.isDirectionalLight ) {

helper = new THREE.DirectionalLightHelper( object, 1 );
helper = new DirectionalLightHelper( object, 1 );

} else if ( object.isSpotLight ) {

helper = new THREE.SpotLightHelper( object, 1 );
helper = new SpotLightHelper( object, 1 );

} else if ( object.isHemisphereLight ) {

helper = new THREE.HemisphereLightHelper( object, 1 );
helper = new HemisphereLightHelper( object, 1 );

} else if ( object.isSkinnedMesh ) {

helper = new THREE.SkeletonHelper( object.skeleton.bones[ 0 ] );
helper = new SkeletonHelper( object.skeleton.bones[ 0 ] );

} else {

Expand All @@ -328,7 +352,7 @@ Editor.prototype = {

}

var picker = new THREE.Mesh( geometry, material );
var picker = new Mesh( geometry, material );
picker.name = 'picker';
picker.userData.object = object;
helper.add( picker );
Expand Down Expand Up @@ -533,7 +557,7 @@ Editor.prototype = {

fromJSON: function ( json ) {

var loader = new THREE.ObjectLoader();
var loader = new ObjectLoader();

// backwards

Expand Down Expand Up @@ -619,3 +643,5 @@ Editor.prototype = {
}

};

export { Editor };
4 changes: 3 additions & 1 deletion editor/js/History.js
View file
Open in desktop
Expand Up @@ -3,7 +3,7 @@
* Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
*/

History = function ( editor ) {
var History = function ( editor ) {

this.editor = editor;
this.undos = [];
Expand Down Expand Up @@ -317,3 +317,5 @@ History.prototype = {
}

};

export { History };