Three.js

このタグでブログを書く

言葉の解説

ネットで話題

Three.js

このタグの解説について

この解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。

シンギュラリティ実験ノート•2ヶ月前

Webアプリのアイデアをgemma3に相談した

Web App Labに追加するアプリを考えているがなかなか面白そうなアイデアが浮かばない。自分の頭で考えていても限界がある。LLMに相談するのがいまどきの賢い方法かもしれない。最近導入したgemma3:12bに聞いてみた。 Web App LabというホームページでJavaScriptを使った様々なWebアプリを公開しようと思います。これまでテトリスのゲーム、Boids Simulationプログラム、マンデルブロ集合の探索プログラムを公開しました。他にはどんなアプリが考えられますか？テーマとしてはゲーム、シミュレーション、データ可視化などを扱いたいと思います。面白そうなテーマを考えてくださ…

#Three.js#gemma3

ネットで話題

530ブックマークプログラミング初心者からthree.jsに慣れるまで｜misaki nakano

note.com

357ブックマーク Three.js でトゥーンレンダリング | Cubix DocManagerは複数のリソースの情報を一括で編集出来るモジュールです。パッケージに同梱されているので初期インストール時にチェックを外していなければ最初から使用可能です。入力内容の統一、メニューの並び替えなどが簡単に出来ます。対象になるリソース番号の指定方法使用テンプレートの変更テンプレート変数の内...

chibinowa.net

345ブックマーク JavaScript 3DレンダリングエンジンのThree.jsを試す

kray.jp

343ブックマーク HTML5による物理シミュレーション環境の構築～WebGLライブラリThree.js 入門（１／３）～HTML5とWebGL 初めにHTML5の位置づけについて簡単に触れます。HTML5とはこれまでのWebページ作成言語で主流だったHTML4やXHTMLの後継言語のことで、 2008年に草案がまとめられ、2014年までにウェブブラウザ各社への正式勧告を目指して策定が進められています。 HTML5は 2012年1月でもまだ「草案」段階で、仕様も流動的な...

www.natural-science.or.jp

335ブックマーク初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞

html5experts.jp

333ブックマーク Three.jsの勉強の仕方 - Qiita

qiita.com

307ブックマーク必要なのはJavaScriptの基本的な知識だけ　3Dアニメーション制作をお手軽にする「Three.js」の魅力

logmi.jp

295ブックマーク three.jsで流体シミュレーション(stable fluids) | mofu

mofu-dev.com

294ブックマーク Three.jsで新宿駅構内図を3Dで可視化してみる - Qiita

qiita.com

関連ブログ

虎の穴ラボ技術ブログ•1年前

Three.js + WebXR で平面に画像を AR 表示してみた🌟

こんにちは、虎の穴ラボの後藤です。現実空間の平面を検出し、画像を配置する Web アプリを作成しました！好きな画像を自由に AR 表示できます！ DEMO ※ マーカーが表示された後、画面タップで配置できます URL：https://img2ar-main-public.vercel.app/ ※ Android 14 + Chrome 125 で動くことを確認しています。iOS では恐らく動きません :( リポジトリ：https://github.com/tenugui-taro/img2ar-main__public 解説用リポジトリ：https://github.com/tenugu…

#WebXR#JavaScript#Three.js

ソフトウェア開発者のための OSS、まとめてみました！•1年前

ゲームの「原神」の世界を xviewer.js（three.js パッケージ）で再現！「www-genshin」

概要原神というゲームをご存じでしょうか？ genshin.hoyoverse.com おそらくどこかで 1 度は聞いたことがあるかもしれませんが、中国のソーシャルゲーム会社 miHoYo が開発し 2020 年 9 月にリリースした基本プレイ無料のオープンワールド RPG になります。オープンワールド RPG が人気を博し、リリースされて 1 カ月で売り上げが約 270 億円となり、世界中で注目を集めたゲームです。そんなゲーム画面を、TypeScript で表現した OSS があり、その出来栄えの良さが素晴らしいので、今回はその OSS をご紹介したいと思います。今回ご紹介する OSS…

#OSS#原神#www-genshin#xviewer.js#Node.js#TypeScript#React.js#Vite

KENTEM TechBlog•1年前

Three.jsを勉強し始めた話

こんにちは。KENTEM第１開発部のM.Oです。私は3D関連のデスクトップアプリチームのマネージャをしています。さて本日は、私が最近KENTEMの目標制度を利用して勉強し始めた、Three.jsについて書いてみます。なお、本記事は非常に初歩的な内容となっています。 Three.jsとは？キューブを描画してみる Node.jsのインストールプロジェクトフォルダーの作成 Three.jsのインストール HTMLファイルの作成 JavaScriptファイルの作成 Vite（フロントエンド開発ツール）のインストールローカル開発サーバーの起動と動作確認おわりに Three.jsとは？ th…

#3D#学習#Three.js

ダークサイドにようこそ!•2年前

【Three.js】iOS の Safari にてスクロール時にアドレスバーの有無で背景の描画が上下してしまう問題に対応する

自分はWebポートフォリオの背景にThree.js で点群ビジュアルを描画しているのですが、これはウィンドウのresizeイベントが呼ばれるたびにレンダラーのサイズ変更や3D空間におけるカメラのアスペクト比を調整するようになっています（ICS MEDIA の記事も参照）。ただiOS のSafari でスクロールしていると唐突にアドレスバーが出たり消えたりすることがあって、その度に背景がリサイズ処理され描画内容が上下にカクっとずれてしまうのです（特にページの最下部到達時に起きることが多い）。これが地味にウザいです。そもそもこれがズレの原因と気付くまで時間かかりました。アドレスバーが出てない（縮…

#HTML#CSS#JavaScript#Three.js#Web開発

SMV’s diary•2年前

Three.js 基本

https://threejs.org/ ■開発環境 viteを利用 https://ja.vitejs.dev/ yarn create vite ■three.jsの基本コードらしい。githubから。 https://github.com/mrdoob/three.js ■基本のコード import * as THREE from "three" import { Light } from "three"; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; //グローバルに宣言する let sc…

#Three.js

株式会社シベスピ　従業員ブログ•2年前

【Three.js】Webページで3Dモデルを表示してみた

気になるホームページがありましたこんにちは。最近見かけた「CHILL OUT」という飲み物のホームページで、飲み物の缶がふわふわ動いていたので、どうやっているのだろうと気になって基本的な部分だけ実践してみました。 https://butfirstchillout.com/ WebGL (Web Graphics Library) このような技術は「WebGL」と呼ばれます。 Webブラウザで2D/3Dグラフィックスを表示することができるJavaScript APIです。 Three.js WebGLを実現するためのJavaScript ライブラリに「Three.js」というものがあります。…

#JavaScript#WebGL#Three.js

spacelyのブログ•2年前

3DのWebサービス開発で宣言的なWebGLライブラリを導入して感じた保守運用上のメリット

1 はじめにスペースリーでエンジニアをしている長谷川です。最近は3DのWebアプリの開発を担当していて、弊社でリリースしている「パノラマ変換3Dプレイヤー」のコンテンツ作成機能などを開発しています。 3DのWebアプリを開発する際には「React/Vue × WebGL系ライブラリ」という構成が代表的なケースの1つであり、弊社でもその構成を選択しました。ところが、3D Webアプリはサービスの数としては多くないので保守運用まで考慮した設計ノウハウはまだまだ十分に共有されてはおらず、開発を進めるにあたって以下のような懸念点がありました。（詳細は次章）「宣言的なReact/VueのWebア…

#Three.js#react-three-fiber#A-frame#react#Vue3

プログラミングを一から学ぶ一級建築士•2年前

87. 時間の確保の難しさ

昨日は、本社、支店の移動で本社ではモデルハウス計画のプレゼンを行い支店に戻って本日の打ち合わせ準備とあわただしい業務でした。帰宅してからは、引き続き、制作の不具合を検討一度、作りたいアニメーションを小分けして、検証しました。一部改善されましたが、なかなか思い通りの形にならず、引き続き行っていきます。朝活では、その続きを行い、時間が来たのでプロゲートのRuby on Railsを行いました。もう少し、この制作の時間に使い、新しく、実践にて、知識を増やす時間の充実を図れないか、業務改善なども含め、更に時間の有効活用を行いたいと思います。何かを形にする際の苦労はどのジャンル…

#プログラミング初級者#サラリーマン勉強#朝活#早起き#勉強#JavaScript#Three.js#Ruby on Rails#ホームページづくり

Activ8 Tech Blog•2年前

Babylon.jsとreact-babylonjsで3Dモデルを描画してみた

こんにちは、フロントエンドエンジニアの堀江（@nandemo_3_）です。 2023年4月21日にBabylon.jsのバージョン6がリリースされ、界隈では話題になっておりますが、メタバース業界にいるフロントエンドエンジニアとしては、キャッチアップしておきたいと思い、Babylon.jsを触ってみました。また、Babylon.jsをReactアプリケーション上で使えるreact-babylonjsも合わせて紹介します。 www.youtube.com はじめに今回のアジェンダは以下の3つとなります。 Babylon.jsとは Babylon.js Playgroundでチュッパチャップス型…

#Babylon.js#Next.js#Three.js#WebGL#WebGL2#frontend