Never give up

이번에는 mesh에 이벤트를 넣어주는 작업을 해봤는데 html에서 사용하던 onClick이나 mouseEnter 같은 이벤트를 따로 걸어줄 수 없어서 eventListener를 걸어서 사용했고, 3d에서는 조금 더 복잡한 방법으로 사물의 위치를 추적해야되는거 같습니다 그래서 raycaster를 사용할텐데 자세한 내용은 아래 링크를 참고해주세요(링크 : https://threejs.org/docs/#api/en/core/Raycaster) 화면부분은 간단한 div에 ref만 할당하는 부분으로 동일합니다 use_raycasting.tsimport { useEffect, useRef } from "react";import * as Three from "three";const useRaycasting = () ..

이번에는 계기판을 한번 만들어봤는데 계기판을 영어로 뭐라 표현하면 좋을까 고민하다가 그냥  게이지로 했습니다 index.tsximport React, { useEffect } from 'react';import util from 'src/util/common_util';import CommonBtn from 'src/components/common_btn/common_btn';import { useGauge } from 'src/custom_hooks';const Gauge = () => { const { ref, setValue, resetCamera } = useGauge(); useEffect(() => { const interval = setInterval(() => { ..

Three.js를 다시 시작한 기념(?)으로 간단한 예제들로 시작을 했고 추후에 참고가 되기를 바라며 포스팅을 시작합니다(사실 필자가 까먹을거 대비용으로..) 먼저 공홈에 나와있는 기본 예제+@를 시작으로 하면서 개념들을 집고 넘어갈 예정입니다(기본 예제 링크 : https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene) index.tsximport React from 'react';import { useBasic } from 'src/custom_hooks';const BasicExample = () => { const { ref } = useBasic(); return ( );};export ..