furnishup / blueprint3d Goto Github PK

View Code? Open in Web Editor NEW

1.7K 96.0 527.0 8.8 MB

Build interior spaces in 3D

License: MIT License

CSS 1.03% HTML 4.50% JavaScript 13.46% TypeScript 81.01%

blueprint3d's Introduction

See it

This repository includes an example application built using blueprint3d:

http://furnishup.github.io/blueprint3d/example/

What is this?

This is a customizable application built on three.js that allows users to design an interior space such as a home or apartment. Below are screenshots from our Example App (link above).

Create 2D floorplan:

Add items:

Design in 3D:

Developing and Running Locally

To get started, clone the repository and ensure you npm >= 3 and grunt installed, then run:

npm install
grunt

The latter command generates example/js/blueprint3d.js from src.

The easiest way to run locally is to run a local server from the example directory. There are plenty of options. One uses Python's built in webserver:

cd example

# Python 2.x
python -m SimpleHTTPServer

# Python 3.x
python -m http.server

Then, visit http://localhost:8000 in your browser.

Contribute!

This project requires a lot more work. In general, it was rushed through various prototype stages, and never refactored as much as it probably should be. We need your help!

Please contact us if you are interested in contributing.

Todos

More complete documentation (based on the TypeDoc comments)
Test suite (e.g. jasmine)
Make it easier to build a complete application using blueprint3d (cleaner API, more inclusive base, easier integration with a backend)
Better serialization format for saving/loading "designs"
Remove the dependency on jquery from the core source!
Better use of npm conventions and packaging
Various bug fixes
refactor three/* - use of classes, lambdas
update to current threejs
introduce a more formal persistency format
put all relevant settings into Core.Configuration to make them read-/writeable, User settings?
complete type docs for all entities
there're a few TODO_Ekki's left, kill them all

Directory Structure

`src/` Directory

The src directory contains the core of the project. Here is a description of the various sub-directories:

core - Basic utilities such as logging and generic functions

floorplanner - 2D view/controller for editing the floorplan

items - Various types of items that can go in rooms

model - Data model representing both the 2D floorplan and all of the items in it

three - 3D view/controller for viewing and modifying item placement

`example/` Directory

The example directory contains an application built using the core blueprint3d javascript building blocks. It adds html, css, models, textures, and more javascript to tie everything together.

License

This project is open-source! See LICENSE.txt for more information.

blueprint3d's People

Contributors

Stargazers

Watchers

Forkers

febinsathar michaeljprince asutherland johnsonc maujfernandezuvr inkwash germc ezhangle okusnadi manusw cristianodelucca tampham47 iced-tea mirror2tina tonbz pkdevbox vendorlisy09 damaainan mhplala ahmadawais wawbz zhangyan612 stanleychris2 evildevil666666 mahendrb laishi turkenh alessandroleite scottkrieger msienkiewicz shobhitsinghal624 zjcf nietzscheson royalarjun001 vishnuavenu kapilpatel chick00o heberuriegas web-project-development-resouces qingchunnianshao ekki tombzbk abhishekamol asmboom kirangadhave sunank200 annamharikrishna jonasgutermuth waw3 face08 lekanb siberianbear windyann dhimanak chamara-dev dungchi76 zhangchuanjia123 hxzpily2 blackfoxgamingstudio richardboyewa jaydengui lgromanowski linearregression shane-lessard manbade luowang martinsuchen35 qingchaohu monicamuranyi svifi tizzbird jamesbarton gkoehl tcgloveacm apecrafts pandy123 asteadman storianum pablo-aznard kamrad ronaldpatino ebenshap talosprogramming dannystyleart elkhawajah wegiangb yang0 vongoethe johnfelipe jack-jun alexanza imjerrybao social-lantern-media imadomran aiwebbot angelscabrerag nicojuicy lashus gheorghecazacu mortgy

blueprint3d's Issues

Trying to build with jquery mobile fails...

This is less of an issue and more of a feature request. Sorry for the same.

I tried building with jquery mobile (v1.4.1) but as soon as I put require('jquery-mobile'), browserify throws error:

14 verbose stack Error: [email protected] build: `browserify src/blueprint3d.js > example/js/blueprint3d.js --verbose`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:239:16)
14 verbose stack     at emitTwo (events.js:100:13)
14 verbose stack     at EventEmitter.emit (events.js:185:7)
14 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:24:14)
14 verbose stack     at emitTwo (events.js:100:13)
14 verbose stack     at ChildProcess.emit (events.js:185:7)
14 verbose stack     at maybeClose (internal/child_process.js:850:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:215:5)

JQuery mobile package is installed using npm and is present in node_modules directory.

Any effort of making this jquery mobile compatible, to run across devices?

Creating export files using AssImp exporter library but can't import it to Blueprint3d

Is there a plan to include AssImp json export format for adding new models ?
At present, this doesn't seem to be doing so.
Out of curiosity, was there a reason you based it on a particular Blender export version ?

how to publish this project online?

May i know how to make it online?

npm install on os x

Cloned master, the first npm install existed with the following message:

atlas:blueprint3d akoskm$ npm install
npm WARN peerDependencies The peer dependency grunt@~0.4.5 included from grunt-typescript will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency 
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
|
> [email protected] install /Users/akoskm/Projects/blueprint3d/node_modules/grunt-typescript/node_modules/chokidar/node_modules/fsevents
> node-pre-gyp install --fallback-to-build

[fsevents] Success: "/Users/akoskm/Projects/blueprint3d/node_modules/grunt-typescript/node_modules/chokidar/node_modules/fsevents/lib/binding/Release/node-v46-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
npm ERR! Darwin 15.5.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install"
npm ERR! node v4.4.5
npm ERR! npm  v2.15.5
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants grunt@>=0.4.0
npm ERR! peerinvalid Peer [email protected] wants grunt@>= 0.4.5
npm ERR! peerinvalid Peer [email protected] wants grunt@~0.4.5

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/akoskm/Projects/blueprint3d/npm-debug.log

I want to buy this finished project

Hi Is there any one who really finish this project or can finish this project... i need this project, who can finish this for me with a reasonable price. contact me [email protected]

Error running grunt task

Having installed dependencies via npm, running grunt throws an error for missing .ts files.

Running "typescript:blueprint3d" (typescript) task
>> src/floorplanner/floorplanner.ts(1,1): error TS6053: File 'lib/jQuery.d.ts' not found.
>> src/floorplanner/floorplanner.ts(42,34): error TS2304: Cannot find name '$'.
>> src/floorplanner/floorplanner.ts(83,28): error TS2304: Cannot find name '$'.
>> src/floorplanner/floorplanner.ts(113,7): error TS2304: Cannot find name '$'.
>> src/floorplanner/floorplanner_view.ts(1,1): error TS6053: File 'lib/jQuery.d.ts' not found.
>> src/floorplanner/floorplanner_view.ts(61,7): error TS2304: Cannot find name '$'.
>> src/floorplanner/floorplanner_view.ts(69,23): error TS2304: Cannot find name '$'.
>> src/model/corner.ts(1,1): error TS6053: File 'lib/jQuery.d.ts' not found.
>> src/model/corner.ts(22,31): error TS2304: Cannot find name '$'.
>> src/model/corner.ts(25,33): error TS2304: Cannot find name '$'.
>> src/model/corner.ts(28,32): error TS2304: Cannot find name '$'.
>> src/model/floorplan.ts(1,1): error TS6053: File 'lib/jQuery.d.ts' not found.
>> src/model/floorplan.ts(28,34): error TS2304: Cannot find name '$'.
>> src/model/floorplan.ts(31,36): error TS2304: Cannot find name '$'.
>> src/model/floorplan.ts(34,32): error TS2304: Cannot find name '$'.
>> src/model/floorplan.ts(37,29): error TS2304: Cannot find name '$'.
>> src/model/floorplan.ts(40,34): error TS2304: Cannot find name '$'.
>> src/model/half_edge.ts(2,1): error TS6053: File 'lib/jQuery.d.ts' not found.
>> src/model/half_edge.ts(43,30): error TS2304: Cannot find name '$'.
>> src/model/model.ts(2,1): error TS6053: File 'lib/jQuery.d.ts' not found.
>> src/model/model.ts(19,36): error TS2304: Cannot find name '$'.
>> src/model/model.ts(22,35): error TS2304: Cannot find name '$'.
>> src/model/model.ts(25,34): error TS2304: Cannot find name '$'.
>> src/model/model.ts(28,36): error TS2304: Cannot find name '$'.
>> src/model/room.ts(2,1): error TS6053: File 'lib/jQuery.d.ts' not found.
>> src/model/room.ts(41,36): error TS2304: Cannot find name '$'.
>> src/model/scene.ts(2,1): error TS6053: File 'lib/jQuery.d.ts' not found.
>> src/model/scene.ts(25,36): error TS2304: Cannot find name '$'.
>> src/model/scene.ts(28,35): error TS2304: Cannot find name '$'.
>> src/model/scene.ts(31,36): error TS2304: Cannot find name '$'.
>> src/model/wall.ts(2,1): error TS6053: File 'lib/jQuery.d.ts' not found.
>> src/model/wall.ts(55,31): error TS2304: Cannot find name '$'.
>> src/model/wall.ts(58,33): error TS2304: Cannot find name '$'.
>> src/model/wall.ts(61,32): error TS2304: Cannot find name '$'.
>> src/three/controller.ts(1,1): error TS6053: File 'lib/jQuery.d.ts' not found.
>> src/three/controls.ts(11,1): error TS6053: File 'lib/jQuery.d.ts' not found.
>> src/three/controls.ts(59,33): error TS2304: Cannot find name '$'.
>> src/three/edge.ts(1,1): error TS6053: File 'lib/jQuery.d.ts' not found.
>> src/three/main.ts(1,1): error TS6053: File 'lib/jQuery.d.ts' not found.
>> src/three/main.ts(4,1): error TS6053: File 'src/three/floorPlan.ts' not found.
>> src/three/main.ts(33,20): error TS2304: Cannot find name '$'.
>> src/three/main.ts(59,34): error TS2304: Cannot find name '$'.
>> src/three/main.ts(60,36): error TS2304: Cannot find name '$'.
>> src/three/main.ts(62,24): error TS2304: Cannot find name '$'.
>> src/three/main.ts(63,25): error TS2304: Cannot find name '$'.
>> src/three/main.ts(64,27): error TS2304: Cannot find name '$'.
>> src/three/main.ts(94,9): error TS2304: Cannot find name '$'.
Warning: Task "typescript:blueprint3d" failed. Use --force to continue.

Aborted due to warnings.

is it possible four partition 3D view?

now blueprint3d example Design viewer is one canvas, one view.
I wanna divide one Design viewer into 4 canvas, 4 view that show different 3D view separately.
is it possible?

Is it possible to change the height of the wall?

When the floorplan is drawn (or loaded from the file), is it possible to change the height of the wall in the design viewer? Maybe via the javascript code? Is there any parameter to set the height of the wall displayed here?
Thank you

How to render this in the mobile app?

Is it possible to render this application in the Android mobile application? where the server is just as you have created(Python server) and mobile act as a client(just like web browser).

I have tried to call your example demo from the mobile app, but the UI is not responsive and the canvas and other data is not getting displayed. Can you help me on this ?

I want to add label above object how can i get it please help .

Documentation for half edge concept used in 3d?

Zoom

Hi,

How can i add a zoom button, because it is smaller.
(For 2D floorplaner)

Thanks

Why this scale 400 in defaultRoomTexture?

Please tell me what is the logic behind scale:400 (Line no 20 ) in room.js??

Error message when loaded

I visited the example page and I got tons of error messages on the console like this.

blueprint3d.js:32770 Uncaught TypeError: Cannot read property 'width' of undefined
3furnishup.github.io/:1 [GroupMarkerNotSet(crbug.com/242999)!:A0926A19A07F0000]RENDER WARNING: there is no texture bound to the unit 0
furnishup.github.io/:1 [GroupMarkerNotSet(crbug.com/242999)!:A0926A19A07F0000]RENDER WARNING: there is no texture bound to the unit 1
furnishup.github.io/:1 [GroupMarkerNotSet(crbug.com/242999)!:A0926A19A07F0000]RENDER WARNING: there is no texture bound to the unit 0
furnishup.github.io/:1 [GroupMarkerNotSet(crbug.com/242999)!:A0926A19A07F0000]RENDER WARNING: there is no texture bound to the unit 1
furnishup.github.io/:1 [GroupMarkerNotSet(crbug.com/242999)!:A0926A19A07F0000]RENDER WARNING: there is no texture bound to the unit 0
furnishup.github.io/:1 [GroupMarkerNotSet(crbug.com/242999)!:A0926A19A07F0000]RENDER WARNING: there is no texture bound to the unit 1
blueprint3d.js:32770 Uncaught TypeError: Cannot read property 'width' of undefined

And there is a function clampToMaxSize in the Three.js where the error occurs.
It seems to be the reason why I can't load this example page on the mobile browser I guess.
(When I load this page on the mobile, several times of reload and then it failed.)
Can you figure out why these situations are happened?
Thanks in advance.

Touch controls

Very, very interesting project. Got it up and running in no time.
Works pretty well in chrome.
Did a check on an ipad (safari) and touch control (especially when trying to move object) is not working.
Have any suggestions on how to improve touch control?

Again, very nice
Regards,
Sake

Documentation for 3D items?

Hi
How do you add a new model? Is there a third-party software to generate the 3d model?
Thanks

More models?

Maybe a stupid questions but what is the procedure for creating new models from 3DS images? And how can I set the quality of the end result?

Collision detection

Hi, thanks for sharing this awesome project .
I just was wandering how to detect collision between objects in scene.
Thank you

Number and walls and stacked items

Hello! Great project, congratulations!

what should I change to allow items to be added with only one wall -- it's for a garden model.
what should I change to allow items to be stacked? For instance, if I want to put a television on the top of a rack.
Thanks!

Blender Export 2.7 gets Matrix3.getInverse(): can't invert matrix, determinant is 0

Hi, I am using Three.js addon to export mesh (.json) from Blender.

When I add the model, it appears as though it has a scale.x, scale,y, scale.z all of 0 (even though I see directly in the json file that scale: 1.000000

So, when I click to add the item corresponding item , the above error is thrown.

Is there some option I need to check in Blender to get this working properly?

	"metadata": {
		"formatVersion" : 3.1,
		"generatedBy"   : "Blender 2.7 Exporter",
		"vertices"      : 36556,
		"faces"         : 18278,
		"normals"       : 16891,
		"colors"        : 0,
		"uvs"           : [4],
		"materials"     : 1,
		"morphTargets"  : 0,
		"bones"         : 0
	},

		"scale" : 1.000000,

	......

changing floor texture load slowly. what can i do?

I want to change the floor texture. so, I uploaded floor texture and added html tag about floor texture.
and then I changed floor texture. but, the texture loading is very slowly. it was not texture image problem.
when i added this floor texture to wall texture, it was changed quickly.
what should i do?

Add transform controls for each object

I need to add transform controls for each object. if i mentioned item type 1,2,3,4, it will transform with some condition. but i need an object like item type 1 with move top to bottom and rotate 360'.

I need transform controls like this

url : https://threejs.org/examples/misc_controls_transform.html

thanks in advance

BP3D is not defined

While running the example in python http server, i am getting this BP3D is not defined in firefox console. what could be the reason? please need help

How to make glass walls (semi transparent / png)

Hi
is there a way to have a semi transparent wallpaper to simulate glass walls?

Objects doesn't move if I edit floorplan

If I make any change to floorplan the objects decline to move. When I drag any object it's colored in red and I can't place it anywhere. But If I won't change the initial floor size then everything is OK. Please provide some help.

Corner Deletion TypeScript

**EDIT - FIXED THE PROBLEM
public newCorner(x: number, y: number, id?: string): Corner {
var corner = new Corner(this, x, y, id);
this.corners.push(corner);
var scope = this;
corner.fireOnDelete(() => {
scope.removeCorner(corner);
});
this.new_corner_callbacks.fire(corner);
this.update();
return corner;
}
this is the fixed code in floorplan.ts - old code wasnt passing in the corner to be deleted

Hi, thanks for the great framework have noticed that unlike the javascript version, if you change the corners to show all the time eg.
// corner config
var cornerRadius = 10
var cornerRadiusHover = 11

You can see that the corners arent actually getting deleted when you delete the wall or even try to delete a corner by itself. Any assistance would be great, the methods are getting called just not executed correctly.

Disable 3d view

Hello,

How can i disable the 3d view?
I want only 2D view

Thank you

Error create wall at move mouse

I can create wall just only if I stop mouse. If I move mouse and click it is impossible.
I think it is due to receiving mouse events.
Video in with bug https://drive.google.com/file/d/1hA5YOGtFXOCo68_b0Iqi2XadS4l-JEnK/view
In this video I make multi click left mouse button

List of added models / objects?

Is it possible to fetch info about included / added objects?
Id like to know which objects from models/js/ are added to the Scene.
Are there any docs about this? I've tried to get it from the source but I don't have that much JS skills.

This looks like a great project, thank you for all of your effort!

Change background color

Hi! I tried change background color of modeler using:
new THREE.WebGLRenderer({ antialias: true, alpha: true });
render.setClearColor( 0x00, 0 )

But this method not work, any user have any idea?
Thanks for your time and help, sincerely Tarik.

Additional file is on commit 5f2b8a4 file src/three/main.ts line 72

Models are getting blurred when zoomed out.

I have added a low poly model with a 512px texture and its edges are getting blurred?

Please Help ?

After editing wall layout items cannot be moved

In the example layout after editing (extending) the larger room to be a square based room, the items in the room cannot be moved anymore.

Tutorial of how to develop something like this

Need help in starting a project like this. Please

Items markup to the floorplan view, changing units...

Is it possible to add the items markup to the floorplan view? including doors and open direction? positioning items in floorplan view? change wall thickness?.
And, how can i change the units to centimeters?

I cannot move object after changing size of object

I put object in the room and change it height. Aftre that I can not move this object.
Link to my blueprint file:
https://drive.google.com/open?id=1vcw778AFjprldsEBiQQMQGQDYa-xOIJb

After editing wall layout windows are not moved

Windows stay afloat at original places when wall layout was edited. They have to be dropped manually on the walls again.

Width,Depth and Height Accept all character

Width,Depth and Height Accept all character. As per me it should not. I had entered my name in width and press enter. The object becomes thin and when i lose focus from object i am unable to click it or delete it.

How to change unit into mm ? Please Help

Drawing walls in Chrome not working

Hi
I can draw walls in Edge, but in Chrome Version 62.0.3202.94 (Official Build) (64-bit) its not working.

have a bug,redraw the wall,can not add new item

for new update,it has new bug,if i redraw the wall,then i take the design view ,can't add item in it,or it is only center ,can't move to anywhere.please check it,i want to take part in your project ,but my english do not good . i come from china ,thank you.

Move and zoom Floorplanner 2d

is it possible to place the buttons to move and zoom in when you draw a very big plan?

Thanks

Zoom/scale to fit browser?

Is it possible to scale/zoom 3d to fit browser window in a way that left and right part of 3d is aligned to left and right size of browser (adjusting to resolution)?

Adjusting thickness of walls through UI

Hi guys. Right now wall thickness is saveable to json and if I open scene from file it is displayed correctly. However, I have some troubles implementing wall thickness editing.
I've added setter method in wall.ts

setThickness(thickness: number) {
      this.thickness = thickness;
}

If I later set thickness in example.js (both while being in Design and Floorplanner modes), there's no redraw. I've tried to force it and only things that worked were switching views and removal and recreation of wall (I had to make wall.Start and wall.End public for this code to work):

var oldWall = this.activeWall;
this.activeWall.remove();
this.floorplan.newWall(oldWall.start,oldWall.end,250,70);

I do understand this last thing is a terrible hack and that's why I'm asking for help. What would be your next step after creation of setter setThickness in the wall class?

Collision

Hi, thanks for sharing this awesome project .
I just was wandering how to detect collision between objects in scene.
Thank you

Unable to get width and height of item in FloorPlannerView

Hello,
There seems to be no way to get width height and depth of item in floorPlannerView class.
These values are available but I cannot find way to have them correctly represented in this.context.fillRect
Any help appreciated

can not change inch to cm

how use blueprint3d set default cm units

Issue while installing npm

I am using this command to install

sudo apt-get install npm

but i am getting this error.

E: dpkg was interrupted, you must manually run 'sudo dpkg --configure -a' to correct the problem.

How to install npm for generating blueprint3d.js

Help to install blueprint3d with Heroku

Hi all,
I would know if anyone has installed blueprint3d on Heroku, and if so, I hope to receive help with a description of the steps to make run it.
I'm trying for some days without any good result comparated with the result in example.
Thank you in advance whom wants help me.

How to save the file product as jpg or png

Hi currently the when save button is pressed the file gets saved as .blueprint3d but how to save the file as .jpg or .png kindly let me know.

Thanks,