canvas text in 3d env ok

assets/css/base/_fonts.scss

@@ -1,4 +1,3 @@
-@import '../fonts/libertinus/libertinus.css';
 @import '../fonts/notosans/notosans.css';
 // @import '../fonts/notosans/notosans-semicondensed.css';
 // @import '../fonts/notosans/notosans-condensed.css';
@@ -7,12 +6,9 @@
 @mixin fontsans {
   font-family: "noto_sans";
 }
-@mixin fontserif {
-  font-family: 'libertinus_serif';
-}
 
 body{
-  @include fontserif;
+  @include fontsans;
   font-weight: 400;
 
   // font-family: 'noto_sans';

assets/fonts/libertinus/libertinus.css

@@ -1,98 +0,0 @@
-@font-face {
-    font-family: 'libertinus_serif';
-    src: url('libertinusserif-regular-webfont.woff2') format('woff2'),
-         url('libertinusserif-regular-webfont.woff') format('woff');
-    font-weight: 400;
-    font-style: normal;
-
-}
-@font-face {
-    font-family: 'libertinus_serif';
-    src: url('libertinusserif-italic-webfont.woff2') format('woff2'),
-         url('libertinusserif-italic-webfont.woff') format('woff');
-    font-weight: 400;
-    font-style: italic;
-
-}
-@font-face {
-    font-family: 'libertinus_serif';
-    src: url('libertinusserif-semibold-webfont.woff2') format('woff2'),
-         url('libertinusserif-semibold-webfont.woff') format('woff');
-    font-weight: 600;
-    font-style: normal;
-
-}
-@font-face {
-    font-family: 'libertinus_serif';
-    src: url('libertinusserif-semibolditalic-webfont.woff2') format('woff2'),
-         url('libertinusserif-semibolditalic-webfont.woff') format('woff');
-    font-weight: 600;
-    font-style: italic;
-
-}
-@font-face {
-    font-family: 'libertinus_serif';
-    src: url('libertinusserif-bold-webfont.woff2') format('woff2'),
-         url('libertinusserif-bold-webfont.woff') format('woff');
-    font-weight: 800;
-    font-style: normal;
-
-}
-@font-face {
-    font-family: 'libertinus_serif';
-    src: url('libertinusserif-bolditalic-webfont.woff2') format('woff2'),
-         url('libertinusserif-bolditalic-webfont.woff') format('woff');
-    font-weight: 800;
-    font-style: italic;
-
-}
-@font-face {
-    font-family: 'libertinus_serif_initials';
-    src: url('libertinusserifinitials-regular-webfont.woff2') format('woff2'),
-         url('libertinusserifinitials-regular-webfont.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-
-}
-@font-face {
-    font-family: 'libertinus_serif_display';
-    src: url('libertinusserifdisplay-regular-webfont.woff2') format('woff2'),
-         url('libertinusserifdisplay-regular-webfont.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-
-}
-
-
-@font-face {
-    font-family: 'libertinus_sans';
-    src: url('libertinussans-regular-webfont.woff2') format('woff2'),
-         url('libertinussans-regular-webfont.woff') format('woff');
-    font-weight: 400;
-    font-style: normal;
-
-}
-@font-face {
-    font-family: 'libertinus_sans';
-    src: url('libertinussans-italic-webfont.woff2') format('woff2'),
-         url('libertinussans-italic-webfont.woff') format('woff');
-    font-weight: 400;
-    font-style: italic;
-
-}
-@font-face {
-    font-family: 'libertinus_sans';
-    src: url('libertinussans-bold-webfont.woff2') format('woff2'),
-         url('libertinussans-bold-webfont.woff') format('woff');
-    font-weight: 800;
-    font-style: normal;
-
-}
-@font-face {
-    font-family: 'libertinus_mono';
-    src: url('libertinusmono-regular-webfont.woff2') format('woff2'),
-         url('libertinusmono-regular-webfont.woff') format('woff');
-    font-weight: 400;
-    font-style: normal;
-
-}

src/App.vue

@@ -83,7 +83,8 @@ export default {
       myScene: scene,
       mouse: new THREE.Vector2(),
       camera: null,
-      raycaster: new THREE.Raycaster()
+      raycaster: new THREE.Raycaster(),
+      interactive_objects: []
     }
   },
   computed: {
@@ -105,10 +106,13 @@ export default {
   mounted () {
     console.log('mounted', this)
     this.camera = this.$children[0].global.camera
-
+    this.updatedInteractiveObjects()
     document.addEventListener('mousemove', this.onMouseMove, false)
     document.addEventListener('click', this.onDocumentClick, false)
   },
+  updated () {
+    this.updatedInteractiveObjects()
+  },
   methods: {
     ...mapActions({
       getProjects: 'Projects/getProjects'
@@ -121,13 +125,22 @@ export default {
       this.mouse.x = (e.clientX / window.innerWidth) * 2 - 1
       this.mouse.y = -(e.clientY / window.innerHeight) * 2 + 1
     },
+    updatedInteractiveObjects () {
+      this.interactive_objects = []
+      for (var i = 0; i < this.myScene.children.length; i++) {
+        if (this.myScene.children[i].name === 'Project') {
+          this.interactive_objects.push(this.myScene.children[i])
+        }
+      }
+      console.log('this.interactive_objects', this.interactive_objects)
+    },
     onDocumentClick (e) {
       console.log('onDocumentClick', e)
 
       // update the picking ray with the camera and mouse position
       this.raycaster.setFromCamera(this.mouse, this.camera)
       // calculate objects intersecting the picking ray
-      var intersects = this.raycaster.intersectObjects(this.myScene.children)
+      var intersects = this.raycaster.intersectObjects(this.interactive_objects)
 
       for (var i = 0; i < intersects.length; i++) {
         intersects[i].object.material.color.set(0xff0000)

src/components/objects/Plan.vue

@@ -1,5 +1,6 @@
 <template>
-  <mesh name="Cube"
+  <mesh
+    name="Plane"
     :position="position"
     :rotation="{
       x:deg2rad(rotation.x),
@@ -31,7 +32,8 @@ export default {
       side: THREE.DoubleSide,
       wireframe: false,
       transparent: true,
-      opacity: 0.1
+      opacity: 0.1,
+      renderOrder: 1
     }
   })
 }

src/components/objects/Project.vue

@@ -1,12 +1,21 @@
 <template>
-  <mesh name="Cube" :position="position">
-    <geometry type="Box" :args="[size.x, size.y, size.z]" />
-    <material type="MeshBasic" :color="color" :options="opts" />
-  </mesh>
+  <div>
+    <mesh name="Project" :position="position">
+      <geometry type="Box" :args="[size.x, size.y, size.z]" />
+      <material type="MeshBasic" :color="color" :options="block_opts" />
+    </mesh>
+    <mesh name="Label" :position="label_position">
+      <geometry type="Plane" :args="[label_size.x, label_size.y]" />
+      <material type="MeshBasic" :options="label_opts">
+        <texture :options="label_texture_opts" />
+      </material>
+    </mesh>
+  </div>
 </template>
 
 <script>
 import * as THREE from 'three'
+// import { Object3D } from '@'
 
 export default {
   name: 'Project',
@@ -14,21 +23,72 @@ export default {
   // props: { size: Object, texture: String, position: Object, color: Number },
   props: { data: Object, len: Number, index: Number },
   data: () => ({
-    opts: {
+    block_opts: {
       side: THREE.DoubleSide,
       wireframe: false,
       transparent: true,
       opacity: 0.6
+      // renderOrder: 0
+    },
+    label_opts: {
+      side: THREE.DoubleSide,
+      // wireframe: false,
+      transparent: true
+      // opacity: 0.6
+      // renderOrder: 0
     },
     size: { x: 10, y: 10, z: 10 },
     position: { x: 5, y: 5, z: 0 },
-    color: 0xffffff
+    label_position: { x: 5, y: 5, z: 20 },
+    color: 0xffffff,
+    label_canvas: null,
+    label_size: null
   }),
+  computed: {
+    label_texture_opts () {
+      return {
+        canvas: this.label_canvas,
+        minFilter: THREE.LinearFilter,
+        wrapS: THREE.ClampToEdgeWrapping,
+        wrapT: THREE.ClampToEdgeWrapping
+      }
+    }
+  },
   created () {
-    console.log('this.index', this.index)
+    // console.log('this.index', this.index)
     this.size.y = 20 + Math.random() * 90
-    this.position.y = -10 + Math.random() * this.size.y / 2
-    this.position.x = -this.len / 2 * 15 + 15 * this.index
+    this.position.y = this.label_position.y = -10 + Math.random() * this.size.y / 2
+    this.position.x = this.label_position.x = -this.len / 2 * 15 + 15 * this.index
+    this.label_canvas = this.createLabelCanvas()
+    console.log('this.label_canvas', this.label_canvas)
+  },
+  methods: {
+    createLabelCanvas () {
+      console.log('createLabelCanvas', this.data.Titre)
+      const size = 48
+      const borderSize = 2
+      const ctx = document.createElement('canvas').getContext('2d')
+      const font = `${size}px bold noto_sans`
+      ctx.font = font
+      // measure how long the name will be
+      const doubleBorderSize = borderSize * 2
+      const width = ctx.measureText(this.data.Titre).width + doubleBorderSize
+      const height = size + doubleBorderSize
+      this.label_size = { x: width / 10, y: height / 10 }
+      ctx.canvas.width = width
+      ctx.canvas.height = height
+
+      // need to set font again after resizing canvas
+      ctx.font = font
+      ctx.textBaseline = 'top'
+
+      // ctx.fillStyle = 'green'
+      // ctx.fillRect(0, 0, width, height)
+      ctx.fillStyle = 'white'
+      ctx.fillText(this.data.Titre, borderSize, borderSize)
+      // console.log('createLabelCanvas', ctx)
+      return ctx.canvas
+    }
   }
 }
 </script>