Hatena Blog Tags
はてなブログ トップ
Three.js
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

Three.js

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

Vibe Codingによるジェネレーティブアートの試み #PERSOL CAREER Advent Calendar2025

パーソルキャリアでデザイナーをしている比企です。 2025年の個人の取り組みとして、Vibe Coding（バイブコーディング）によるジェネレーティブアートを試作しました。AIとの新しい共創体験をシェアします。 ジェネレーティブアートは、「幾何学や比例、物理法則などの 数理的秩序を起点としてルールやアルゴリズムを設計し、変動や偶発性を内包した生成プロセスを通じて作品を生み出す表現」です。近年では、生成手法の一つとしてVibe Codingがあります。Vibe Codingは、完成形ではなく生成条件を与える点においてジェネレーティブアートの思想と共通しています。また、Vibe Codingは、生…

#パーソルキャリア#techtekt#デザイナー#バイブコーディング#Vibe Coding#ジェネレーティブアート#GenerativeArt#Three.js#ドローイング　落書き#アドベントカレンダー

ネットで話題

もっと見る
532ブックマークプログラミング初心者からthree.jsに慣れるまで｜misaki nakanonote.com
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
336ブックマーク初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞html5experts.jp
335ブックマークThree.jsの勉強の仕方 - Qiitaqiita.com
311ブックマークThree.js でトゥーンレンダリング | CubixDocManagerは複数のリソースの情報を一括で編集出来るモジュールです。パッケージに同梱されているので初期インストール時にチェックを外していなければ最初から使用可能です。入力内容の統一、メニューの並び替えなどが簡単に出来ます。 対象になるリソース番号の指定方法 使用テンプレートの変更 テンプレート変数の内...chibinowa.net
306ブックマーク必要なのはJavaScriptの基本的な知識だけ　3Dアニメーション制作をお手軽にする「Three.js」の魅力 | ログミーBusinesslogmi.jp
293ブックマークthree.jsで流体シミュレーション(stable fluids) | mofumofu-dev.com
293ブックマーク最新版で学ぶwebpack 4入門 - BabelでES2017環境の構築(React, Three.js, jQueryのサンプル付き) - ICS MEDIAics.media

関連ブログ

AKARI Tech Blog•3ヶ月前

GASとThree.jsで社内の会議室の利用状況を3Dリアルタイム可視化してみた

こんにちは！今週のAKARI Tech Blogは、DX Solution事業部の田川が担当します！ 燈では会議室の予約にGoogleカレンダーを利用しています。 とても便利ですが、「今空いてる会議室はどこだろう？」と複数のカレンダーを見比べるのは少し手間がかかりますよね。 そこで、GAS（Google Apps Script）を利用して、会議室のリアルタイム利用状況を3Dで可視化するWebアプリケーションを作成してみました。 会議室可視化アプリの完成画面(Nameの部分にはGoogleアカウントのアイコンが入ります) 本記事では、このアプリを題材に、GASでGoogleカレンダーの情報を取得…

#GAS (Google Apps Script)#Three.js#社内DX#社内DX化
TECHSCORE BLOG•6ヶ月前

そんな時どうする Three.js アプリ開発

[English article] こんにちは、以前は広告エンジニア、現在はデータプラットフォームエンジニアの中山です。この記事では趣味の Three.js アプリ開発を通じて得た気付き、例えば Three.js 初心者が陥りそうなトラブルやブラウザ互換問題、それらの解決方法についてご紹介させていただきます。なお、以前シナジーマーケティングでご一緒させて頂いたこともあり、TECHSCORE BLOG への記事掲載についてご快諾いただきました ^^ どうもありがとうございます。 最初に Three.js アプリをご紹介します。 新コンセプトのリバーシ リバーシに Three.js 必要？と突っ込…

#game#アプリ作成
DDDDbox Tech Blog•8ヶ月前

カメラ設定の基本ガイド：Three.jsとReact Three Fiber

こんにちは、株式会社AMDlabのDDDDbox事業部で日々開発を行っている鈴木です。 弊社では3D表現の技術として、Three.jsおよびreact-three-fiberを使用することが多いのですが、最近カメラの設定周りでひっかかったところがあったため、特にOrthographic Cameraについてまとめ直してみました。 Perspective Camera Orthographic Camera 比較 Three.jsのOrthographic Camera react-three-fiber/dreiのOrthographicCamera OrthographicCameraの比較…

#WEBBIM#エンジニアリング#Three.js#react-three-fiber
シンギュラリティ実験ノート•10ヶ月前

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

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

#Three.js#gemma3
虎の穴ラボ技術ブログ•2年前

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、まとめてみました！•2年前

ゲームの「原神」の世界を 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•2年前

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