DEV Community: Devdy

How to render a 3D model in your React application with Three.js

Devdy — Thu, 28 Jul 2022 12:33:38 +0000

In this article, we'll cover how to put a 3D model in the React application with Three.js. We'll also cover how to configure the 3D model with Blender. So you will able to render a 3D object (glb) on your application.

3D model sourcing and configuration

First of all, we can find our favourite 3d model from sketchfab.com and I would like to use 3D model with dae format. Then we can import it to Blender and apply the texture on the model. Eventually convert it from fbx format to glb format. Please find the keyboard model here: https://skfb.ly/6VHVW

For applying texture on different parts of the model:

Select every objects of the model and it will show orange when selected the object
Click Material Properties icon on right hand side panel
Choose the Image Texture for Base Color of Surface
Select the corresponding texture image files under textures directory of the downloaded folder

Note: Select viewport shading icon at the top right corner to display the texture of the models

Once we applied the textures, we could export the model to glb format.

Render the 3D model in React app

Time to code now, we can start from installing the required packages:

npm install @react-three/drei @react-three/fiber three

There is a super awesome snippet gltfjsx can turn GLTFs into React component. We can leverage this with following command and it will generate the JSX component automatically.

npx gltfjsx model.glt

We can create the container component to display the model.

import React, { Suspense } from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import Model from "./Model";

export default function App() {
  return (
    <Canvas
      camera={{ position: [3, 20, 14.25], fov: 8 }}
      style={{
        backgroundColor: "#111a21",
        width: "100vw",
        height: "100vh"
      }}
    >
      <ambientLight intensity={1.25} />
      <ambientLight intensity={0.1} />
      <directionalLight intensity={0.4} />
      <Suspense fallback={null}>
        <Model position={[0, -0.1, 0]} />
      </Suspense>
      <OrbitControls autoRotate />
    </Canvas>
  );
}

Hope you enjoy this article and can't wait to see mor interesting 3D object popping up.

Add debug logger when useReducer in React

Devdy — Sun, 12 Apr 2020 08:47:37 +0000

If you have come with Redux background and play around with React useReducer. You are properly missing some useful middleware like logger. This is especially significant when we try to debug in very complicated application. And I found this handy package:

Zaelot-Inc / use-reducer-logger

A very basic logger for the useReducer function in the React Hooks API.

use-reducer-logger

A very very basic logger for the useReducer function in the React Hooks API. Inspired by redux-logger.

Usage

Install with npm install use-reducer-logger --save-dev or yarn add use-reducer-logger -D
Import logger with

import logger from 'use-reducer-logger';

Wrap your reducer with logger before passing it to useReducer

const [state, dispatch] = useReducer(logger(reducer), initialState);

See Example

In a Dev Environment

You should only use this in a dev environment. So you could do something like this to apply the logger based on the env.

function reducer(state, action) {
  switch (action.type) {
    case 'increment'
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }

…

View on GitHub

This logger is easy to embed on reducer and super lightweight because it console.log without any extra dependency. It good enough to uncover the black box but there are few enhancements could be added on top of it:

Fix the issue about useCallback in pure function

Failed to compile.

./src/Context.js
  Line 28:29:  React Hook "useCallback" is called in function "logger" which is neither a React function component or a custom React Hook function  react-hooks/rules-of-hooks

This could be resolved by capitalise the first character of our logger function and declares as React function.

const Logger = (reducer) => {
  // logger implementation
}

Use Console.Group to divide every single action, previous state and next state in reducer and looks more nice and clean to me.

Thanks for reading :)

Connect with your Kubernetes cluster Manually

Devdy — Mon, 06 Apr 2020 08:07:23 +0000

Howdy. I hope everyone going well recently and my city is in curfew so I utilize this period to make up some new skills. Kubernetes(K8s) is one of my favourite deployment platform. I spent my weekend to connect the cluster on the CI pipeline.

Prerequisites

Before we get our hands on, we'll need to setup some tools like register in GKE. Many other tools out there could do the same things as long as they support K8s. Feel free to use other options but make sure that adjust your setting while you're following with this post.

Compose Kube config file

Let's begin with setting up K8s cluster. Could skip this one if you already got yours.

gcloud container clusters create cluster-1 --zone europe-west3-a

Create a temporary folder to store kube config file and any other stuffs.

# environment variables
SERVICE_ACCOUNT_NAME=deployer
NAMESPACE=default
TARGET_FOLDER="/tmp/kube"
KUBECFG_FILE_NAME="${TARGET_FOLDER}/k8s-${SERVICE_ACCOUNT_NAME}-${NAMESPACE}-conf"

# create temp folder
mkdir -p "/tmp/kube"

Create service account and name it as deployer and better to restrict the permission which only need through.

kubectl create sa deployer --namespace default
kubectl create clusterrolebinding deployer --clusterrole cluster-admin --serviceaccount default:deployer

We want the secret which belongs to the service account and the secret bring us to acquire a certificate and a token. There commands help to do us a favour

SECRET_NAME=$(kubectl get sa deployer --namespace=default -o json | jq -r .secrets[].name)

# put the certificate into temp folder
kubectl get secret --namespace default "${SECRET_NAME}" -o json | jq \
    -r '.data["ca.crt"]' | base64 --decode  > "tmp/kube/ca.crt"

# extract and declare user token
USER_TOKEN=$(kubectl get secret --namespace default "${SECRET_NAME}" -o json | jq -r '.data["token"]' | base64 --decode)

Then we can set kube config file with the information above likes certificate, token etc. Eventually we should have a kube config file with corresponding value to allow our agent docker container connect to K8s.

CONTEXT=$(kubectl config current-context)

CLUSTER_NAME=$(kubectl config get-contexts "${CONTEXT}" | awk '{print $3}' | tail -n 1)

ENDPOINT=$(kubectl config view \
    -o jsonpath="{.clusters[?(@.name == \"${CLUSTER_NAME}\")].cluster.server}")

# set cluster in kube config
kubectl config set-cluster "${CLUSTER_NAME}" \
    --kubeconfig="${KUBECFG_FILE_NAME}" \
    --server="${ENDPOINT}" \
    --certificate-authority="${TARGET_FOLDER}/ca.crt" \
    --embed-certs=true

# set token credentials in kube config 
kubectl config set-credentials \
    deployer-default-${CLUSTER_NAME}" \
    --kubeconfig=/tmp/kube/kube-conf \
    --token="${USER_TOKEN}"

# set context in kube config
kubectl config set-context \
    "deployer-default-${CLUSTER_NAME}" \
    --kubeconfig=/tmp/kube/kube-conf \
    --cluster="${CLUSTER_NAME}" \
    --user="deployer-default-${CLUSTER_NAME}" \
    --namespace=default

# use context with kube config
kubectl config use-context "deployer-default-${CLUSTER_NAME}" \
    --kubeconfig=/tmp/kube/kube-conf

Now the bullets are loaded and ready to roll. We can find the kube config file in this path: /tmp/kube/.

# sample of kube config file
apiVersion: v1
clusters:
- cluster:
    certificate-authority-data: BASE64_CA_CERT
    server: https://YOUR_API_IP
  name: k8s
contexts:
- context:
    cluster: k8s
    user: k8s-deployer
  name: k8s
current-context: k8s
kind: Config
preferences: {}
users:
- name: k8s-deployer
  user:
    token: BASE64_TOKEN

Last but definitely not least, we have to grant the role based access control permission for service account and create the permissions-template.yaml

# permissions-template.yaml
---
kind: ClusterRoleBinding
apiVersion: rbac.authorization.k8s.io/v1beta1
metadata:
  name: my_account-clusterrolebinding
subjects:
  - kind: ServiceAccount
    name: my_account
    namespace: my_namespace
roleRef:
  kind: ClusterRole
  name: cluster-admin
  apiGroup: ""

Time to apply the permission

# adjust the template and create the permission file for service account
sed -e "s|my_account|deployer|g" -e "s|my_namespace|default|g" \
    permissions-template.yaml > permissions_deployer.yaml     

# apply permission
kubectl apply -f permissions_deployer.yaml

Now we can simply use this kube config file on whichever instance it is and connect to our cluster. You could test the connectivity with this command

KUBECONFIG=/tmp/kube/kube-conf kubectl get pods

Conclusion

Done. It's time to plug and play with our Kubernetes cluster. Stay connected. 😁

Minimal mobile friendly dashboard about Coronavirus

Devdy — Sun, 02 Feb 2020 16:40:58 +0000

Hi all, I just felt sick about zoom in and out the map to read the coronavirus dashboard in my mobile. Therefore, I spent my weekend to created this minimal mobile friendly dashboard to quick peek the status.

Feel free to contribution:
Github repo
Demo