https://github.com/kaosat-dev/polymer-threejs
Experimental Three.js elements using the Polymer framework + three.js
https://github.com/kaosat-dev/polymer-threejs
Last synced: 4 months ago
JSON representation
Experimental Three.js elements using the Polymer framework + three.js
- Host: GitHub
- URL: https://github.com/kaosat-dev/polymer-threejs
- Owner: kaosat-dev
- License: mit
- Created: 2013-08-10T07:40:31.000Z (almost 13 years ago)
- Default Branch: master
- Last Pushed: 2013-11-15T13:36:44.000Z (over 12 years ago)
- Last Synced: 2025-04-02T21:11:11.489Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 2.83 MB
- Stars: 26
- Watchers: 9
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
polymer-threejs
===============
Experimental custom elements using the [Polymer framework](http://www.polymer-project.org/ "Polymer framework") and the [Three.js](http://threejs.org/ "Three.js") framework.
All custom elements are in the elements folder (seperated by folder)
three-viewer (the main element) depends on/ makes use of both three-controls and three-stats
a more simple, independant three-viewer will be added down the line.
Notes
=====
- very early stages, highly experimental so not bugs are very likely :)
- api is neither complete nor as practical as I would like it to be
- uses a custom "wrapped" (generated with [Browserify](http://browserify.org/ "Browserify") version of Three.js, as the standard build does not get imported correctly from within elements.
- the view comes pre packaged with the three.js OrbitControls & CombinedCamera : these are both custom versions, with "z-up" instead of
the standard "y-up", since this was originally intended to be used for 3d modeling for 3d printing (that uses z-up)
usage
=====
- as stated above, elements are in the "elements" folder
- you will however need a web server to run polymer.js elements locally : you can install a node-js simple http server for this project
by typing npm install and then npm start (once you have node.js and npm of course!)
examples
========
Include the elements (three-elements itself links to all other elements, for convenience):
```html
```
- Create a Three.js view default settings
```html
```
This resuls in :
Create a Three.js view 320*200, with a fov of 50 shadows enabled
```html
```
This resuls in :
- Create a Three.js view 640*480, with a fov of 50, autorotating camera, with onscreen controls, grid, axes, and shadows enabled,
and a greenish background
```html
```
This resuls in :
- you can also create multiple views (all independant, but still a bit buggy sometimes):
```html
```
This resuls in :
- editing the scene/add objects to the view
Polymer components are loaded in an asynch maner (there is callback for that ! as they say :)
So to add a cube to a viewer you could do :
```javascript
window.addEventListener('WebComponentsReady', function() {
document.body.style.opacity = 1; // show body now that registration is done.
var threeViewer = document.querySelector('three-viewer');
console.log("components loaded",threeViewer);
var cubeGeometry = new THREE.CubeGeometry( 30, 30, 30 );
var material = new THREE.MeshLambertMaterial( {color: 0x0088ff} );
var cube = new THREE.Mesh(cubeGeometry, material);
cube.position.set(-25, 25, -35);
cube.castShadow = true
cube.receiveShadow = true
//here we add the cube to the scene via the addToScene method
threeViewer.addToScene(cube);
```
Live Demo
=========
http://kaosat-dev.github.io/polymer-threejs/demo
Licence
=======
MIT