Mogl3d-editor NPM

MOGL3D-Editor Ver 1.2.1

Demo Link: MOGL3D.com ( Ctrl+click: Open link in a new window )

🏷️ Web 3D Wysiwyg Editor

In version 1.xx, only the 3D file upload feature is provided, and the supported 3D file formats are as follows:

fbx
gltf
obj

⚙️ Install

| CDN

1️⃣ three.js module

three.js module

 <script type="importmap">
 {
   "imports":{
      "three":"https://unpkg.com/three@0.159.0/build/three.module.min.js"
   }
 }
</script>

2️⃣ mogl3d editor

  <script src="https://unpkg.com/mogl3d-editor@1.2.0/lib/mogl3d-editor.js"></script>
  <script src="https://unpkg.com/mogl3d-editor@1.2.0/lib/mogl3d-editor.min.js"></script>

threeModule.js

    <script type="module">
        import { ThreeModules } from 'https://unpkg.com/mogl3d-editor@1.2.0/plugin/threeModules.min.js';
    </script>

3️⃣ CSS link

install font-awesome.css

    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
        <link rel="stylesheet" href="https://unpkg.com/mogl3d-editor@1.2.0/css/mogl3d_styles.css">
    </head>

🖥️ Usage

| Example

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="https://unpkg.com/mogl3d-editor@1.2.0/css/mogl3d_styles.css">

    <script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/three@0.159.0/build/three.module.min.js"
            }
        }
    </script>
    <script src="https://unpkg.com/mogl3d-editor@1.2.0/lib/mogl3d-editor.js"></script>

</head>
<body>

    <h1> MOGL3D Editor </h1>
    <div id="editor"></div>

    <script type="module">
        
        import { ThreeModules } from 'https://unpkg.com/mogl3d-editor@1.2.0/plugin/threeModules.min.js';
        
        const editor = document.getElementById('editor');
        const myEditor = new MOGL3D({
            element: editor,
            editorName: 'mogl3d-content'  // User customization allowed 
        }); 

    </script>

</body>
</html>

| Execute

📖 Options

| actions

    <script>
    const myEditor = new MOGL3D( editor, {
            actions:[
                 'italic',
                 'bold',
                 'fontMenu',
            ]
    });
    </script>

「 italic 」👉 Make text Italicize
「 bold 」👉 Make text Bold
「 underline 」👉 Make text underline
「 strikethrough 」👉 Strikethrough text
「 fontMenu 」👉 Change font size and styles
「 textColorMenu 」👉 Change font color and background color
「 alignMenu 」👉 Change font alignment
「 line 」👉 Make Horizontal line
「 olist 」👉 Create table of contents
「 quote 」👉 Make blockquote in sentences
「 ulist 」👉 Create numbered lists
「 filesMenu 」👉 Make file upload menus

| onChange

    <script>
        const myEditor = new MOGL3D({
            
            element: editorElement,
            editorName: 'mogl3d-content',
            onChange: function ( html, models ) {
                console.log(`datas: ${html}, models: ${models}`)
            },
            plugins: [{
                'threeModules': ThreeModules,
            }],

        });
    </script>

output

| plugins

    <script>
        import { ThreeModules } from './plugin/threeModules.js';
        const myEditor = new MOGL3D({
            // etc..
            plugins: [{
                'threeModules': ThreeModules,
            }],
        });
    </script>

💡 Dev(API)

| Output

.getOutputData( ⓐ )

    <script>
        document.getElementById('data-button').addEventListener('click', async (e) => {

            const outputDatas = await myEditor.getOutputData( myEditor );
            console.log('Output: ', outputDatas );

        });
    </script>

| Example 「Data(htlm, files) to Server & Server to HTML」

    <html>
        <head>
            <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
            <link rel="stylesheet" href="https://unpkg.com/mogl3d-editor@1.2.0/css/mogl3d_styles.css">
            <script type="importmap">
                {
                    "imports": {
                        "three": "https://unpkg.com/three@0.159.0/build/three.module.min.js"
                    }
                }
            </script>
            <script src="https://unpkg.com/mogl3d-editor@1.2.0/lib/mogl3d-editor.js"></script>
        </head>
        <body>

            <div id="editor" class="mogl3d"></div>

            <div>
                <h3>Text output: <button id='publish-button'>Publish</button></h3>
                <div id="text-output"></div>
            </div>
    
            <div>
                <h3>HTML output: <button id='data-button'>Data</button></h3>
                <pre id="html-output" class="html-output"></pre>
            </div>

            <script type="module">
                import { ThreeModules } from 'https://unpkg.com/mogl3d-editor@1.2.0/plugin/threeModules.js';
                import { OrbitControls } from 'https://unpkg.com/three@0.159.0/examples/jsm/controls/OrbitControls.js';
                import * as THREE from 'three';

                const editorElement = document.getElementById('editor');
                const myEditor = new MOGL3D({
                    // actions:[
                    //     'italic',
                    //     'bold',
                    //     'fontMenu',
                    // ],
                    element: editorElement,
                    editorName: 'mogl3d-content',
                    onChange: function ( html, models ) {
                        console.log(`datas: ${html}, models: ${models}`)
                        // document.getElementById('html-output').textContent = html;
                    },
                    plugins: [{
                        'threeModules': ThreeModules,
                    }]
                });


                // When transfer datas(html and files) to server..
                document.getElementById('data-button').addEventListener('click', async (e) => {
                    const outputDatas = await myEditor.getOutputData( myEditor );
                    console.log('Output: ', outputDatas );
                });


                // When receive datas(html & files) from server..
                document.getElementById('publish-button').addEventListener('click', e => {

                    const textOutputArea = document.querySelector('#text-output');
                    const contentNode = document.querySelector(`.${myEditor.editorName}`);
                    let models = myEditor.getModels();

                        textOutputArea.innerHTML = contentNode.innerHTML;

                        if( models ) {
                
                            models.map( model => {
                    
                                for( let item in model ) {
                        
                                    let node = textOutputArea.querySelector(`[title="${item}"]`);
                                    if( node.firstChild ) node.removeChild( node.firstChild );
                        
                                    let obj = model[item].clone();
                                    let threeModules = new ThreeModules({
                                        editor: document.querySelector('#editor')
                                    });
                            
                                    threeModules.init( node, obj );
                                }
                            }) // .map() End
                
                        } // if End

                }) // publis-button Evt End

        </script>

        </body>    
    </html>