Face3d#6

client/package.json

@@ -9,7 +9,9 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
+    "tailwindcss": "^1.8.10",
     "three": "^0.120.1",
+    "three-orbitcontrols": "^2.110.3",
     "vue": "^3.0.0-0"
   },
   "devDependencies": {

client/postcss.config.js

@@ -0,0 +1,9 @@
+const autoprefixer = require('autoprefixer');
+const tailwindcss = require('tailwindcss');
+
+module.exports = {
+  plugins: [
+    tailwindcss,
+    autoprefixer,
+  ],
+};

client/src/App.vue

@@ -1,19 +1,21 @@
 <template>
-  <Model />
+  <div>
+    <Nav />
+    <Model />
+  </div>
 </template>
 
 <script>
 import Model from "./components/Model.vue";
+import Nav from "./components/Nav.vue";
 
 export default {
   name: "App",
   components: {
     Model,
+    Nav,
   },
 };
 </script>
 <style>
-body {
-  margin: 0;
-}
 </style>

client/src/assets/styles/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

client/src/components/3DObject.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="fix-object plus-btn">
+    <img class="bar-img" src="../assets/images/icons/plus_icon.png" />
+  </div>
+</template>
+<script>
+export default {
+  name: "Object3D",
+};
+</script>
+<style scoped>
+.fix-object {
+  @apply fixed;
+  top: 80%;
+  right: 10%;
+}
+
+.plus-btn {
+  @apply p-3;
+  @apply cursor-pointer;
+  @apply border-solid;
+  @apply border-2;
+  @apply border-white;
+  @apply bg-white;
+  @apply w-16;
+  @apply h-16;
+  @apply rounded-full;
+}
+
+.plus-btn:hover {
+  @apply border-teal-600;
+  @apply bg-gray-400;
+}
+</style>

client/src/components/ColorPalette.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="space-x-1 bar-center">
+    <div
+      v-for="colorItem in colorItemList"
+      :key="colorItem.id"
+      class="inline-block bar-btn"
+      :style="[!colorItem.texture ? { background: `#${colorItem.color}` } : {}]"
+      @click="clickColor(colorItem)"
+    >
+      <img
+        v-if="colorItem.texture"
+        class="bar-img"
+        :src="getSrc(colorItem.texture)"
+      />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "ColorPalette",
+  props: ["colorItemList"],
+  computed: {
+    /**
+     * This is to get image source.
+     * @param {string} imgPath image path
+     * @returns image
+     */
+    getSrc() {
+      return (imgPath) => require("../assets/" + imgPath);
+    },
+  },
+  methods: {
+    /**
+     * This is to handle click event for color.
+     * This will alert to parent Model component for color picking up.
+     * @param {object} colorItem color item
+     * @returns void
+     */
+    clickColor(colorItem) {
+      this.$emit("get-color", colorItem);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.bar-center {
+  @apply absolute;
+  @apply bottom-0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.bar-img {
+  @apply w-full;
+  @apply h-full;
+  @apply object-cover;
+}
+.bar-btn {
+  @apply cursor-pointer;
+  @apply border-solid;
+  @apply border-2;
+  @apply border-white;
+  @apply bg-white;
+  @apply w-20;
+  @apply h-20;
+}
+.bar-btn:hover {
+  @apply border-teal-600;
+  @apply bg-gray-400;
+}
+</style>