first POC

.gitignore

@@ -1,104 +1,23 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# TypeScript v1 declaration files
-typings/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
+.DS_Store
+node_modules
+/dist
 
-# Optional eslint cache
-.eslintcache
 
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
+# local env files
+.env.local
+.env.*.local
 
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-.env.test
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-
-# Next.js build output
-.next
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and *not* Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -1 +1,24 @@
-# electron-texture-paint
+# electron-texture-paint
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn serve
+```
+
+### Compiles and minifies for production
+```
+yarn build
+```
+
+### Lints and fixes files
+```
+yarn lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

archive/HelloWorld.vue

@@ -0,0 +1,89 @@
+<template>
+  <div id="hello"></div>
+</template>
+
+<script>
+import * as THREE from "three";
+import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
+
+export default {
+  name: "HelloWorld",
+  data() {
+    return {
+      sceneCanvas: null,
+      scene: null,
+      camera: null,
+      renderer: null,
+      controls: null,
+    };
+  },
+  mounted() {
+    /* **************
+       BASIC SETUP
+    ************** */
+    this.sceneCanvas = document.getElementById("hello");
+    this.scene = new THREE.Scene();
+    this.camera = new THREE.PerspectiveCamera();
+    this.camera.position.set(0, 0, 0);
+
+    this.renderer = new THREE.WebGLRenderer({
+      antialias: true,
+      powerPreference: "high-performance",
+    });
+    this.renderer.outputEncoding = THREE.sRGBEncoding;
+    this.controls = new OrbitControls(this.camera, this.renderer.domElement);
+    this.controls.addEventListener("change", this.animateThreeJs);
+    this.renderer.setSize(
+      this.sceneCanvas.offsetWidth,
+      this.sceneCanvas.offsetHeight
+    );
+    this.renderer.setClearColor("#212121");
+    this.renderer.shadowMap.enabled = true;
+    this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+    this.renderer.shadowMapSoft = true;
+    this.renderer.shadowMap.autoUpdate = false;
+    this.renderer.shadowMap.needsUpdate = true;
+    this.sceneCanvas.append(this.renderer.domElement);
+
+    // lighting
+    let ambientLight = new THREE.AmbientLight(0xdaccff, 0.5);
+    this.scene.add(ambientLight);
+    let light = new THREE.PointLight(0xfc831d, 1, 100);
+    light.position.set(15, 10, 15);
+    light.castShadow = true;
+    light.shadow.radius = 1;
+    light.shadow.mapSize.width = 2048;
+    light.shadow.mapSize.height = 2048;
+    this.scene.add(light);
+    const loader = new FBXLoader();
+    const fbx_model = require("../assets/angel_statue.fbx");
+    loader.load(fbx_model, function (object) {
+
+      object.traverse(function (child) {
+        if (child.isMesh) {
+          child.castShadow = true;
+          child.receiveShadow = true;
+        }
+      });
+
+      this.scene.add(object);
+    }.bind(this));
+  },
+
+  methods: {
+    animateThreeJs() {
+      this.renderer.render(this.scene, this.camera);
+      this.renderer.shadowMap.needsUpdate = true;
+      console.log("je;;p")
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+#hello {
+  width: 100%;
+  height: 500px;
+}
+</style>

archive/vue.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+    chainWebpack: config => {
+      config.module
+        .rule('fbx')
+        .test(/\.fbx$/)
+        .use('file-loader')
+          .loader('file-loader')
+          .end()
+    }
+  }

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

package.json

@@ -0,0 +1,48 @@
+{
+  "name": "electron-texture-paint",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "core-js": "^3.6.5",
+    "three": "^0.124.0",
+    "vue": "^2.6.11"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {
+
+    }
+  },
+  "prettier":{
+    "printWidth": 120
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

src/App.vue

@@ -0,0 +1,28 @@
+<template>
+  <div id="app">
+    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
+    <ThreeScene />
+    <UVCanvas v-on:uv-update="moveUVCursor(coords)"/>
+  </div>
+</template>
+
+<script>
+import ThreeScene from "./components/ThreeScene.vue";
+import UVCanvas from "./components/UVCanvas.vue";
+
+export default {
+  name: "App",
+  components: {
+    ThreeScene,
+    UVCanvas
+  }
+};
+</script>
+
+<style>
+#app {
+  display: grid;
+  grid-template-columns: 600px 600px;
+  justify-content: center;
+}
+</style>