Drink can generates traditional UVs

CHANGELOG.md

@@ -1,6 +1,9 @@
 # 3D Assets
 
 
+## 0.4.4
+* Drink can generates traditional UV coordinates
+
 ## 0.4.3
 * Remove leftover code from *mug.js*
 

docs/drink-can.md

@@ -69,6 +69,23 @@ var model = new DrinkCan ({
 * `flat` – if *true* flat shading is used, if *false* smooth shading is used, boolean
 
 
+### Internal structure
+
+An instance of `DrinkCan` is a `THREE.Group` with three submeshes
+called `body`, `lid` and `tag`. 
+
+The texture mapping of the body is concentric: the *u-axis*
+is circular along the perimeter of the plate, the *v-axis*
+is radial, starting from 0 at the bottom center, 0.5 at the
+rim and 1 at the top rim. The texture mapping of the lid and
+the rim are planar.
+
+
+### Minimal example
+
+[demos/minimal-drink-can.html](../demos/drink-can.html)
+
+
 ### Online generator
 
 [online/drink-can.html](../online/drink-can.html)

docs/mug.md

@@ -95,11 +95,19 @@ is along the handle, starting from 0 at the bottom center,
 and 1 at the inside top center.
 
 
-### Links
+### Minimal example
 
-* Online generator: [online/mug.html](../online/mug.html)
-* Minimal example: [demos/minimal-mug.html](../demos/minimal-mug.html)
-* Source code: [src/mug.js](https://github.com/boytchev/assets/blob/main/src/mug.js)
+[demos/minimal-mug.html](../demos/minimal-mug.html)
+
+
+### Online generator
+
+[online/mug.html](../online/mug.html)
+
+
+### Source
+
+[src/mug.js](https://github.com/boytchev/assets/blob/main/src/mug.js)
 
 		
 <div class="footnote">

docs/plate.md

@@ -73,11 +73,19 @@ starting from 0 at the bottom center, 0.5 at the rim and 1 at
 the top center.
 
 
-### Links
+### Minimal example
 
-* Online generator: [online/plate.html](../online/plate.html)
-* Minimal example: [demos/minimal-plate.html](../demos/minimal-plate.html)
-* Source code: [src/plate.js](https://github.com/boytchev/assets/blob/main/src/plate.js)
+[demos/minimal-plate.html](../demos/minimal-plate.html)
+
+
+### Online generator
+
+[online/plate.html](../online/plate.html)
+
+
+### Source
+
+[src/plate.js](https://github.com/boytchev/assets/blob/main/src/plate.js)
 
 		
 <div class="footnote">

online/online.js

@@ -140,7 +140,7 @@ function install( AssetClass ) {
 	// everything is ready, generate the asset
 	regenerateAsset( );
 
-	//toggleDebugTexture();
+	//toggleDebugTexture(); // ^..^
 
 	return gui;
 

src/drink-can.js

@@ -94,39 +94,79 @@ class DrinkCan extends THREE.Group {
 
 		if ( params.edges )
 			points.push(
-				[ 0, 2*nL ],
-				[ nS-2*nP, 2*nL, nS ], // concave bottom
-				[ nS-2*nP, 0, cG ],
-				[ nS-nP, 0, cG ],
-				[ nS*0.7+0.3*cS, nK/2, nS ],
-				[ cS, nK, cG ],
+				[ 0, 2*nL ], // 0a
+				[ nS-2*nP, 2*nL, nS ], // 1, concave bottom
+				[ nS-2*nP, 0, cG ], // 2
+				[ nS-nP, 0, cG ], // 3
+				[ nS*0.7+0.3*cS, nK/2, nS ], // 4
+
 			);
 		else
 			points.push(
-				[ 0, 0 ],
-				[ nS, 0 ],
-				[ cS, nK ],
+				[ 0, 0 ], // 0b
+				[ nS, 0 ], // 3b
 			); // flat bottom
 
+		points.push(
+			[ cS, nK, cG ], // 5
+		);
 
 		if ( cS!=nS )
-			points.push([ cS, cH-nH, 2*cG ]);
+			points.push([ cS, cH-nH, 2*cG ]); // 6
 
 		points.push(
-			[ nS, cH-2*nP, cG ],
-			[ nS, cH, cG ],
-			[ nS-nP, cH, cG ],
-			[ nS-nP, cH-nL ],
+			[ nS, cH-2*nP, cG ], // 7
+			[ nS, cH, cG ], // 8
+			[ nS-nP, cH, cG ], // 9
+			[ nS-nP, cH-nL ], // 10
 			//[ 0, cH-nL],
 		);
 
 		if ( !params.neckLid )
-			points.push([ 0, cH-nL ]);
+			points.push([ 0, cH-nL ]); // 11
 
 		var bodyShape = new ASSETS.RoundedShape( points );
 
 		var bodyGeometry = new THREE.LatheGeometry( bodyShape.getPoints( 6 ), cC );
 
+		// fix body UVs
+		var pos = bodyGeometry.getAttribute( 'position' ),
+			uv = bodyGeometry.getAttribute( 'uv' );
+
+		var v = new THREE.Vector3(); // temp
+
+		var rows = cC+1;
+		var perRow = pos.count / rows;
+
+		var botIndex = params.edges ? 13 : 1;
+		var topIndex = params.edges ? ( cS!=nS?55:48 ) : ( cS!=nS?5:4 );
+		var botDist = new THREE.Vector3().fromBufferAttribute( pos, botIndex ).length();
+		var botY = new THREE.Vector3().fromBufferAttribute( pos, botIndex ).y;
+
+		for ( var i=0; i<pos.count; i++ ) {
+
+			v.fromBufferAttribute( pos, i );
+			var dist = v.length();
+
+			var inRow = i % perRow;
+
+			if ( inRow<=botIndex )
+				uv.setY( i, 0.1*dist/botDist );
+			else
+				if ( inRow<=topIndex ) {
+
+					var y = v.y;
+					uv.setY( i, THREE.MathUtils.mapLinear( y, botY, cH, 0.1, 0.98 ) );
+
+				} else {
+
+					var y = v.y;
+					uv.setY( i, THREE.MathUtils.mapLinear( y, cH, cH-nL, 0.98, 1 ) );
+
+				}
+
+		}
+
 		this.body = new THREE.Mesh( bodyGeometry, material );
 		this.body.name = 'body';
 
@@ -191,6 +231,10 @@ class DrinkCan extends THREE.Group {
 				bevelSize: 0.001,
 			} );
 
+			var uv = tagGeometry.getAttribute( 'uv' );
+			for ( var i=0; i<uv.count; i++ )
+				uv.setXY( i, ( -uv.getX( i ) )*100+0.5, uv.getY( i )*57.15+0.2857 );
+
 			this.tag = new THREE.Mesh( tagGeometry, material.clone() );
 			this.tag.name = 'tag';
 			this.tag.material.color.set( 1.1, 1.1, 1.1 );