cvdlab / React Planner
Licence: mit
✏️ A React Component for plans design. Draw a 2D floorplan and navigate it in 3D mode.
Stars: ✭ 846
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Planner
React 3d Viewer
A 3D model viewer component based on react.js 一个基于react.js的组件化3d模型查看工具
Stars: ✭ 100 (-88.18%)
Mutual labels: webgl, threejs, component
Fe Daily Record
📚前端书籍汇集点 + 每日好文推荐 + 公开课学习资料 + 各种大会资料
Stars: ✭ 94 (-88.89%)
Mutual labels: webgl, threejs, svg
Jeelizweboji
JavaScript/WebGL real-time face tracking and expression detection library. Build your own emoticons animated in real time in the browser! SVG and THREE.js integration demos are provided.
Stars: ✭ 835 (-1.3%)
Mutual labels: webgl, threejs, svg
Wechart
Create all the [ch]arts by cax or three.js - Cax 和 three.js 创造一切图[表]
Stars: ✭ 152 (-82.03%)
Mutual labels: webgl, threejs, svg
React Scrollbars Custom
The best React custom scrollbars component
Stars: ✭ 576 (-31.91%)
Mutual labels: component, react-component
Reactprimer
React component prototyping tool that generates fully connected class component code.
Stars: ✭ 743 (-12.17%)
Mutual labels: component, react-component
Globe.gl
UI component for Globe Data Visualization using ThreeJS/WebGL
Stars: ✭ 479 (-43.38%)
Mutual labels: webgl, threejs
Polygon Shredder
The polygon shredder that takes many cubes and turns them into confetti
Stars: ✭ 686 (-18.91%)
Mutual labels: webgl, threejs
People You Should Follow On Codepen
People You Should Follow on CodePen
Stars: ✭ 542 (-35.93%)
Mutual labels: webgl, svg
Matcaps
Huge library of matcap PNG textures organized by color
Stars: ✭ 607 (-28.25%)
Mutual labels: webgl, threejs
Sea3d
An open-source format and tools for game developers 🎮
Stars: ✭ 483 (-42.91%)
Mutual labels: webgl, threejs
Expo Crossy Road
🐥🚙 Crossy Road game clone made in Expo (iOS, Android, web), THREE.js, Tween, React Native. 🐔
Stars: ✭ 701 (-17.14%)
Mutual labels: webgl, threejs
Nn Svg
Publication-ready NN-architecture schematics.
Stars: ✭ 805 (-4.85%)
Mutual labels: threejs, svg
Ballanceonline Demo
A web version of Ballance, using Three.js and Ammo.js
Stars: ✭ 26 (-96.93%)
Mutual labels: webgl, threejs
react-planner
react-planner is a React component which can be used to draw model buildings. Drag & drop from a catalog of customizable and ready-to-use objects, you can start from 2D wireframes and land on 3D models. As a developer you can provide your users with new objects by adding them to the catalog.
Demo
Usage
import React from 'react';
import ReactDOM from 'react-dom';
import {Map} from 'immutable';
import {createStore} from 'redux';
import {Provider} from 'react-redux';
//download this demo catalog https://github.com/cvdlab/react-planner/tree/master/demo/src/catalog
import MyCatalog from './catalog/mycatalog';
import {
Models as PlannerModels,
reducer as PlannerReducer,
ReactPlanner,
Plugins as PlannerPlugins,
} from 'react-planner';
//define state
let AppState = Map({
'react-planner': new PlannerModels.State()
});
//define reducer
let reducer = (state, action) => {
state = state || AppState;
state = state.update('react-planner', plannerState => PlannerReducer(plannerState, action));
return state;
};
let store = createStore(reducer, null, window.devToolsExtension ? window.devToolsExtension() : f => f);
let plugins = [
PlannerPlugins.Keyboard(),
PlannerPlugins.Autosave('react-planner_v0'),
PlannerPlugins.ConsoleDebugger(),
];
//render
ReactDOM.render(
(
<Provider store={store}>
<ReactPlanner
catalog={MyCatalog}
width={800}
height={600}
plugins={plugins}
stateExtractor={state => state.get('react-planner')}
/>
</Provider>
),
document.getElementById('app')
);
Docs
Authors
Developed @ CVDLAB
Contributing
Your contributions (issues and pull request) are very appreciated!
Contributors
License
MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].