Fix error when material component uses a canvas texture and add an example (#806)

vincentfretin · web-flow · commit 3534957831a4 · 2025-04-05T09:21:18.000-07:00
diff --git a/examples/index.html b/examples/index.html
@@ -12,11 +12,60 @@
         models: {type: 'array', oneOf: ['one', 'two', 'three', 'four']}
       }
     })
+
+    AFRAME.registerComponent('draw-smiley', {
+      schema: {
+        canvas: {type: 'selector'}
+      },
+      init() {
+        var canvas = this.data.canvas;
+        var ctx = canvas.getContext('2d');
+
+        // Clear canvas and fill with white background
+        ctx.fillStyle = 'white';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+        // Center point of canvas
+        var centerX = canvas.width / 2;
+        var centerY = canvas.height / 2;
+
+        // Smiley parameters
+        var faceRadius = 200;
+        var eyeRadius = 20;
+        var eyeOffsetX = 60;
+        var eyeOffsetY = 50;
+        var mouthRadius = 120;
+
+        // Draw face
+        ctx.beginPath();
+        ctx.arc(centerX, centerY, faceRadius, 0, Math.PI * 2, true); // Outer circle
+        ctx.fillStyle = 'yellow';
+        ctx.fill();
+        ctx.strokeStyle = 'black';
+        ctx.lineWidth = 4;
+        ctx.stroke();
+
+        // Draw eyes
+        ctx.beginPath();
+        ctx.arc(centerX - eyeOffsetX, centerY - eyeOffsetY, eyeRadius, 0, Math.PI * 2, true); // Left eye
+        ctx.arc(centerX + eyeOffsetX, centerY - eyeOffsetY, eyeRadius, 0, Math.PI * 2, true); // Right eye
+        ctx.fillStyle = 'black';
+        ctx.fill();
+
+        // Draw smile
+        ctx.beginPath();
+        ctx.arc(centerX, centerY + 30, mouthRadius, 0, Math.PI, false); // Mouth (smile)
+        ctx.lineWidth = 8;
+        ctx.strokeStyle = 'black';
+        ctx.stroke();
+      }
+    })
     </script>
   </head>
   <body>
     <a-scene debug="true">
       <a-assets>
+        <canvas id="canvasTexture" width="512" height="512" />
         <a-mixin id="blue" material="color: #4CC3D9"></a-mixin>
         <a-mixin id="blueBox" geometry="primitive: box; depth: 2; height: 5; width: 1" material="color: #4CC3D9"></a-mixin>
         <a-mixin id="box" geometry="primitive: box; depth: 1; height: 1; width: 1"></a-mixin>
@@ -40,6 +89,7 @@
       <a-entity id="yellowSphere" geometry="primitive: sphere" material="color: #ff0; roughness: 1" position="-2 2 -2" models-array="models:one,two"></a-entity>
       <a-box src="https://aframe.io/sample-assets/assets/images/bricks/brick_bump.jpg" position="-5 5 -2" width="1" color="#F16745"></a-box>
       <a-box id="aBox" position="0 2 0" height="2" color="#FFC65D"></a-box>
+      <a-plane id="smiley" position="2.5 2 0" width="1" height="1" material="src: #canvasTexture" draw-smiley="canvas: #canvasTexture"></a-plane>
 
       <!-- Models. -->
       <a-entity class="boxClass" geometry="primitive: box" material="src: #crateImg" position="3 4 0"></a-entity>
diff --git a/src/components/widgets/TextureWidget.js b/src/components/widgets/TextureWidget.js
@@ -139,9 +139,12 @@ export default class TextureWidget extends React.Component {
     var isAssetHash = value[0] === '#';
     var isAssetImg = value instanceof HTMLImageElement;
     var isAssetVideo = value instanceof HTMLVideoElement;
-    var isAssetImgOrVideo = isAssetImg || isAssetVideo;
+    var isAssetCanvas = value instanceof HTMLCanvasElement;
+    var isAssetElement = isAssetImg || isAssetVideo || isAssetCanvas;
 
-    if (isAssetImgOrVideo) {
+    if (isAssetCanvas) {
+      url = null;
+    } else if (isAssetImg || isAssetVideo) {
       url = value.src;
     } else if (isAssetHash) {
       url = getUrlFromId(value);
@@ -151,7 +154,7 @@ export default class TextureWidget extends React.Component {
 
     var texture = getTextureFromSrc(value);
     var valueType = null;
-    valueType = isAssetImgOrVideo || isAssetHash ? 'asset' : 'url';
+    valueType = isAssetElement || isAssetHash ? 'asset' : 'url';
     if (!isAssetVideo && texture) {
       texture.then(paintPreview);
     } else if (!isAssetVideo && url) {
@@ -170,7 +173,7 @@ export default class TextureWidget extends React.Component {
     }
 
     this.setState({
-      value: isAssetImgOrVideo ? '#' + value.id : value,
+      value: isAssetElement ? '#' + value.id : value,
       valueType: valueType,
       url: url
     });
@@ -217,7 +220,10 @@ export default class TextureWidget extends React.Component {
     let hint = '';
     if (this.state.value) {
       if (this.state.valueType === 'asset') {
-        hint = 'Asset ID: ' + this.state.value + '\nURL: ' + this.state.url;
+        hint = 'Asset ID: ' + this.state.value;
+        if (this.state.url !== null) {
+          hint += '\nURL: ' + this.state.url;
+        }
       } else {
         hint = 'URL: ' + this.state.value;
       }
