From 0d4ebbab2ae39ada74529b82342e0a4b3cb31ef1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9B=BE=E5=BF=97=E8=B1=AA?= Date: Mon, 27 Mar 2017 10:27:05 +0800 Subject: [PATCH] 1. add double side 2. add texture can flip by reverse variable = true --- dist/aframe-draw-component.js | 220 +++++++++++++++++------------- dist/aframe-draw-component.min.js | 2 +- index.js | 12 +- 3 files changed, 140 insertions(+), 94 deletions(-) diff --git a/dist/aframe-draw-component.js b/dist/aframe-draw-component.js index f0fca14..ecdf64b 100644 --- a/dist/aframe-draw-component.js +++ b/dist/aframe-draw-component.js @@ -11,16 +11,16 @@ /******/ // Create a new module (and put it into the cache) /******/ var module = installedModules[moduleId] = { -/******/ exports: {}, -/******/ id: moduleId, -/******/ loaded: false +/******/ i: moduleId, +/******/ l: false, +/******/ exports: {} /******/ }; /******/ // Execute the module function /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); /******/ // Flag the module as loaded -/******/ module.loaded = true; +/******/ module.l = true; /******/ // Return the exports of the module /******/ return module.exports; @@ -33,109 +33,145 @@ /******/ // expose the module cache /******/ __webpack_require__.c = installedModules; +/******/ // identity function for calling harmony imports with the correct context +/******/ __webpack_require__.i = function(value) { return value; }; + +/******/ // define getter function for harmony exports +/******/ __webpack_require__.d = function(exports, name, getter) { +/******/ if(!__webpack_require__.o(exports, name)) { +/******/ Object.defineProperty(exports, name, { +/******/ configurable: false, +/******/ enumerable: true, +/******/ get: getter +/******/ }); +/******/ } +/******/ }; + +/******/ // getDefaultExport function for compatibility with non-harmony modules +/******/ __webpack_require__.n = function(module) { +/******/ var getter = module && module.__esModule ? +/******/ function getDefault() { return module['default']; } : +/******/ function getModuleExports() { return module; }; +/******/ __webpack_require__.d(getter, 'a', getter); +/******/ return getter; +/******/ }; + +/******/ // Object.prototype.hasOwnProperty.call +/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; + /******/ // __webpack_public_path__ /******/ __webpack_require__.p = ""; /******/ // Load entry module and return exports -/******/ return __webpack_require__(0); +/******/ return __webpack_require__(__webpack_require__.s = 1); /******/ }) /************************************************************************/ /******/ ([ /* 0 */ -/***/ function(module, exports, __webpack_require__) { - - // Browser distribution of the A-Frame component. - (function () { - if (typeof AFRAME === 'undefined') { - console.error('Component attempted to register before AFRAME was available.'); - return; - } - - // Register all components here. - var components = { - draw: __webpack_require__(1).component - }; - - Object.keys(components).forEach(function (name) { - if (AFRAME.aframeCore) { - AFRAME.aframeCore.registerComponent(name, components[name]); - } else { - AFRAME.registerComponent(name, components[name]); - } - }); - })(); +/***/ (function(module, exports) { - -/***/ }, -/* 1 */ -/***/ function(module, exports) { - - module.exports.component = { - schema: { - width: { - default: 256 - }, - height: { - default: 256 - }, - background: { - default: "#FFFFFF" - } +module.exports.component = { + schema: { + width: { + default: 256 }, - - init: function () { - this.registers = []; //order of eventing after render - this.update(); - }, - - register: function(render) { - this.registers.push(render); + height: { + default: 256 }, - - update: function (oldData) { - if (!oldData) this.createCanvas(this.data.width, this.data.height); + background: { + default: "#FFFFFF" }, + reverse: { + default: false + } + }, + + init: function () { + this.registers = []; //order of eventing after render + this.update(); + }, + + register: function(render) { + this.registers.push(render); + }, + + update: function (oldData) { + if (!oldData) this.createCanvas(this.data.width, this.data.height); + }, + + createCanvas: function (w, h) { + var _ = this; + var canvas = document.createElement("canvas"); + canvas.width = w; + canvas.height = h; + canvas.style = "display: none"; + _.canvas = canvas; + _.ctx = canvas.getContext("2d"); + + if (this.data.reverse) { + _.ctx.translate(w, 0); + _.ctx.scale(-1, 1); + } - createCanvas: function (w, h) { - var _ = this; - var canvas = document.createElement("canvas"); - canvas.width = w; - canvas.height = h; - canvas.style = "display: none"; - _.canvas = canvas; - _.ctx = canvas.getContext("2d"); - - this.texture = new THREE.Texture(_.canvas); //renders straight from a canvas - if(this.el.object3D.children.length > 0) { //backwards compatibility - this.el.object3D.children[0].material = new THREE.MeshBasicMaterial(); - this.el.object3D.children[0].material.map = this.texture; - } - else { //backwards compatibility - this.el.object3D.material = new THREE.MeshBasicMaterial(); - this.el.object3D.material.map = this.texture; - } - if(!this.el.hasLoaded) this.el.addEventListener("loaded", function() { - _.render(); + this.texture = new THREE.Texture(_.canvas); //renders straight from a canvas + if(this.el.object3D.children.length > 0) { //backwards compatibility + this.el.object3D.children[0].material = new THREE.MeshBasicMaterial(); + this.el.object3D.children[0].material.side = THREE.DoubleSide; + this.el.object3D.children[0].material.map = this.texture; + } + else { //backwards compatibility + this.el.object3D.material = new THREE.MeshBasicMaterial(); + this.el.object3D.material.side = THREE.DoubleSide; + this.el.object3D.material.map = this.texture; + } + if(!this.el.hasLoaded) this.el.addEventListener("loaded", function() { + _.render(); + }); + else _.render(); + }, + + render: function() { + if(this.registers.length > 0) { //backwards compatibility + this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); + this.ctx.fillStyle = this.data.background; + this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height); + this.registers.forEach(function(item) { + item(); }); - else _.render(); - }, + } + this.texture.needsUpdate = true; + }, - render: function() { - if(this.registers.length > 0) { //backwards compatibility - this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.ctx.fillStyle = this.data.background; - this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height); - this.registers.forEach(function(item) { - item(); - }); - } - this.texture.needsUpdate = true; - }, - - //not the most removable component out there, so will leave blank for now - remove: function () {} - }; + //not the most removable component out there, so will leave blank for now + remove: function () {} +}; -/***/ } +/***/ }), +/* 1 */ +/***/ (function(module, exports, __webpack_require__) { + +// Browser distribution of the A-Frame component. +(function () { + if (typeof AFRAME === 'undefined') { + console.error('Component attempted to register before AFRAME was available.'); + return; + } + + // Register all components here. + var components = { + draw: __webpack_require__(0).component + }; + + Object.keys(components).forEach(function (name) { + if (AFRAME.aframeCore) { + AFRAME.aframeCore.registerComponent(name, components[name]); + } else { + AFRAME.registerComponent(name, components[name]); + } + }); +})(); + + +/***/ }) /******/ ]); \ No newline at end of file diff --git a/dist/aframe-draw-component.min.js b/dist/aframe-draw-component.min.js index d4a4342..256d2b1 100644 --- a/dist/aframe-draw-component.min.js +++ b/dist/aframe-draw-component.min.js @@ -1 +1 @@ -!function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t,i){!function(){if("undefined"==typeof AFRAME)return void console.error("Component attempted to register before AFRAME was available.");var e={draw:i(1).component};Object.keys(e).forEach(function(t){AFRAME.aframeCore?AFRAME.aframeCore.registerComponent(t,e[t]):AFRAME.registerComponent(t,e[t])})}()},function(e,t){e.exports.component={schema:{width:{"default":256},height:{"default":256},background:{"default":"#FFFFFF"}},init:function(){this.registers=[],this.update()},register:function(e){this.registers.push(e)},update:function(e){e||this.createCanvas(this.data.width,this.data.height)},createCanvas:function(e,t){var i=this,a=document.createElement("canvas");a.width=e,a.height=t,a.style="display: none",i.canvas=a,i.ctx=a.getContext("2d"),this.texture=new THREE.Texture(i.canvas),this.el.object3D.children.length>0?(this.el.object3D.children[0].material=new THREE.MeshBasicMaterial,this.el.object3D.children[0].material.map=this.texture):(this.el.object3D.material=new THREE.MeshBasicMaterial,this.el.object3D.material.map=this.texture),this.el.hasLoaded?i.render():this.el.addEventListener("loaded",function(){i.render()})},render:function(){this.registers.length>0&&(this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height),this.ctx.fillStyle=this.data.background,this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height),this.registers.forEach(function(e){e()})),this.texture.needsUpdate=!0},remove:function(){}}}]); \ No newline at end of file +!function(e){function t(n){if(i[n])return i[n].exports;var r=i[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var i={};return t.m=e,t.c=i,t.i=function(e){return e},t.d=function(e,i,n){t.o(e,i)||Object.defineProperty(e,i,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var i=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(i,"a",i),i},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=1)}([function(e,t){e.exports.component={schema:{width:{default:256},height:{default:256},background:{default:"#FFFFFF"},reverse:{default:!1}},init:function(){this.registers=[],this.update()},register:function(e){this.registers.push(e)},update:function(e){e||this.createCanvas(this.data.width,this.data.height)},createCanvas:function(e,t){var i=this,n=document.createElement("canvas");n.width=e,n.height=t,n.style="display: none",i.canvas=n,i.ctx=n.getContext("2d"),this.data.reverse&&(i.ctx.translate(e,0),i.ctx.scale(-1,1)),this.texture=new THREE.Texture(i.canvas),this.el.object3D.children.length>0?(this.el.object3D.children[0].material=new THREE.MeshBasicMaterial,this.el.object3D.children[0].material.side=THREE.DoubleSide,this.el.object3D.children[0].material.map=this.texture):(this.el.object3D.material=new THREE.MeshBasicMaterial,this.el.object3D.material.side=THREE.DoubleSide,this.el.object3D.material.map=this.texture),this.el.hasLoaded?i.render():this.el.addEventListener("loaded",function(){i.render()})},render:function(){this.registers.length>0&&(this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height),this.ctx.fillStyle=this.data.background,this.ctx.fillRect(0,0,this.canvas.width,this.canvas.height),this.registers.forEach(function(e){e()})),this.texture.needsUpdate=!0},remove:function(){}}},function(e,t,i){!function(){if("undefined"==typeof AFRAME)return void console.error("Component attempted to register before AFRAME was available.");var e={draw:i(0).component};Object.keys(e).forEach(function(t){AFRAME.aframeCore?AFRAME.aframeCore.registerComponent(t,e[t]):AFRAME.registerComponent(t,e[t])})}()}]); \ No newline at end of file diff --git a/index.js b/index.js index 9611cb0..97a9a32 100755 --- a/index.js +++ b/index.js @@ -8,7 +8,10 @@ module.exports.component = { }, background: { default: "#FFFFFF" - } + }, + reverse: { + default: false + } }, init: function () { @@ -33,13 +36,20 @@ module.exports.component = { _.canvas = canvas; _.ctx = canvas.getContext("2d"); + if (this.data.reverse) { + _.ctx.translate(w, 0); + _.ctx.scale(-1, 1); + } + this.texture = new THREE.Texture(_.canvas); //renders straight from a canvas if(this.el.object3D.children.length > 0) { //backwards compatibility this.el.object3D.children[0].material = new THREE.MeshBasicMaterial(); + this.el.object3D.children[0].material.side = THREE.DoubleSide; this.el.object3D.children[0].material.map = this.texture; } else { //backwards compatibility this.el.object3D.material = new THREE.MeshBasicMaterial(); + this.el.object3D.material.side = THREE.DoubleSide; this.el.object3D.material.map = this.texture; } if(!this.el.hasLoaded) this.el.addEventListener("loaded", function() {