- I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

Hello. I'm Takuya Matsuyama from Japan, an indie developer making a Markdown note-taking app called Inkdrop.
I've built a 3D holographic terminal using Looking Glass Portrait and Hyper.
I hope you enjoy it!

▶ Check out my product: Inkdrop - Markdown note-taking app
https://www.inkdrop.app/?utm_s...

Hello. I'm Takuya Matsuyama from Japan, an indie developer making a Markdown note-taking app called Inkdrop.
I've built a 3D holographic terminal using Looking Glass Portrait and Hyper.
I hope you enjoy it!

▶ Check out my product: Inkdrop - Markdown note-taking app
https://www.inkdrop.app/?utm_source=devaslife&utm_medium=youtube&utm_campaign=vlog&utm_content=y6mRqhR49aI
▶ Source code
https://github.com/craftzdog/hyper-holoplay
▶ Looking Glass Portrait
https://lookingglassfactory.com/product/portrait
▶ My dotfiles
https://github.com/craftzdog/dotfiles-public
▶ My NeoVim set up
https://www.youtube.com/watch?v=FW2X1CXrU1w
▶ My equipment
* Video editing: Final Cut Pro X
* Camera: Fujifilm X-T4
* Mic: Zoom H1n & Blue Microphones Yeti
* Slider: SliderONE v2
* Keyboard: Keychron K2V2 - https://www.youtube.com/watch?v=-UW_c8VT2ZE
* Browser: Min - https://minbrowser.org/
* Keystroke visualizer: KeyCastr - https://github.com/keycastr/keycastr
* Cursor effect: Cursor Pro - https://apple.co/3rlWOBA?at=11l7AK

Follow me online here:
▶ Twitter https://twitter.com/inkdrop_app
▶ Blog https://blog.inkdrop.app/
▶ Instagram https://instagram.com/craftzdog
▶ Subscribe to my Newsletter https://www.devas.life/

Credits:
▶ BGM: Epidemic Sound https://www.epidemicsound.com/referral/p96aa8/

00:00 Intro
00:41 Looking Glass Portrait
00:53 Install Hyper
01:36 Looking Glass is connected just as a sub-display
01:59 Learn Holoplay.js
02:48 Configure Hyper
04:07 Prepare a plugin
06:53 Define a terminal decorator
09:04 Install holoplay.js
11:32 Implement a simple scene
17:11 Render term canvases in the scene
23:02 Make the terminal 3D
28:46 Run cmatrix
29:37 Run Nyancat
31:34 Enjoy!

#LookingGlass #ThreeJS

#Productivity #Solo dev #Programming #Indie dev #Looking Glass #Looking Glass Portrait #ThreeJS

Intro - I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

Intro

I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

2022年02月08日　

00:00:00 - 00:00:41

what is that matrix🤣 anyway awesome video takuya - I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

what is that matrix🤣 anyway awesome video takuya

I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

2022年02月08日　

00:00:05 - 00:31:54

Looking Glass Portrait - I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

Looking Glass Portrait

I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

2022年02月08日　

00:00:41 - 00:00:53

keyboard thing at ? i’m a fidgeter and that looks like so much fun to fidget with - I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

keyboard thing at ? i’m a fidgeter and that looks like so much fun to fidget with

I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

2022年02月08日　

00:00:48 - 00:31:54

399$ holographic display. Aand to the next video - I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

399$ holographic display. Aand to the next video

I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

2022年02月08日　

00:00:50 - 00:31:54

Install Hyper - I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

Install Hyper

I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

2022年02月08日　

00:00:53 - 00:01:36

what browser is this at ? - I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

what browser is this at ?

I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

2022年02月08日　

00:00:58 - 00:31:54

Looking Glass is connected just as a sub-display - I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

Looking Glass is connected just as a sub-display

I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

2022年02月08日　

00:01:36 - 00:01:59

Learn Holoplay.js - I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

Learn Holoplay.js

I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

2022年02月08日　

00:01:59 - 00:02:48

Configure Hyper - I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

Configure Hyper

I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

2022年02月08日　

00:02:48 - 00:04:07

Prepare a plugin - I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

Prepare a plugin

I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

2022年02月08日　

00:04:07 - 00:06:53

he spelled “terminal” wrong 😭 - I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

he spelled “terminal” wrong 😭

I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

2022年02月08日　

00:04:18 - 00:31:54

Define a terminal decorator - I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

Define a terminal decorator

I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

2022年02月08日　

00:06:53 - 00:09:04

- So much typing to create a simple react component. You ever think about using tsx and react hooks? - I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

- So much typing to create a simple react component. You ever think about using tsx and react hooks?

I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

2022年02月08日　

00:07:02 - 00:31:54

Install holoplay.js - I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

Install holoplay.js

I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

2022年02月08日　

00:09:04 - 00:11:32

Implement a simple scene - I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

Implement a simple scene

I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

2022年02月08日　

00:11:32 - 00:17:11

Render term canvases in the scene - I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

Render term canvases in the scene

I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

2022年02月08日　

00:17:11 - 00:23:02

one could maybe a "browser" (electron app) that renders web pages to the glass with depth based on z-index - I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

one could maybe a "browser" (electron app) that renders web pages to the glass with depth based on z-index

I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

2022年02月08日　

00:20:10 - 00:31:54

vim users be like kkkkkkkkkk jjjjjjjjjjj lelelelelele - I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

vim users be like kkkkkkkkkk jjjjjjjjjjj lelelelelele

I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

2022年02月08日　

00:21:22 - 00:31:54

Make the terminal 3D - I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

Make the terminal 3D

I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

2022年02月08日　

00:23:02 - 00:28:46

Run cmatrix - I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

Run cmatrix

I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

2022年02月08日　

00:28:46 - 00:29:37

Run Nyancat - I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

Run Nyancat

I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

2022年02月08日　

00:29:37 - 00:31:34

Enjoy! - I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

Enjoy!

I've built a 3D holographic terminal w/ Looking Glass Portrait, Three.js, and Hyper

2022年02月08日　

00:31:34 - 00:31:54

チャンネル登録

devaslife

🎉 170,000 人達成！　 📈 予測：20万人まであと840日（2025年9月25日）　

※本サイトに掲載されているチャンネル情報や動画情報はYouTube公式のAPIを使って取得・表示しています。

概要動画一覧タイムテーブルチャンネル分析

Timetable

動画タイムテーブル

よく話題になっている単語を表示する

動画数：62件

字幕を含める

Intro - How I take tech notes as a note app author

Intro

How I take tech notes as a note app author

2023年05月30日　

00:00:00 - 00:01:23

The right tool for the right task - How I take tech notes as a note app author

The right tool for the right task

How I take tech notes as a note app author

2023年05月30日　

00:01:23 - 00:03:18

Embrace your imperfection - How I take tech notes as a note app author

Embrace your imperfection

How I take tech notes as a note app author

2023年05月30日　

00:03:18 - 00:04:25

4 steps for taking tech notes - How I take tech notes as a note app author

4 steps for taking tech notes

How I take tech notes as a note app author

2023年05月30日　

00:04:25 - 00:05:38

1. Identify the problem - How I take tech notes as a note app author

1. Identify the problem

How I take tech notes as a note app author

2023年05月30日　

00:05:38 - 00:08:31

2. Research the possible solutions - How I take tech notes as a note app author

2. Research the possible solutions

How I take tech notes as a note app author

2023年05月30日　

00:08:31 - 00:10:59

3. Validate the solutions - How I take tech notes as a note app author

3. Validate the solutions

How I take tech notes as a note app author

2023年05月30日　

00:10:59 - 00:11:37

What worked well - How I take tech notes as a note app author

What worked well

How I take tech notes as a note app author

2023年05月30日　

00:11:37 - 00:13:03

What didn't work - How I take tech notes as a note app author

What didn't work

How I take tech notes as a note app author

2023年05月30日　

00:13:03 - 00:14:48

4. Reuse the knowledge - How I take tech notes as a note app author

4. Reuse the knowledge

How I take tech notes as a note app author

2023年05月30日　

00:14:48 - 00:15:02

Refer to code snippets - How I take tech notes as a note app author

Refer to code snippets

How I take tech notes as a note app author

2023年05月30日　

00:15:02 - 00:15:35

Learn from previous solutions to common errors - How I take tech notes as a note app author

Learn from previous solutions to common errors

How I take tech notes as a note app author

2023年05月30日　

00:15:35 - 00:16:07

Share what you learned - How I take tech notes as a note app author

Share what you learned

How I take tech notes as a note app author

2023年05月30日　

00:16:07 - 00:16:49

Wrap up - How I take tech notes as a note app author

Wrap up

How I take tech notes as a note app author

2023年05月30日　

00:16:49 - 00:17:28

Intro - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Intro

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:00:00 - 00:01:02

Project description - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Project description

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:01:02 - 00:04:18

thanks for beautifully organized video. What is the name of “speech balloon” tool in the Projection description part? - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

thanks for beautifully organized video. What is the name of “speech balloon” tool in the Projection description part?

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　 Yuki Okabe 様　

00:01:03 - 01:12:31

Create a new Next.js project with Stitches - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Create a new Next.js project with Stitches

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:04:18 - 00:07:23

Prepare using OpenAl - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Prepare using OpenAl

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:07:23 - 00:08:38

Learn how to write Python with ChatGPT - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Learn how to write Python with ChatGPT

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:08:38 - 00:11:49

Transcribe the audio with the transcription API - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Transcribe the audio with the transcription API

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:11:49 - 00:14:46

you mean prompt right? - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

you mean prompt right?

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　 Aung Zan Baw 様　

00:13:24 - 01:12:31

Try invoking the completion API - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Try invoking the completion API

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:14:46 - 00:17:35

Get input data from stdin - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Get input data from stdin

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:17:35 - 00:19:26

Load and parse SRT data - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Load and parse SRT data

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:19:26 - 00:21:36

Translate each subtitle - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Translate each subtitle

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:21:36 - 00:24:00

Check out Radix UI and Stitches - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Check out Radix UI and Stitches

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:24:00 - 00:25:26

Prepare building the UI - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Prepare building the UI

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:25:26 - 00:26:29

Create a form to specify a video URL - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Create a form to specify a video URL

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:26:29 - 00:31:22

Implement event handling - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Implement event handling

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:31:22 - 00:33:13

Create a component to render the command outputs - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Create a component to render the command outputs

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:33:13 - 00:36:40

Add tabs - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Add tabs

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:36:40 - 00:42:02

Add an API routing - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Add an API routing

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:42:02 - 00:42:47

Implement an audio download API - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Implement an audio download API

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:42:47 - 00:48:09

Implement a transcription API - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Implement a transcription API

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:48:09 - 00:50:17

Excellent video! In (transcribe.py:13) there is a typo "primpt", I think that's why he keeps getting his name wrong. If you already corrected it at some point in the video and I let it go, please ignore it. ;) - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Excellent video! In (transcribe.py:13) there is a typo "primpt", I think that's why he keeps getting his name wrong. If you already corrected it at some point in the video and I let it go, please ignore it. ;)

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　 Ice Livin 様　

00:50:06 - 01:12:31

Implement a translation API - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Implement a translation API

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:50:17 - 00:53:22

Connect the components with states - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Connect the components with states

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:53:22 - 00:55:42

Extract a video ID from the YouTube URL - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Extract a video ID from the YouTube URL

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:55:42 - 00:57:39

Progressively update the output by a callback function - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Progressively update the output by a callback function

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

00:57:39 - 01:00:12

Fix scroll overflow issue - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Fix scroll overflow issue

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

01:00:12 - 01:00:55

Invoke the audio download API - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Invoke the audio download API

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

01:00:55 - 01:04:50

Invoke the transcription API - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Invoke the transcription API

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

01:04:50 - 01:07:28

Fix the transcription prompt not working - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Fix the transcription prompt not working

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

01:07:28 - 01:07:51

Invoke the translation API - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Invoke the translation API

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

01:07:51 - 01:10:42

Finish it up - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Finish it up

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

01:10:42 - 01:10:56

Demo - Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

Demo

Boost your skills with ChatGPT: Creating a transcription and translation tool using OpenAI

2023年04月10日　

01:10:56 - 01:12:31

Furna - Lotus - [playlist] Melodies for coding | Focus & Chill

Furna - Lotus

[playlist] Melodies for coding | Focus & Chill

2023年03月24日　

00:00:00 - 00:04:02

Drawing - LUCHS - [playlist] Melodies for coding | Focus & Chill

Drawing - LUCHS

[playlist] Melodies for coding | Focus & Chill

2023年03月24日　

00:04:02 - 00:06:22

And Lucie Dreams - Lotus - [playlist] Melodies for coding | Focus & Chill

And Lucie Dreams - Lotus

[playlist] Melodies for coding | Focus & Chill

2023年03月24日　

00:06:22 - 00:09:57

Mint Conditions - Dusty Decks - [playlist] Melodies for coding | Focus & Chill

Mint Conditions - Dusty Decks

[playlist] Melodies for coding | Focus & Chill

2023年03月24日　

00:09:57 - 00:12:08

Cousin Stratus - Lotus - [playlist] Melodies for coding | Focus & Chill

Cousin Stratus - Lotus

[playlist] Melodies for coding | Focus & Chill

2023年03月24日　

00:12:08 - 00:15:13

Tiny Room Bop - [ocean jams] - [playlist] Melodies for coding | Focus & Chill

Tiny Room Bop - [ocean jams]

[playlist] Melodies for coding | Focus & Chill

2023年03月24日　

00:15:13 - 00:17:33

Parallax - Luwaks - [playlist] Melodies for coding | Focus & Chill

Parallax - Luwaks

[playlist] Melodies for coding | Focus & Chill

2023年03月24日　

00:17:33 - 00:20:39

Lisbon - Shiruky - [playlist] Melodies for coding | Focus & Chill

Lisbon - Shiruky

[playlist] Melodies for coding | Focus & Chill

2023年03月24日　

00:20:39 - 00:23:39

I'll Follow - Mochas - [playlist] Melodies for coding | Focus & Chill

I'll Follow - Mochas

[playlist] Melodies for coding | Focus & Chill

2023年03月24日　

00:23:39 - 00:26:12

Lupi - Sayuri Hayashi Egnell - [playlist] Melodies for coding | Focus & Chill

Lupi - Sayuri Hayashi Egnell

[playlist] Melodies for coding | Focus & Chill

2023年03月24日　

00:26:12 - 00:28:17

Tau - Osoku - [playlist] Melodies for coding | Focus & Chill

Tau - Osoku

[playlist] Melodies for coding | Focus & Chill

2023年03月24日　

00:28:17 - 00:31:12

Have a productive day - [playlist] Melodies for coding | Focus & Chill

Have a productive day

[playlist] Melodies for coding | Focus & Chill

2023年03月24日　

00:31:12 - 00:31:23

Hello - How to create Ghibli-style trees with three.js

Hello

How to create Ghibli-style trees with three.js

2023年02月16日　

00:00:00 - 00:00:44

Unboxing a new MacBook Pro - How to create Ghibli-style trees with three.js

Unboxing a new MacBook Pro

How to create Ghibli-style trees with three.js

2023年02月16日　

00:00:44 - 00:01:54

where I can get this laptop stand? it looks cool - How to create Ghibli-style trees with three.js

where I can get this laptop stand? it looks cool

How to create Ghibli-style trees with three.js

2023年02月16日　 Gabriel 様　

00:01:40 - 00:47:52

Heading to Osaka Castle Park - How to create Ghibli-style trees with three.js

Heading to Osaka Castle Park

How to create Ghibli-style trees with three.js

2023年02月16日　

00:01:54 - 00:04:00

Create a new React project - How to create Ghibli-style trees with three.js

Create a new React project

How to create Ghibli-style trees with three.js

2023年02月16日　

00:04:00 - 00:05:12

@ no one likes the default macbook keyboard man - How to create Ghibli-style trees with three.js

@ no one likes the default macbook keyboard man

How to create Ghibli-style trees with three.js

2023年02月16日　 Jagic Yooo 様　

00:04:10 - 00:47:52

Install libraries - How to create Ghibli-style trees with three.js

Install libraries

How to create Ghibli-style trees with three.js

2023年02月16日　

00:05:12 - 00:05:31

Make the page background transparent - How to create Ghibli-style trees with three.js

Make the page background transparent

How to create Ghibli-style trees with three.js

2023年02月16日　

00:05:31 - 00:06:32

Remove the template content - How to create Ghibli-style trees with three.js

Remove the template content

How to create Ghibli-style trees with three.js

2023年02月16日　

00:06:32 - 00:06:53

Integrate React Three Fiber into the project - How to create Ghibli-style trees with three.js

Integrate React Three Fiber into the project

How to create Ghibli-style trees with three.js

2023年02月16日　

00:06:53 - 00:08:49

Add a simple scene - How to create Ghibli-style trees with three.js

Add a simple scene

How to create Ghibli-style trees with three.js

2023年02月16日　

00:08:49 - 00:14:33

Add a ground plane for shadows - How to create Ghibli-style trees with three.js

Add a ground plane for shadows

How to create Ghibli-style trees with three.js

2023年02月16日　

00:14:33 - 00:17:19

Import a tree model - How to create Ghibli-style trees with three.js

Import a tree model

How to create Ghibli-style trees with three.js

2023年02月16日　

00:17:19 - 00:18:28

Add the tree model to the scene - How to create Ghibli-style trees with three.js

Add the tree model to the scene

How to create Ghibli-style trees with three.js

2023年02月16日　

00:18:28 - 00:19:37

Use Standard Material - How to create Ghibli-style trees with three.js

Use Standard Material

How to create Ghibli-style trees with three.js

2023年02月16日　

00:19:37 - 00:20:50

Use Toon Material - How to create Ghibli-style trees with three.js

Use Toon Material

How to create Ghibli-style trees with three.js

2023年02月16日　

00:20:50 - 00:23:25

Rotate the tree object - How to create Ghibli-style trees with three.js

Rotate the tree object

How to create Ghibli-style trees with three.js

2023年02月16日　

00:23:25 - 00:24:55

Create a simple shader - How to create Ghibli-style trees with three.js

Create a simple shader

How to create Ghibli-style trees with three.js

2023年02月16日　

00:24:55 - 00:28:05

Use a custom toon shader - How to create Ghibli-style trees with three.js

Use a custom toon shader

How to create Ghibli-style trees with three.js

2023年02月16日　

00:28:05 - 00:32:10

Tweak the toon shader - How to create Ghibli-style trees with three.js

Tweak the toon shader

How to create Ghibli-style trees with three.js

2023年02月16日　

00:32:10 - 00:35:11

Start creating a Ghibli shader - How to create Ghibli-style trees with three.js

Start creating a Ghibli shader

How to create Ghibli-style trees with three.js

2023年02月16日　

00:35:11 - 00:40:01

Define variables - How to create Ghibli-style trees with three.js

Define variables

How to create Ghibli-style trees with three.js

2023年02月16日　

00:40:01 - 00:42:12

Calculate brightness - How to create Ghibli-style trees with three.js

Calculate brightness

How to create Ghibli-style trees with three.js

2023年02月16日　

00:42:12 - 00:44:25

Add gradient colors - How to create Ghibli-style trees with three.js

Add gradient colors

How to create Ghibli-style trees with three.js

2023年02月16日　

00:44:25 - 00:44:53

Create another color variation - How to create Ghibli-style trees with three.js

Create another color variation

How to create Ghibli-style trees with three.js

2023年02月16日　

00:44:53 - 00:47:29

Thank you for watching - How to create Ghibli-style trees with three.js

Thank you for watching

How to create Ghibli-style trees with three.js

2023年02月16日　

00:47:29 - 00:47:52

Intro - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Intro

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

00:00:00 - 00:02:34

Add note list header component - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Add note list header component

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

00:02:34 - 00:07:39

Create TextInput restyle component - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Create TextInput restyle component

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

00:07:39 - 00:14:24

Add a TextInput to the header bar - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Add a TextInput to the header bar

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

00:14:24 - 00:20:27

Move the theme picker to the sidebar - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Move the theme picker to the sidebar

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

00:20:27 - 00:25:39

Add a left header bar button that can transform i - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Add a left header bar button that can transform i

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

00:25:39 - 00:37:07

Add a clear button to the header bar - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Add a clear button to the header bar

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

00:37:07 - 00:38:55

Implement the header bar animations - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Implement the header bar animations

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

00:38:55 - 00:43:19

Enable tablet layouts - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Enable tablet layouts

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

00:43:19 - 00:44:29

Add a navbar to the detail screen - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Add a navbar to the detail screen

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

00:44:29 - 00:53:37

Add editor state atom - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Add editor state atom

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

00:53:37 - 00:56:48

Create a note list screen for phones - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Create a note list screen for phones

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

00:56:48 - 01:03:07

Use 'useSetAtom' for better performance - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Use 'useSetAtom' for better performance

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

01:03:07 - 01:03:21

Make the screen responsive - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Make the screen responsive

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

01:03:21 - 01:11:08

Create a note list screen for tablets - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Create a note list screen for tablets

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

01:11:08 - 01:13:47

Create a three-column lavout component - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Create a three-column lavout component

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

01:13:47 - 01:28:12

Memoize props of some components to improve - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Memoize props of some components to improve

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

01:28:12 - 01:29:33

Hide left view in portrait mode - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Hide left view in portrait mode

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

01:29:33 - 01:30:11

Toggle the sidebar - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Toggle the sidebar

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

01:30:11 - 01:31:05

Add the sidebar to the left view - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Add the sidebar to the left view

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

01:31:05 - 01:32:09

Implement detail screens for phones and tablets - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Implement detail screens for phones and tablets

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

01:32:09 - 01:40:02

Update the stack navigator for phones - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Update the stack navigator for phones

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

01:40:02 - 01:40:19

Display note body on the detail screen - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Display note body on the detail screen

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

01:40:19 - 01:44:45

Ending - How to build animated & responsive tablet UIs with React Native (at the lakeside)

Ending

How to build animated & responsive tablet UIs with React Native (at the lakeside)

2022年11月10日　

01:44:45 - 01:45:15

Loading...

コラボ他の人とコラボする

5

5

自動再生読上