dghez

/* eslint-disable no-multi-assign */

import { useMemo } from 'react'
import { TextureLoader, NearestFilter, FloatType, HalfFloatType, LinearEncoding } from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { EXRLoader } from 'three/examples/jsm/loaders/EXRLoader.js'

import staticData from './data.yml'

class Resources {

dghez

const mousePos = { x: 0, y: 0 }

export default function (evt) {
  mousePos.x = (evt.clientX / window.innerWidth) * 2 - 1
  mousePos.y = -(evt.clientY / window.innerHeight) * 2 + 1
  return mousePos
}

dghez

<template>
  <div :class="$style.wrapper"></div>
</template>

<script>
import Vue from 'vue'
import Component, { mixins } from 'vue-class-component'
@Component({
  components: {},
  props: {}

dghez

<template>
  <div>
    <Header
      :links="links"
      :options="header"
      :is-transparent="false"
    />
    <div :class="$style.wrapper">
      <Policies
        :content="content"

dghez

import { Vector3 } from 'three'

const v = new Vector3()

export default (v3, camera) => {
  v.copy(v3)
  v.project(camera)

  return {
    x: v.x * window.innerWidth * 0.5 + window.innerWidth * 0.5,

dghez

import { MathUtils } from "three";

export default function distance(width, camera) {
  const vFOV = MathUtils.degToRad(camera.fov);
  const distance = width / camera.aspect / (2 * Math.tan(vFOV / 2));
  const heightPlane = 2 * Math.tan(vFOV / 2) * distance;
  return { distance, height: heightPlane };
}

dghez

export default function isTouch() {
    return 'ontouchstart' in document.documentElement
}

dghez

const windowSizes = {
  w: document.body.clientWidth,
  h: window.innerHeight,
}

// pixels pos
const mousePosPixels = {
  x: 0,
  y: 0,
}

dghez

import {MathUtils} from "three";

// this gives the "visible" plane sizes that is visible from the camera at a certain distance
export default function(distance, camera) {
  const vFOV = MathUtils.degToRad(camera.fov);
  const height = 2 * Math.tan(vFOV / 2) * distance;
  const width = height * camera.aspect;
  return { width, height };
}

dghez

// NOT 100% SURE IT'S THE RIGHT WAY TO DO THAT
// DECLARE IT AND REUSE IT
var vector = new THREE.Vector3() // create temp vec
var position = new THREE.Vector3() // create temp vec

onMouseMove (evt) {
    let x = (evt.clientX / window.innerWidth) * 2 - 1 // percentuage and center
    let y = -(evt.clientY / window.innerHeight) * 2 + 1

    vector.set(x, y, 0.5) // create temp vec