このサイトは、3Dライブラリ「Three.js」の入門サイトです。Three.jsはWebGLとWebGPUの両方に対応していますが、このサイトでは次世代のWebGPU版（three/webgpu）を中心に解説します。 初学者から学べるように基本から解説しつつ、発展的な内容までまとめています。このサイトを通して、ウェブの3Dのインタラクションデザインについて学んでいきましょう。 Three.js概要 Three.jsは、HTML5で3Dコンテンツを制作するためのJavaScriptライブラリです。Mr.doob氏が中心となって開発されており、オープンソースソフトウェアとして個人・商用でも無償で利用できます。 WebGPUやWebGLを素のAPIだけで3D表現しようとすると、立方体1つ表示するだけでも多くのJavaScriptやWGSL / GLSLコードが必要です。Three.jsを使えば
What does this mean for you? The ability to download assets was disabled on June 30, 2021. The ability to upload new 3D models on poly.google.com was disabled on April 30, 2021. We want to thank you for joining us on this journey. We appreciate you trusting us to host your assets and provide a space where they can shine. The amazing work that our users have uploaded to Poly every day has surprised
Web Graphics Creation Platform Open source engine and tools for building amazing 3D experiences May 14, 2026 New in SuperSplat: Software Attribution, Collision Generation and GPU-Powered Histogram Last month we shipped Downloadable Splats, Licenses and Social Links — giving creators more control over how their work is shared and... Apr 22, 2026 Turning a Gaussian Splat Into a Videogame How I turne
HTMLタグで本格VRコンテンツが作れる！ Mozillaが開発した3DライブラリA-Frame WebXRフレームワークの「A-Frame」を使えば、JavaScriptを記述することなく、HTMLにタグを追加するだけでVRコンテンツが作成できます。 次のデモはA-Frameを用いてt作成したオリジナルのVRデモです。中央の円状のカーソルを牛の3Dモデルに重ねることでアニメーションします。 ※パソコンではドラッグ、スマートフォンではジャイロセンサーが検知した傾きで視点が変わります。右下のアイコンをクリックすると、HMDで閲覧できるモードへ切り替わります。 サンプルを別ウィンドウで開く HTMLをマークアップするようにVRコンテンツを作成しよう VRコンテンツをHTMLのマークアップのように作成するには、JavaScriptライブラリ「A-Frameエー・フレーム」を使用します。「やっぱり
ウェブコンテンツで3Dを扱える技術としてWebGLがあります。WebGLを利用すればブラウザ上で華やかな表現を実現できます。しかし、コンテンツの内容によっては処理負荷が高くなり、カクつきが生じる場合があります。カクつきはコンテンツの見栄えを損なわせ、作り手の想定とは異なる体験を与えてしまう可能性があります。そのような場合の対策として、本記事ではWebGLのカクつき解消方法をいくつか紹介します。 解説用にカクつきの起こりやすい高負荷なデモを用意しました。本記事で紹介するカクつき解消方法はこのデモで実際に体験できるので、読み進めながら同時に触れておくとイメージがしやすいと思います。 デモを別ウインドウで再生する ソースコードを確認する ※このデモはThree.js(r182)とTypeScript 5.9とViteで作成しました。開発環境の構築は記事「最新版TypeScript+Webpack
"use strict"; //イベントの振り分け var EVENT = {}; if ('ontouchstart' in window) { EVENT.TOUCH_START = 'touchstart'; EVENT.TOUCH_MOVE = 'touchmove'; EVENT.TOUCH_END = 'touchend'; } else { EVENT.TOUCH_START = 'mousedown'; EVENT.TOUCH_MOVE = 'mousemove'; EVENT.TOUCH_END = 'mouseup'; } (function () { var camera, scene, renderer; var cube, sphere, torus, material; var count = 0, cubeCamera1, cubeCamera2; var f
フォトビジネスを支える3つの力 「思い出をカタチにする」仕事に携わるみなさまに最も信頼される存在になることで、社会への貢献を果たします。 トップメッセージ＆ミッション ラボネットワークの ものづくり 写真館、フォトグラファーなど、撮影ビジネスに関わる様々な方々の要望や時代のトレンドに合わせて開発した数々の商品をご覧いただけます。 ラボネットワークのものづくり ショールームのご案内 関東・関西・九州の各拠点に弊社製品を常設したショールームを設置しております。製品を実際に手にとってお確かめいただけます。 ショールーム 企業情報ご案内 会社概要、トップメッセージ＆ミッション、沿革、事業所一覧、グループ・関連会社など、企業に関する情報をご覧いただけます。 企業情報
昨今のWebサイトでは3D表現を利用した3Dコンテンツをしばしば見かけるようになってきました。WebGLに対応した端末が普及してきていることや、Three.jsなどのライブラリが充実していることもあり、実案件での採用が現実的になってきているからです。 しかし、いざ3Dコンテンツを作ってみると、どこか味気のないものになってしまう事があります。そんな時はエフェクトの追加をオススメです。エフェクトを追加することで、コンテンツの見栄えが派手になったり、キャラやゲームの状態が伝わりやすくなります。今回エフェクトの例として、RPGのセーブポイントや回復ポイントで使用されそうなデモを制作してみました。 デモを別ウインドウで再生する ソースコードを見る ※このデモはThree.js r175（WebGPU）とTypeScript 5.8によって書かれています。 本記事では、セーブポイント風なエフェクトの作
var scene = new voxelcss.Scene(); scene.rotate(-Math.PI / 8, Math.PI / 4, 0); scene.attach(document.body); var world = new voxelcss.World(scene); var editor = new voxelcss.Editor(world); editor.enableAutoSave(); if (editor.isSaved()) { editor.load(); } else { editor.add(new voxelcss.Voxel(0, 0, 0, 100, { mesh: voxelcss.Meshes.grass })); } View in JSFiddle var voxel = new voxelcss.Voxel(0, 0, 0, 10
3Dコンテンツの制作において「三角関数は必須」とよく聞きます。ウェブサイト制作で三角関数を使う場面はほとんどありませんが、WebGPU・WebGLの勉強をすすめると3Dでは三角関数を使う場面が多いことに気づきます。本記事では3Dコンテンツ制作で使用頻度が多い基本的な数式と概念をまとめました。 今回解説する内容は地味ですが、ゲームやデータビジュアライゼーションを作る上でこの数式が基本となってきます。高校数学で学んだことをベースに、3つのサンプルを通して学習できるようまとめましたので、ぜひ最後までお付き合いください。WebGPU・WebGLの人気ライブラリの1つ「Three.js」を使って解説しています。 三角関数を使ったデモの紹介 まずは、本題に入る前に三角関数を使ったデモを作成したので紹介します。次のリンクをクリックしてご覧ください。 デモを別ウインドウで再生する ソースコードを確認する
このページの内容はBlender 2.69（2013年10月リリース）を基本にしています。若干内容が古いです。 Blenderはオープンソースの3DCGソフトウェアです。モデリング・レンダリング・アニメーション一通りをこの１本でこなすことができ、高価な市販ソフトにも負けない機能を持っています。デモリールの動画を見ると実力のほどがうかがえると思います（もちろん、自分でこうしたCGが作れるかどうかは別問題ですが……）。 最近ではゲームエンジンUnityでゲーム制作をするときに連携するソフトとしてもしばしば名前が挙がっています。 Blender 2.5では大がかりなリニューアルが行われ、見た目にもかっこよくなりました。今勢いのあるフリーソフトのひとつです。 ただ、このソフト、控えめに言ってもとっつきにくいところがあります。とっつきにくいどころか、UIが変態だという声が多数あります（笑）。そこで、
2018年にOculus Go（オキュラス・ゴー）が発売されました。Oculus Goはパソコンやスマートフォンを必要とせず、単体でVR（バーチャルリアリティ、仮想現実）が楽しめるスタンドアロン型VR HMD（ヘッドマウントディスプレイ）として登場しました。価格も当時は23,800円からと比較的安価で、日本でも購入者が増え、これまでと比べ一気にVR環境が広がるきっかけとなりました。 その後継として登場したのが、より高度なVR体験が可能になり現在も進化を続ける「Meta Quest」シリーズ（旧Oculus Quest）です。2025年現在、VRはエンタメや教育、ビジネスなど多分野で広く活用されています。 VR環境の普及に伴い、ウェブコンテンツにおいてもVR対応へのニーズが増えています。ウェブブラウザにはWebXR Device APIが策定されており、これを使用することでブラウザでもVR体
The team at WebGLStudio have been working with not on GamStop sites to help you find the best offers - no KYC or ID required. 3D Development environment for the web. WebGLStudio (formerly known as WebGLStudio) is a platform to create interactive 3D scenes directly from the browser. It allows to edit the scene visually, code your behaviours, edit the shaders, and all directly from within the app -
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
