Added drink can

CHANGELOG.md

@@ -1,6 +1,9 @@
 # 3D Assets
 
 
+## 0.4.0
+* Added "Drink can" in *drink-can.js*
+
 ## 0.3.1
 
 * Refactored asset generation and randomization

docs/drink-can.md

@@ -0,0 +1,84 @@
+<img class="logo" src="../assets/logo/logo.png">
+
+
+# 3D Assets
+
+
+## Drink can
+
+This generator creates a 3D drink can . A set of parameters
+control the size and the shape of the can. It is possible to
+generale low-poly drink-can by reducing the complexity,
+removing edges and using flat shading. Click on a snapshot
+to open it online.
+
+<p class="gallery">
+
+	<a class="style-block nocaption" href="../online/drink-can.html?canHeight=12&canSize=6&canComplexity=70&neckHeight=1.5&neckSize=5&neckLid=true&neckTag=true&edges=true&flat=false">
+		<img src="images/drink-can-1.png">
+	</a>
+
+	<a class="style-block nocaption" href="../online/drink-can.html?canHeight=5&canSize=7.46&canComplexity=70&neckHeight=1.5&neckSize=6.5&neckLid=true&neckTag=true&edges=true&flat=false">
+		<img src="images/drink-can-2.png">
+	</a>
+
+	<a class="style-block nocaption" href="../online/drink-can.html?canHeight=13.4&canSize=5&canComplexity=70&neckHeight=1.5&neckSize=5.9&neckLid=true&neckTag=true&edges=true&flat=false">
+		<img src="images/drink-can-3.png">
+	</a>
+
+</p>
+
+
+### Code example
+
+```js
+import { DrinkCan } from "3d-assets/drink-can.js";
+
+var model = new DrinkCan ({
+	canHeight: 12,
+	canSize: 6,
+	canComplexity: 70,
+	neckHeight: 1.5,
+	neckSize: 5,
+	neckLid: true,
+	neckTag: true,
+	edges: true,
+	flat: false
+});
+```
+
+
+### Parameters
+
+#### Can parameters
+
+* `canHeight` &ndash; height of the drink can, in cm, [5, 20]
+* `canSize` &ndash; diameter of the drink-can, in cm, [5, 8]
+
+#### Neck parameters
+
+* `neckHeight` &ndash; desired height of the neck, in cm, [1, 3]
+* `neckSize` &ndash; desired size of the neck, in cm, [4, 9]
+* `neckLid` &ndash; if *true* the lid is textured, if *false* the lid is flat, boolean
+* `neckTag` &ndash; if *true* the lid has a tag, if *false* the lid has no tag, boolean
+
+#### Complexity parameters
+
+* `canComplexity` &ndash; number of faces along the drink can perimeter, as percentage, [0, 100]
+* `edges` &ndash; if *true* edges are rounded, if *false* edges are sharp, boolean
+* `flat` &ndash; if *true* flat shading is used, if *false* smooth shading is used, boolean
+
+
+### Online generator
+
+[online/drink-can.html](../online/drink-can.html)
+
+
+### Source
+
+[src/drink-can.js](https://github.com/boytchev/assets/blob/main/src/drink-can.js)
+
+
+<div class="footnote">
+	<a href="../">Home</a>
+</div>

docs/mug.md

@@ -35,20 +35,20 @@ on a snapshot to open it online.
 import { Mug } from "3d-assets/mug.js";
 
 var model = new Mug ({
-	mugHeight=19.8,
-	mugSize=8.64,
-	mugShape=3.2,
-	mugWidth=0.329,
-	mugComplexity=40.58,
-	handlePosition=95,
-	handleHeight=7.3,
-	handleSize=6.07,
-	handleShape=-34.9,
-	handleWidth=1.42,
-	handleThickness=0.74,
-	handleComplexity=70,
-	edges=true,
-	flat=false
+	mugHeight: 19.8,
+	mugSize: 8.64,
+	mugShape: 3.2,
+	mugWidth: 0.329,
+	mugComplexity: 40.58,
+	handlePosition: 95,
+	handleHeight: 7.3,
+	handleSize: 6.07,
+	handleShape: -34.9,
+	handleWidth: 1.42,
+	handleThickness: 0.74,
+	handleComplexity: 70,
+	edges: true,
+	flat: false
 });
 ```
 

docs/plate.md

@@ -35,13 +35,13 @@ on a snapshot to open it online.
 import { Plate } from "3d-assets/plate.js";
 
 var model = new Plate ({
-	plateHeight=1.6,
-	plateSize=18,
-	plateShape=25,
-	plateWidth=0.3,
-	plateComplexity=70,
-	edges=true,
-	flat=false
+	plateHeight: 1.6,
+	plateSize: 18,
+	plateShape: 25,
+	plateWidth: 0.3,
+	plateComplexity: 70,
+	edges: true,
+	flat: false
 });
 ```
 

index.html

@@ -24,6 +24,11 @@ <h3>Welcome. Pick an asset!</h3>
 
 	<div class="gallery">
 
+		<a class="style-block" href="./online/drink-can.html">
+			<div class="title">Drink can</div>
+			<img src="./docs/images/drink-can.png">
+		</a>
+
 		<a class="style-block" href="./online/mug.html">
 			<div class="title">Mug</div>
 			<img src="./docs/images/mug.png">

online/drink-can.html

@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+
+
+<html>
+
+
+<head>
+	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+
+	<link rel="shortcut icon" type="image/png" href="../assets/logo/logo.png"/>
+	<link rel="stylesheet" href="styles.css">
+
+	<script type="importmap">
+	  {
+		"imports": {
+			"three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
+			"three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/",
+			"three/nodes": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/nodes/Nodes.js",
+			"tsl-textures/": "https://cdn.jsdelivr.net/npm/tsl-textures@latest/src/",
+			"assets/": "../src/"
+		}
+	  }
+	</script>
+</head>
+
+
+<body>
+	<div class="footnote bottomfixed">
+		<a href="../">Home</a> &middot;
+		<a id="info" href="">Info</a>
+	</div>
+
+	<script type="module">
+
+		import * as THREE from "three";
+		import { install, params, model, updateModelStatistics } from "./online.js";
+		import { DrinkCan } from "assets/drink-can.js";
+
+
+
+		var gui = install( DrinkCan );
+
+
+
+		var guiC = gui.addFolder( '<big>Can</big>' )
+
+		guiC.add( params, 'canHeight' )
+			.min( 5 ).max( 20 ).step(0.01)
+			.name( 'Height<right>cm</right>' )
+			.$input.classList.add( 'top' );
+
+		guiC.add( params, 'canSize' )
+			.min( 5 ).max( 8 ).step(0.01)
+			.name( 'Size<right>cm</right>' )
+			.$input.classList.add( 'bottom' );
+
+
+		var guiN = gui.addFolder( '<big>Neck</big>' )
+
+		guiN.add( params, 'neckHeight' )
+			.min( 1 ).max( 3 ).step(0.01)
+			.name( 'Height<right>cm</right>' )
+			.$input.classList.add( 'top' );
+
+		guiN.add( params, 'neckSize' )
+			.min( 4 ).max( 9 ).step(0.01)
+			.name( 'Size<right>cm</right>' );
+
+		guiN.add( params, 'neckLid' )
+			.name( 'Lid' );
+
+		guiN.add( params, 'neckTag' )
+			.name( 'Tag' );
+
+
+		var guiT = gui.addFolder( '<big>Complexity</big><right id="model-statistics"></right>' )
+
+		guiT.add( params, 'canComplexity' )
+			.min( 0 ).max( 100 )
+			.name( 'Can<right>%</right>' );
+
+		guiT.add( params, 'edges' )
+			.name( 'Edges' );
+
+		guiT.add( params, 'flat' )
+			.name( 'Flat' );
+
+
+		updateModelStatistics();
+
+	</script>
+</body>
+</html>