Skip to content

Commit f24f8d4

Browse files
richardanayarichardanaya
committed
putting functions on component
1 parent 7ca42f3 commit f24f8d4

File tree

5 files changed

+18
-41
lines changed

5 files changed

+18
-41
lines changed

‎README.md‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -22,30 +22,29 @@ npm install aframe-canvas
2222
...
2323
<body>
2424
<a-scene>
25-
<a-plane id="screen" position="0 1.25 -1" color="red" scale="3 3 3" canvas-2d="width:500;height:500"/>
25+
<a-sky color="#6EBAA7"></a-sky>
26+
<a-plane id="screen" position="0 1.25 -1" color="red" scale="3 3 3" canvas-material="width:500;height:500"/>
2627
</a-scene>
2728
</body>
2829
<script>
29-
var ctx = document.querySelector("#screen").getContext("2d")
30-
function getRandomColor() {
30+
var component = document.querySelector("#screen").components["canvas-material"];
31+
var ctx = component.getContext()
32+
function getRndColor() {
3133
var r = 255*Math.random()|0,
3234
g = 255*Math.random()|0,
3335
b = 255*Math.random()|0;
3436
return 'rgb(' + r + ',' + g + ',' + b + ')';
3537
}
3638
window.setInterval(function(){
37-
//make the whole canvas transparent
38-
ctx.clearRect(0,0,500,500);
3939
40-
//Draw rectangle adn text
41-
ctx.fillStyle = getRandomColor();
40+
ctx.clearRect(0,0,500,500);
41+
ctx.fillStyle = getRndColor();
4242
ctx.fillRect(Math.random()*500,Math.random()*500,50,50);
4343
ctx.fillStyle = "black";
4444
ctx.font = "100px serif";
4545
ctx.fillText("Hello world", 10, 100);
46-
4746
//this update function says to update the texture in aframe
48-
ctx.update();
47+
component.updateTexture();
4948
},100)
5049
5150
</script>

‎examples/00_simple/index.html‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,12 @@
66
<body>
77
<a-scene>
88
<a-sky color="#6EBAA7"></a-sky>
9-
<a-plane id="screen" position="0 1.25 -1" color="red" scale="3 3 3" canvas-2d="width:500;height:500"/>
9+
<a-plane id="screen" position="0 1.25 -1" color="red" scale="3 3 3" canvas-material="width:500;height:500"/>
1010
</a-scene>
1111
</body>
1212
<script>
13-
var ctx = document.querySelector("#screen").getContext("2d")
13+
var component = document.querySelector("#screen").components["canvas-material"];
14+
var ctx = component.getContext()
1415
function getRndColor() {
1516
var r = 255*Math.random()|0,
1617
g = 255*Math.random()|0,
@@ -26,7 +27,7 @@
2627
ctx.font = "100px serif";
2728
ctx.fillText("Hello world", 10, 100);
2829
//this update function says to update the texture in aframe
29-
ctx.update();
30+
component.updateTexture();
3031
},100)
3132

3233
</script>

‎examples/01_HTML/index.html‎

Lines changed: 0 additions & 23 deletions
This file was deleted.

‎index.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"use strict";
77
AFRAME = AFRAME.aframeCore || AFRAME;
88

9-
AFRAME.registerComponent('canvas-2d', {
9+
AFRAME.registerComponent('canvas-material', {
1010
schema: {
1111
width: {
1212
type: 'int',
@@ -25,13 +25,13 @@
2525
this.canvas.width = this.data.width;
2626
this.canvas.height = this.data.height;
2727
var _this = this;
28-
this.el.getContext = function(){
28+
this.getContext = function(){
2929
var ctx = _this.canvas.getContext("2d");
30-
ctx.update = function(){
31-
texture.needsUpdate = true;
32-
}
3330
return ctx;
3431
}
32+
this.updateTexture = function(){
33+
texture.needsUpdate = true;
34+
}
3535
var texture = new THREE.Texture(this.canvas);
3636
var material = new THREE.MeshBasicMaterial({ map: texture, transparent: true });
3737
this.el.object3D.children[0].material = material;

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "aframe-canvas",
3-
"version": "0.0.4",
3+
"version": "0.0.5",
44
"description": "A component for putting an HTML canvas in VR",
55
"main": "index.js",
66
"scripts": {

0 commit comments

Comments
 (0)