Skip to content
Permalink
Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
809 lines (583 sloc) 21 KB
<!DOCTYPE html>
<html lang="en">
<head>
<title>Audax 3D Builder</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
</head>
<body ontouchstart="">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<link href="css/main.css" rel="stylesheet" />
<link id="theme" href="css/light.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="../build/three.js"></script>
<script src="../examples/js/libs/system.min.js"></script>
<script src="../examples/js/controls/EditorControls.js"></script>
<script src="../examples/js/controls/TransformControls.js"></script>
<script src="../examples/js/controls/OrbitControls.js"></script>
<script src="../examples/js/libs/jszip.min.js"></script>
<script src="../examples/js/libs/inflate.min.js"></script>
<script src="../examples/js/utils/SceneUtils.js"></script>
<!-- FBX -->
<!-- <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/lzma.js"></script>
<script src="../examples/js/loaders/ctm/ctm.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/CanvasRenderer.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/esprima.js"></script>
<script src="js/libs/jsonlint.js"></script>
<script src="js/libs/glslprep.min.js"></script>
<link rel="stylesheet" href="js/libs/codemirror/addon/dialog.css">
<link rel="stylesheet" href="js/libs/codemirror/addon/show-hint.css">
<link rel="stylesheet" href="js/libs/codemirror/addon/tern.css">
<script src="js/libs/codemirror/addon/dialog.js"></script>
<script src="js/libs/codemirror/addon/show-hint.js"></script>
<script src="js/libs/codemirror/addon/tern.js"></script>
<script src="js/libs/acorn/acorn.js"></script>
<script src="js/libs/acorn/acorn_loose.js"></script>
<script src="js/libs/acorn/walk.js"></script>
<script src="js/libs/ternjs/polyfill.js"></script>
<script src="js/libs/ternjs/signal.js"></script>
<script src="js/libs/ternjs/tern.js"></script>
<script src="js/libs/ternjs/def.js"></script>
<script src="js/libs/ternjs/comment.js"></script>
<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/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.IcosahedronGeometry.js"></script>
<script src="js/Sidebar.Geometry.PlaneGeometry.js"></script>
<script src="js/Sidebar.Geometry.SphereGeometry.js"></script>
<script src="js/Sidebar.Geometry.TorusGeometry.js"></script>
<script src="js/Sidebar.Geometry.TorusKnotGeometry.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/Toolbar.js"></script>
<script src="js/Viewport.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>
<!----------- Add Light-------------------->
<script src="Fabric/texture.js"></script>
<script src="js/libs/html2canvas.js"></script>
<script src="js/libs/three.html.js"></script>
<div class="header">
<a class="logo" href="#"><img src="https://audaxlabs.com/wp-content/uploads/2018/06/white-logo-1.png"></a>
</div>
<div class="leftbox">
<h2>Products</h2>
<p>Choose product type</p>
<ul>
<li><a href="javascript:void(0)" onclick="framewall2()">
<span>Wave Wall</span>
</a></li>
<li><a href="javascript:void(0)" onclick="framewall()">
<span>Frame Wall</span>
</a></li>
</ul>
<div class="texture">
<h3>Fabric</h3>
<ul>
<li><img src="texture/BeehiveNectar.jpg"></li>
<li><img src="texture/LussoLouboutin.jpg"></li>
<li><img src="texture/WoodTexture001.jpg"></li>
<li><img src="texture/Worsted_Pasture.jpg"></li>
<li><img src="texture/FB-XX-BU.jpg"></li>
<li><img src="texture/FB-XX-GN.jpg"></li>
<li><img src="texture/FB-XX-OR.jpg"></li>
<li><img src="texture/CS-24-WEB-BU.png"></li>
<li><img src="texture/CS-24-WEB-DG.png"></li>
<li><img src="texture/CS-24-WEB-OR.png"></li>
<li><img src="texture/CS-24-WEB-RD.png"></li>
<li><img src="texture/CS-24-WEB-BK.png"></li>
</ul>
</div>
</div>
<script>
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,");
};
//
var editor = new Editor();
//var boundingBoxHelperObject = new THREE.BoundingBoxHelper( object )
//boundingBoxHelperObject.box.intersectsBox( anotherBoxHelperObject.box )
var viewport = new Viewport( editor );
document.body.appendChild( viewport.dom );
var toolbar = new Toolbar( editor );
document.body.appendChild( toolbar.dom );
var script = new Script( editor );
document.body.appendChild( script.dom );
var player = new Player( editor );
document.body.appendChild( player.dom );
var menubar = new Menubar( editor );
document.body.appendChild( menubar.dom );
var sidebar = new Sidebar( editor );
document.body.appendChild( sidebar.dom );
var modal = new UI.Modal();
document.body.appendChild( modal.dom );
editor.setTheme( editor.config.getKey( 'theme' ) );
editor.storage.init( function () {
editor.storage.get( function ( state ) {
if ( isLoadingFromHash ) return;
if ( state !== undefined ) {
editor.fromJSON( state );
}
var selected = editor.config.getKey( 'selected' );
if ( selected !== undefined ) {
editor.selectByUuid( selected );
}
} );
var timeout;
function saveState( scene ) {
if ( editor.config.getKey( 'autosave' ) === false ) {
return;
}
clearTimeout( timeout );
timeout = setTimeout( function () {
editor.signals.savingStarted.dispatch();
timeout = setTimeout( function () {
editor.storage.set( editor.toJSON() );
editor.signals.savingFinished.dispatch();
}, 100 );
}, 1000 );
};
var signals = editor.signals;
signals.geometryChanged.add( saveState );
signals.objectAdded.add( saveState );
signals.objectChanged.add( saveState );
signals.objectRemoved.add( saveState );
signals.materialChanged.add( saveState );
signals.sceneBackgroundChanged.add( saveState );
signals.sceneFogChanged.add( saveState );
signals.sceneGraphChanged.add( saveState );
signals.scriptChanged.add( saveState );
signals.historyChanged.add( saveState );
signals.showModal.add( function ( content ) {
modal.show( content );
} );
} );
//
document.addEventListener( 'dragover', function ( event ) {
//event.preventDefault();
event.dataTransfer.dropEffect = 'copy';
}, false );
document.addEventListener( 'drop', function ( event ) {
//event.preventDefault();
editor.loader.loadFiles( event.dataTransfer.files );
}, false );
function onWindowResize( event ) {
editor.signals.windowResize.dispatch();
}
window.addEventListener( 'resize', onWindowResize, false );
onWindowResize();
//
var isLoadingFromHash = false;
var hash = window.location.hash;
if ( hash.substr( 1, 5 ) === 'file=' ) {
var file = hash.substr( 6 );
if ( confirm( 'Any unsaved data will be lost. Are you sure?' ) ) {
var loader = new THREE.FileLoader();
loader.crossOrigin = '';
loader.load( file, function ( text ) {
editor.clear();
editor.fromJSON( JSON.parse( text ) );
} );
isLoadingFromHash = true;
}
}
/*-----------------------ADD Script for prevent screen size-----------------*/
// Copy
function copyobject(){
var object = editor.selected;
if ( object.parent === null ) return; // avoid cloning the camera or scene
object = object.clone();
// editor.execute( new AddObjectCommand( object ) );
}
// Paste
function pasteobject(){
var object = editor.selected;
if ( object.parent === null ) return; // avoid cloning the camera or scene
editor.execute( new AddObjectCommand( object.clone() ) );
}
// Undo
function objectundo(){
editor.undo();
}
// Redo
function objectredo(){
editor.redo();
}
// Delete
function objectdelete(){
var object = editor.selected;
var parent = object.parent;
if ( parent === undefined ) return; // avoid deleting the camera or scene
editor.execute( new RemoveObjectCommand( parent ) );
}
// Product List
// Frame
var index = 0;
function framewall(){
var loader = new THREE.FBXLoader();
loader.load( 'product/LW83-FH.fbx', function ( object ) {
for(var i = 0; i < object.children.length; i++)
{
object.children[i].material = new THREE.MeshLambertMaterial();
}
editor.addObject(object );
object.updateMatrixWorld();
object.traverse ( function (child) {
if (child instanceof THREE.Mesh) {
if (child.name.includes("BaseFull")) {
child.visible = false;
} else {
child.visible = true;
}
}
});
} );
}
// Add Texture
function framewall2(){
var manager = new THREE.LoadingManager();
var loader = new THREE.FBXLoader( manager );
loader.load( 'product/WaveWall.fbx', function ( object ) {
object.name = 'FrameWall2_'+index;
object.traverse ( function (child) {
if (child instanceof THREE.Mesh) {
if (child.name.includes("BaseFull")) {
child.visible = false;
} else {
child.visible = true;
}
}
});
editor.addObject( object );
object.updateMatrixWorld();
return index++;
});
};
function addchair(){
var manager = new THREE.LoadingManager();
var loader = new THREE.FBXLoader( manager );
loader.load( 'product/Doreen Swivel Chair.fbx', function ( object ) {
editor.addObject( object );
});
};
function addchair2(){
var manager = new THREE.LoadingManager();
var loader = new THREE.FBXLoader( manager );
loader.load( './product/Sofa449ToWeb.fbx', function ( object ) {
editor.addObject( object );
});
};
var raycaster = new THREE.Raycaster();
function rotate(){
var object = editor.selected.parent;
if(editor.selected.parent){
if(object.rotation.y<1.6){
object.rotation.y = 1.6;
object.position.x =0;
object.position.z =0;
}
else if(object.rotation.y==1.6){
object.rotation.y = 3.2;
object.position.x =0;
object.position.z =0;
}
else if(object.rotation.y==3.2){
object.rotation.y = 4.8;
object.position.x =0;
object.position.z =0;
}
else if(object.rotation.y==4.8){
object.rotation.y = 0;
object.position.x =0;
object.position.z =0;
}
}
else{
alert("plese select object");
}
}
// Delete all
loadHemishphare();
function deleteall(){
editor.clear();
loadHemishphare();
}
// Hemishphare Light Camera
function loadHemishphare(){
var skyColor = 0xFFFFFF;
var groundColor = 0xFFFFFF;
var intensity = 1;
var light = new THREE.HemisphereLight( skyColor, groundColor, intensity );
light.name = 'HemisphereLight';
light.position.set( 0, 10, 0 );
setTimeout(function(){
if(editor.scene.children.length==0){
editor.execute( new AddObjectCommand( light ) );
}
},1000)
/*var light1 = new THREE.HemisphereLight( skyColor, groundColor, intensity );
light1.name = 'HemisphereLight';
light1.position.set( 10, 10, 0 );
editor.execute( new AddObjectCommand( light1 ) );*/
var color1 = 0xffffff;
var intensity1 = 1;
/*var light2 = new THREE.DirectionalLight( color1, intensity1 );
light2.name = 'DirectionalLight';
light2.target.name = 'DirectionalLight Target';
light2.position.set( 5, 10, 7.5 );
editor.execute( new AddObjectCommand( light2 ) );
var light3 = new THREE.DirectionalLight( color1, intensity1 );
light3.name = 'DirectionalLight';
light3.target.name = 'DirectionalLight Target';
light3.position.set( 9, 16, -22 );
editor.execute( new AddObjectCommand( light3 ) );*/
}
// Grid to sohw
var show = new UI.THREE.Boolean( true );
var hide = new UI.THREE.Boolean( false );
function gridshow(){
var signals = editor.signals;
if(show.getValue()==false){
show = new UI.THREE.Boolean( true );
signals.showGridChanged.dispatch( show.getValue() );
}
else{
signals.showGridChanged.dispatch( hide.getValue() );
show = new UI.THREE.Boolean( false );
}
}
/*-----------------------End ADD Script for prevent screen size-----------------*/
editor.scene.traverse ( function (child) {
console.log("");
});
</script>
<style>
body{
font-family: 'Montserrat', sans-serif;
}
.header{
background: #3E3D4B;
padding: 0px 15px;
position: absolute;
width: 100%;
z-index: 1;
}
.header .logo{
width: 150px;
float: left;
}
.header .logo img{
max-width: 100%;
}
#menubar{
z-index: 1;
visibility: hidden;
}
#viewport {
position: absolute;
top: 0px;
left: 0;
right: 0;
bottom: 0;
width: 100%;
}
#sidebar,
#toolbar{
display:none;
}
.leftbox h2{
margin: 0 0 10px 0;
padding: 0;
font-size: 18px;
font-weight: 500;
color: #FFF;
}
.leftbox p{
font-size: 11px;
color: #9D9DA4;
text-align: center;
}
.leftbox{
position: absolute;
top: 75px;
width: 240px;
background: #3E3D4B;
height: 500px;
overflow: auto;
padding:15px 15px;
z-index: 1;
border-radius: 10px;
left: 15px;
}
.leftbox ul{
margin: 0;
padding: 0;
list-style: none;
}
.leftbox ul li{
display:block;
margin: 0 0 10px 0;
padding: 5px 10px;
}
.leftbox ul li a span{
font-size: 11px;
color: #9D9DA4;
text-align: center;
display:block;
}
.leftbox ul li a label{
font-size: 9px;
color: #FFF;
text-align: center;
display:block;
}
.leftbox ul li a{
color: #000;
text-decoration: none;
}
.buttonpan{
position: absolute;
right: 30px;
top: 75px;
background: #ddd;
width: 30px;
color: #FFF;
/* background: #ededed; */
border-radius: 10px;
overflow: hidden;
text-align: center;
padding: 10px 10px;
}
.leftbox .texture ul{
margin: 0;
padding: 0;
list-style: none;
}
.leftbox .texture ul li{
width: 45px;
float: left;
margin: 0 10px 10px 0;
padding: 0;
}
.leftbox .texture ul li img{
max-width: 100%;
height: 40px;
}
</style>
<div class="buttonpan">
<button onclick="gridshow()">Show/Hide Grid</button>
<button onclick="rotate()">Rotate</button>
<button title="Delete All" onclick="deleteall()"><i class="fas fa-trash-alt"></i> Delete All</button>
<button title="Copy" class="copy" onclick="rotateOn()"><i class="fas fa-search-plus"></i></button>
<button title="Copy" class="copy" onclick="zoomOut()"><i class="fas fa-search-minus"></i></button>
<button title="Copy" class="copy" onclick="copyobject()"><i class="fas fa-copy"></i></button>
<button title="Paste" class="copy" onclick="pasteobject()"><i class="fas fa-paste"></i></button>
<button title="Undo" class="copy" onclick="objectundo()"><i class="fas fa-undo"></i></button>
<button title="Redo" class="copy" onclick="objectredo()"><i class="fas fa-redo"></i></button>
<button title="Delete" class="copy" onclick="objectdelete()"><i class="fas fa-trash-alt"></i></button>
</div>
</body>
</html>
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.