Experimental Three.js elements using the Polymer framework + three.js
MIT License
Experimental custom elements using the Polymer framework and the 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.
Include the elements (three-elements itself links to all other elements, for convenience):
<link rel="import" href="elements/three-elements.html">
<three-viewer></three-viewer>
This resuls in :
Create a Three.js view 320*200, with a fov of 50 shadows enabled
<three-viewer width=320 height=200 viewAngle=50 showControls showShadows ></three-viewer>
This resuls in :
<three-viewer width=640 height=480 viewAngle=50 bg="#c0ff00" autoRotate showControls showShadows showGrid showAxes></three-viewer>
This resuls in :
<three-viewer style="right:180px;top:300px;"></three-viewer>
<three-viewer viewAngle="25" width=640 height=480 autoRotate showControls showShadows id="viewer1"></three-viewer>
<three-viewer bg="#c0ff00" viewAngle="45" width=320 height=240 showControls showShadows=false style="left:680px;top:500px;border: 1px solid blue;"></three-viewer>
This resuls in :
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);
http://kaosat-dev.github.io/polymer-threejs/demo
MIT