ADOSOM
ABOUT ME

Three.jsの勉強をはじめました

2022-10-04

wordpressのコメントも実装できたので、一旦wordpressの研究はストップし、
以前ブログでやりたい事をまとめましたが、その中で無理じゃないかと書いていたWebGLを少しづつでいいから作っていこうと決め、勉強をはじめました。

検索するとWebGLにはThree.jsを使うのがおすすめと出てきたので、Three.jsの勉強をしようと思いました。

でもそのためにはjsをちゃんと知らなければいけないのですが、私のせっかちな性格的にコードの基礎を最初から一つ一つ覚えるのが苦手でして、先に参考サイトからコードを持ってきて、その後コードを色々いじりながらこれは何なのかとか、どういう意味なのか。と調べるやり方をしています。(だからぐちゃぐちゃなのかもしれない…そしてjsはそれではダメなのかもしれない..)

Three.jsサイトにはThree.jsを実際使ってるサイトがたくさん載っていて見ていて面白いです。

そんなわけで今日、終業後から勉強をはじめたのですが、ほんっとーーーに難しい。。とりあえず形にはなったページがこちらです。。この動きだけでやっとでした。。↓

https://adosom.com/webgl/

※文字の後ろにあるパーツがthree.jsで作ったパーツです。マウスを動かすとちょっとだけ動きます。完全に背景の動画でごまかしています。あとスマホで見ると重いですね….(追記:パーツをこのブログのメインビジュアルに入れてみました)

参考というか、まるっとコードを持ってきていじらせて頂いたページはこちらです。
https://b-risk.jp/blog/2021/12/three-js-arrange/
(とってもわかりやすかった!)

丸とか四角とかを作るまではとりあえず出来た。

仕組みはなんとなく、、本当になんとなくわかったけど、難しい。。。世に出てる3Dを使用したサイトってどうなってんだろう。。未知すぎる。

未知すぎてデザイン案も思い浮かばない。。

自分のやりたいものが作れるのはまだまだ先だなと..できるところまで頑張ってみます。

ここに書かないと心が折れて諦めそうなので、引き続きこのブログで経過を書いていきたいなと思っています。あとなんでこの勉強を始めたのかもどこかで書ければなと。

頑張る。

サムネイル用に、作ったページのキャプチャ撮ったらなんだか素敵な画像になった。

最近、仕事終わってお酒ちびちび飲みながらコードをいじる時間がとても好きになっている自分がいます。

この記事を書いてる人

moco

かれこれwebデザイナーを12年ほどやっています。デザイン以外にも色々とやっています。ただのアニオタです。やりたい事や興味のある事、好きな事をこのブログで配信。思いつくまま書いてます。

コメントを見る(1 件)

1 件の投稿

コメントを残す

トップページへ

関連記事