init

troisjs · Sep 14, 2020 · a21071a · a21071a
commit a21071a
Show file tree

Hide file tree

Showing 30 changed files with 683 additions and 0 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,40 @@
+/* eslint-disable quote-props */
+module.exports = {
+  env: {
+    browser: true,
+    es2020: true,
+  },
+  extends: [
+    'plugin:vue/essential',
+    'standard',
+  ],
+  parserOptions: {
+    ecmaVersion: 12,
+    sourceType: 'module',
+  },
+  plugins: [
+    'vue',
+  ],
+  rules: {
+    'semi': [2, 'always'],
+    'space-before-function-paren': 'off',
+    'one-var': 'off',
+    'quotes': 'off',
+    'quote-props': 'off',
+    'object-curly-newline': 'off',
+    'no-unused-vars': 'warn',
+    // 'comma-dangle': ['warn', 'always-multiline'],
+    'comma-dangle': ['warn', {
+      'arrays': 'always-multiline',
+      'objects': 'always-multiline',
+      'imports': 'always-multiline',
+      'exports': 'always-multiline',
+      'functions': 'never',
+    }],
+    'indent': 'warn',
+    'no-new': 'off',
+    'object-property-newline': 'off',
+    'eqeqeq': 'warn',
+    'no-multiple-empty-lines': 'off',
+  },
+};
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+.DS_Store
+dist
+*.local
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Vite App</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "test-vite",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "three": "^0.119",
+    "vue": "^3.0.0-rc.10",
+    "vuex": "^4.0.0-beta.4"
+  },
+  "devDependencies": {
+    "@vue/compiler-sfc": "^3.0.0-rc.10",
+    "eslint": "^7.7.0",
+    "eslint-config-airbnb-base": "^14.2.0",
+    "eslint-config-standard": "^14.1.1",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.1",
+    "eslint-plugin-vue": "^6.2.2",
+    "vite": "^1.0.0-rc.1"
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,14 @@
+<template>
+  <Test></Test>
+</template>
+
+<script>
+import Test from './components/Test.vue';
+
+export default {
+  name: 'App',
+  components: {
+    Test,
+  },
+};
+</script>
diff --git a/src/components/Test.vue b/src/components/Test.vue
@@ -0,0 +1,59 @@
+<template>
+  <Renderer ref="renderer" :animate="anim">
+    <PerspectiveCamera :position="{ z: 100 }"></PerspectiveCamera>
+
+    <PhongMaterial name="mat1" color="#ff0000"></PhongMaterial>
+    <LambertMaterial name="mat2" color="#0000ff"></LambertMaterial>
+
+    <Scene>
+      <PointLight :position="{ x: 0, y: 50, z: 50 }"></PointLight>
+      <Box ref="box" :size="10" :rotation="{ x: 0.5, y: 0.25 }" material="mat1"></Box>
+      <Sphere ref="sphere" :radius="10" :position="{ x: 50 }" material="mat2"></Sphere>
+    </Scene>
+  </Renderer>
+</template>
+
+<script>
+import {
+  Renderer, PerspectiveCamera, Scene,
+  PointLight,
+  Box, Sphere,
+  LambertMaterial, PhongMaterial,
+} from '../index.js';
+
+import { useAnimate } from '../core/Renderer.vue';
+
+export default {
+  components: {
+    Renderer, PerspectiveCamera, Scene,
+    PointLight,
+    Box, Sphere,
+    LambertMaterial, PhongMaterial,
+  },
+  data() {
+    return {
+      anim: null,
+    };
+  },
+  mounted() {
+    console.log('Test mounted');
+    // useAnimate(() => {
+    //   this.$refs.box.mesh.rotation.x += 0.01;
+    // });
+    // useAnimate(this.animate);
+  },
+  beforeUnmount() {
+    console.log('Test beforeUnmount');
+  },
+  methods: {
+    animate() {
+      this.$refs.box.mesh.rotation.x += 0.01;
+      // if (this.$refs.box) {
+      //   this.$refs.box.mesh.rotation.x += 0.01;
+      //   this.$refs.box.mesh.rotation.y += 0.013;
+      //   this.$refs.box.mesh.rotation.z += 0.007;
+      // }
+    },
+  },
+};
+</script>
diff --git a/src/core/PerspectiveCamera.js b/src/core/PerspectiveCamera.js
@@ -0,0 +1,26 @@
+import { PerspectiveCamera, Vector3 } from 'three';
+
+import { setFromProp } from '../tools.js';
+
+export default {
+  inject: ['three'],
+  props: {
+    fov: {
+      type: Number,
+      default: 50,
+    },
+    position: Object,
+    // position: {
+    //   type: Object,
+    //   default: new Vector3(),
+    // },
+  },
+  created() {
+    const camera = new PerspectiveCamera(this.fov);
+    setFromProp(camera.position, this.position);
+    this.three.camera = camera;
+  },
+  render() {
+    return [];
+  },
+};
diff --git a/src/core/Renderer.vue b/src/core/Renderer.vue
@@ -0,0 +1,70 @@
+<template>
+  <canvas ref="canvas">
+    <slot></slot>
+  </canvas>
+</template>
+
+<script>
+import useThree from './useThree';
+
+const animateCallbacks = [];
+
+export function useAnimate(callback) {
+  animateCallbacks.push(callback);
+};
+
+export default {
+  props: {
+    alpha: {
+      type: Boolean,
+      default: false,
+    },
+    animate: {
+      type: Function,
+    },
+  },
+  data() {
+    return {
+      raf: true,
+    };
+  },
+  setup(props) {
+    return {
+      three: useThree(),
+    };
+  },
+  provide() {
+    return {
+      three: this.three,
+    };
+  },
+  mounted() {
+    // console.log('Renderer mounted');
+    this.three.init({
+      canvas: this.$refs.canvas,
+    });
+
+    this._animate();
+  },
+  beforeUnmount() {
+    // console.log('Renderer beforeUnmount');
+    // animateCallbacks.splice(0);
+    this.raf = false;
+    this.three.dispose();
+  },
+  methods: {
+    _animate() {
+      if (this.raf) requestAnimationFrame(this._animate);
+      // if (this.animate) this.animate();
+      animateCallbacks.forEach(c => c());
+      if (this.three.scene) this.three.render(this.three.scene);
+    },
+  },
+};
+</script>
+
+<style>
+canvas {
+  display: block;
+}
+</style>
diff --git a/src/core/Scene.js b/src/core/Scene.js
@@ -0,0 +1,22 @@
+import { Scene } from 'three';
+
+export default {
+  emits: ['scene-ready'],
+  inject: ['three'],
+  setup (props) {
+    const scene = new Scene();
+    return { scene };
+  },
+  provide() {
+    return {
+      scene: this.scene,
+    };
+  },
+  mounted() {
+    this.three.scene = this.scene;
+    this.$emit('scene-ready');
+  },
+  render() {
+    return this.$slots.default();
+  },
+};
diff --git a/src/core/index.js b/src/core/index.js
@@ -0,0 +1,3 @@
+export { default as Renderer } from './Renderer.vue';
+export { default as PerspectiveCamera } from './PerspectiveCamera.js';
+export { default as Scene } from './Scene.js';