whoisryosuke

import * as THREE from "three";
import { MeshProps, useFrame } from "@react-three/fiber";
import { Mesh } from "three";
import { useRef } from "react";

type MultiMaterialMeshProps = MeshProps & {};

export default function MultiMaterialMesh({}: MultiMaterialMeshProps) {
  const geom = useRef<Mesh>();

whoisryosuke

import * as THREE from "three";
import { MeshProps, Object3DNode, useFrame } from "@react-three/fiber";
import { GlassViewMaterial } from "./shaders/GlassViewShader";
import { Mesh } from "three";
import { useRef } from "react";

// We extend Mesh and replace material with ShaderMaterial - which our custom shader is based off
interface GlassViewMesh extends THREE.Mesh {
  material: THREE.ShaderMaterial;
}

whoisryosuke

import React, { useEffect, useRef } from "react"
import useLoop from "../hooks/useLoop"
import playerInput from "../utils/playerInput"

type Props = {
}

const Gamepad = ({ }: Props) => {
  // The frame/game loop
  // We run this 60fps (max) to sync gamepad input to Input class/store

whoisryosuke

<bpy>
  <Theme>
    <user_interface>
      <ThemeUserInterface
        >
        <wcol_regular>
          <ThemeWidgetColors
            inner_sel="#005cdd"
            >
          </ThemeWidgetColors>

whoisryosuke

import { useState, useEffect } from "react"
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'

// Example from Twitch API docs
// @see: https://dev.twitch.tv/docs/irc/get-started
import tmi from 'tmi.js';

// Define configuration options

whoisryosuke

import * as THREE from 'three'
import { useFrame, extend, MeshProps } from '@react-three/fiber'
import { useRef, useState } from 'react'
import useStore from '@/helpers/store'
import { shaderMaterial } from '@react-three/drei'
import { Color, Mesh } from "three"

import vertex from './glsl/shader.vert'
import fragment from './glsl/shader.frag'

whoisryosuke

import * as THREE from 'three'
import { useFrame, extend } from '@react-three/fiber'
import { useRef, useState } from 'react'
import useStore from '@/helpers/store'
import { shaderMaterial } from '@react-three/drei'
import { Mesh } from "three"

import vertex from './glsl/shader.vert'
import fragment from './glsl/shader.frag'

whoisryosuke

  uniform vec3 color;
  uniform float borderWidth;
  varying vec2 vUv;


  void main() {

    // We basically go through the X and Y values to see if they're less than the threshold
    // UV goes from 0 to 1, so as X travels from 0 to 1
    // we "limit" the color to when X is less than the borderWidth

whoisryosuke

Configuring recommended extensions

1. Open the command palette CMD + Shift + p
2. Type Configure Recommended Extensions
3. A new file called extensions.json will be created under .vscode/ in the root of the project.
4. Place the cursor within the recommendations array and press CMD + i. This will show a list of extensions by author and extension name (author/extension).
5. Select the required extensions from the list of installed extensions and save the file.

To see if it worked

1. Open the command palette CMD + Shift + p

whoisryosuke

{
  "$schema": "https://raw.githubusercontent.com/JanDeDobbeleer/oh-my-posh/main/themes/schema.json",
  "blocks": [
    {
      "alignment": "left",
      "segments": [
        {
          "background": "#ffffff",
          "foreground": "#000000",
          "leading_diamond": "",