mogl3d-editor
v1.3.3
Published
2024.07.15 | Ver 1.3.3: multiple 3d file upload error removed
Downloads
97
Readme
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/[email protected]/build/three.module.min.js"
}
}
</script>2️⃣ mogl3d editor
<script src="https://unpkg.com/[email protected]/lib/mogl3d-editor.js"></script>
<script src="https://unpkg.com/[email protected]/lib/mogl3d-editor.min.js"></script>threeModule.js
<script type="module">
import { ThreeModules } from 'https://unpkg.com/[email protected]/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/[email protected]/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/[email protected]/css/mogl3d_styles.css">
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/[email protected]/build/three.module.min.js"
}
}
</script>
<script src="https://unpkg.com/[email protected]/lib/mogl3d-editor.js"></script>
</head>
<body>
<h1> MOGL3D Editor </h1>
<div id="editor"></div>
<script type="module">
import { ThreeModules } from 'https://unpkg.com/[email protected]/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/[email protected]/css/mogl3d_styles.css">
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/[email protected]/build/three.module.min.js"
}
}
</script>
<script src="https://unpkg.com/[email protected]/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/[email protected]/plugin/threeModules.js';
import { OrbitControls } from 'https://unpkg.com/[email protected]/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>💬 Dependency
🚀 Used by
📜 License
This software is licensed under the MIT, ©CGHUB