写一个Orillusion编辑器(伪)
界面效果
思路
- bootstrap控制界面效果
- jquery动态修改界面内容
- [Add]增加一个box
- [Play]导出
play.html,打开play.html就可以看到程序运行效果
编辑器代码
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>编辑器title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">script>
<style>
body {
margin: 0;
width: 100%;
height: 100%;
}
#project {
position: absolute;
z-index: 100;
}
#propertyList {
position: absolute;
z-index: 100;
left: 80%;
right: 0px;
top: 25%;
}
#canvas {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 0;
background: transparent;
touch-action: none;
object-fit: cover;
}
style>
head>
<body οnresize="resize_canvas()">
<div class="panel panel-default" id="project">
<button type="button" class="btn btn-default" onclick="addBox()">Addbutton>
<button type="button" class="btn btn-default" onclick="startSimulate()">Playbutton>
<br />
project
<div class="panel-body">
<ul class="list-group" id="projectUl">
ul>
div>
div>
<div class="panel panel-default" id="propertyList">
property
<div class="panel-body" id="propertyListBody">
div>
div>
<canvas id="canvas">canvas>
<script type="importmap">
{
"imports": {
"@orillusion/core": "https://unpkg.com/@orillusion/core/dist/orillusion.es.js",
"@orillusion/stats": "https://unpkg.com/@orillusion/stats/dist/stats.es.js",
"dat.gui": "https://npm.elemecdn.com/[email protected]/build/dat.gui.module.js"
}
}
script>
<script type="module">
import { Engine3D, Scene3D, Object3D, Camera3D, ComponentBase, LitMaterial, BoxGeometry, MeshRenderer, DirectLight, PlaneGeometry, HoverCameraController, View3D, AtmosphericComponent } from '@orillusion/core'
import { Stats } from '@orillusion/stats'
import * as dat from 'dat.gui'
window.startGame = startGame
window.continueGame = continueGame
window.endGame = endGame
window.showMenu = showMenu
window.hideMenu = hideMenu
window.resize_canvas = resize_canvas
window.initGame = initGame
window.selectItem = selectItem
window.startSimulate = startSimulate
window.serializeGame = serializeGame
window.saveFile = saveFile
window.scene2Json = scene2Json
window.addBox = addBox
window.addCamera = addCamera
window.addLight = addLight
let gameState = 'none'
let GUIHelp
let gItemes = new Array()
let scene3D
let gCurrentItemIndex = -1
let gItemsSize = 0
let dataMap = []
function startGame() {
console.log("StartGame")
if (gameState == 'pause') {
continueGame()
return
}
hideMenu()
gameState = 'start'
initGame()
}
function continueGame() {
console.log("ContinueGame")
hideMenu()
if (gameState == 'none') {
startGame()
}
}
function endGame() {
console.log("EndGame")
// gameState = 'none'
}
function showMenu() {
console.log("showMenu")
// let canvas = document.getElementById('canvas')
// canvas.setAttribute('style', 'display:none');
if (gameState == 'start') {
gameState = 'pause'
Engine3D.pause()
}
}
function hideMenu() {
console.log("hideMenu")
let canvas = document.getElementById('canvas')
if (gameState == 'pause') {
gameState = 'start'
Engine3D.resume()
}
}
function resize_canvas() {
canvas = document.getElementById("canvas");
if (canvas.width < window.innerWidth) {
canvas.width = window.innerWidth;
}
if (canvas.height < window.innerHeight) {
canvas.height = window.innerHeight;
}
}
async function initGame() {
// initializa engine
await Engine3D.init({
canvasConfig: { canvas }
})
// create new scene as root node
scene3D = new Scene3D()
// add an Atmospheric sky enviroment
addSky()
// create camera
let camera = addCamera()
// create light
addLight()
// create new object
// create a view with target scene and camera
let view = new View3D()
view.scene = scene3D
view.camera = camera
// start render
Engine3D.startRenderView(view)
const GUIHelp = new dat.GUI()
GUIHelp.addFolder('Setting')
GUIHelp.add({ menu: () => showMenu() }, 'menu')
}
function addSky() {
let sky = scene3D.addComponent(AtmosphericComponent)
sky.sunY = 0.6
scene3D.name = 'scene3D'
gCurrentItemIndex = gItemes.length
$("#projectUl").append(" ")
gItemes.push({
"obj": scene3D,
"type": 'scene3D',
"scriptContent": "",
"scriptClassName": "",
})
return sky
}
function addBox() {
gCurrentItemIndex = gItemes.length
let name = 'box-' + gCurrentItemIndex
$("#projectUl").append(" ")
const obj = new Object3D()
obj.name = name
// add MeshRenderer
let mr = obj.addComponent(MeshRenderer)
// set geometry
mr.geometry = new BoxGeometry(5, 5, 5)
// set material
mr.material = new LitMaterial()
// add object
scene3D.addChild(obj)
gItemes.push({
"obj": obj,
"type": 'box',
"scriptContent": "",
"scriptClassName": "",
})
}
function addCamera() {
let cameraObj = new Object3D()
cameraObj.name = "camera"
let camera = cameraObj.addComponent(Camera3D)
// adjust camera view
camera.perspective(60, Engine3D.aspect, 1, 5000.0)
// set camera controller
let controller = cameraObj.addComponent(HoverCameraController)
controller.setCamera(0, 0, 15)
// add camera node
scene3D.addChild(cameraObj)
gCurrentItemIndex = gItemes.length
$("#projectUl").append(" ")
gItemes.push({
"obj": cameraObj,
"type": 'camera',
"scriptContent": "",
"scriptClassName": "",
})
return camera
}
function addLight() {
let light = new Object3D()
light.name = "light"
// add direct light component
let component = light.addComponent(DirectLight)
// adjust lighting
light.rotationX = 45
light.rotationY = 30
component.intensity = 1
// add light object
scene3D.addChild(light)
gCurrentItemIndex = gItemes.length
$("#projectUl").append(" ")
gItemes.push({
"obj": light,
"type": 'light',
"scriptContent": "",
"scriptClassName": "",
})
return light
}
function selectItem(index) {
console.log("selectItemIndex: " + index)
gCurrentItemIndex = index
showItemProrperty(gItemes[index])
}
function showItemProrperty(item) {
let name = item['obj'].name
console.log("showItemProrperty: " + item)
$("#propertyListBody").empty()
// let obj = scene3D.getObjectByName(name)
let obj = item['obj']
if (!obj) {
console.warn("scene3D not find: " + name)
return
}
$("#propertyListBody").append(" name+ obj.name + ">
")
let trans = obj.transform
$("#propertyListBody").append("transform
")
$("#propertyListBody").append("position
")
$("#propertyListBody").append(" x+ trans.x + ">")
$("#propertyListBody").append(" y+ trans.y + ">")
$("#propertyListBody").append(" z+ trans.z + ">")
$("#transX").change(function () { obj.x = $("#transX").val() })
$("#transY").change(function () { obj.y = $("#transY").val() })
$("#transZ").change(function () { obj.z = $("#transZ").val() })
$("#propertyListBody").append("script
")
$("#propertyListBody").append("")
// console.log("----------" + item.scriptContent + "-" + item.scriptClassName)
$("#textareaScript").change(function () {
let str = $("#textareaScript").val()
let className = str.split(/\s* extends/)[0].replace('class', '')
console.log("className = " + className + ";gCurrentItemIndex=" + gCurrentItemIndex + ";str=" + str)
if (gCurrentItemIndex > -1) {
gItemes[gCurrentItemIndex].scriptContent = str
gItemes[gCurrentItemIndex].scriptClassName = className.trim()
}
})
}
function startSimulate() {
serializeGame()
}
function serializeGame() {
saveFile('play.html')
}
async function getFile() {
// Open file picker and destructure the result the first handle
const [fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
return file;
}
async function saveFile(path) {
// create a new handle
const newHandle = await window.showSaveFilePicker();
// create a FileSystemWritableFileStream to write to
const writableStream = await newHandle.createWritable();
dataMap = []
let data = scene2Json()
console.log("scene2Json=" + data)
// write our file
await writableStream.write("");
await writableStream.write("");
await writableStream.write("\n");
await writableStream.write("\n");
await writableStream.write("Play \n");
await writableStream.write("\n");
await writableStream.write("\n");
await writableStream.write("