【無料/DL不要】気軽に3Dグラフィックが作れるWebサービス3選 | DevelopersIO
最近よく見かける3Dグラフィックを試してみたいけどどこから手をつけて良いか分からない方や、興味はあるけど時間やコストをかけずに3Dグラフィックを制作したい方へ、無料で気軽に使えるWebサイトを３つご紹介いたします。 🔽以下のような3Dグラフィックが作れるようになりますので、ぜひ最後までお読みください🔽 Spline（スプライン） https://spline.design/ こちらのサービスはGUIを通じて3Dグラフィックや3Dモーションを無料で制作できます（一部機能は有料です）。 基本操作については、チュートリアル(公式Youtube)が公開されていて、すぐにスキルを身につけることができます。 充実したライブラリやコミュニティがあり、アイデアに迷ったときには参考にすることができます。 このブログのサムネイルもこちらのサービスを利用して作成しました。 有料プランにアップグレードしなくて
three.jsと同様の機能に加え、3DガウススプラッティングもサポートしたオープンソースのJavaScriptライブラリ・「gsplat.js」
gsplat.js gsplat.jsはthree.jsと同様の機能に加え、3DガウススプラッティングもサポートしたオープンソースのJavaScriptライブラリです。基本的には3Dガウススプラッティングライブラリとして提供しているみたいです。 上記は動作サンプルの1つですが、メモリに問題なければ更にリアルな描写のサンプルがHugging Faceにあります。 3Dガウススプラッティングとは何か？については以下をご参照下さい。 https://qiita.com/RyeWiskey/items/9ccc862db91e38e8bbc9qiita.com Ads 流れとしては、gsplat.jsコンポーネントをインポート、.splatファイルを読み込み、レンダリングループ開始、という感じみたいです。 import * as SPLAT from "gsplat"; const scene =
ztext.js | 3D Typography for the Web
Are you using ztext and happy with it? Your kind support keeps open-source JS libraries like this free for others. InitializationThere are multiple ways to use ztext. Pick whichever method is easiest for you. HTML attributesVanilla JavaScriptReact JS NewVue JS New How it worksZtext gives the illusion of volume by creating layers from an HTML element. There's no need to spend hours fiddling with <c
SVGやCanvasで実装した平らな要素を3Dモデルでレンダリングできる超軽量JavaScriptライブラリ -Zdog
面白そうなJavaScriptがリリースされました！ SVGやCanvasで実装した平らな要素をブラウザ上に3Dモデルでレンダリングすることができる超軽量JavaScriptライブラリを紹介します。レンダリングされた形状は3D空間に存在するかのようにクリックやドラッグなどで操作ができます。 Zdog Zdog -GitHub Zdogの特徴 Zdogのデモ Zdogの使い方 Zdogの特徴 Zdogは<canvas>とSVG用の3D JavaScriptエンジンです。 Zdogを使用すると、3DモデルをWeb上でデザインしてレンダリングすることができます。 軽量ライブラリ Zdogは、28KbのJavaScriptです。 滑らかなレンダリング 丸みをおびた美しい形でレンダリングされます、ジャギーはありません。 簡単 モデリングは単純明快な宣言型APIで行われます。 Zdogのデモ Zdog
お手軽360°パノラマ制作入門！ JSでパノラマビューワーを自作しよう - ICS MEDIA
360°の全方向を自由に見渡せるパノラマコンテンツは、GoogleストリートビューのようなWebサービスによって身近なものになってきています。前回の記事「お手軽360°パノラマ制作入門！ THETAで撮影しWeb公開に挑戦しよう」では、360°の静止画・動画が撮影できるカメラ「RICOH THETA S」で撮影したパノラマをYouTubeなどのWebサービスで手軽に公開する方法を紹介しました。 今回は、カスタマイズ性の高いWeb用の360°パノラマビューワーの実装方法を、初心者用と上級者用として2通り紹介します。初心者用のものはHTMLで3Dを作成できるライブラリ「A-Frame」を使い、上級者用としてはJavaScript製の3Dライブラリ「Three.js」を用います。 パノラマ静止画を表示する360°パノラマビューワー 次のデモは、本記事で解説するサンプルの完成形です。360°パノラ
voxel.css
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
二次元から三次元を作る方法 — サーバ内でBlenderを動かしてみたら意外にもイケていたという話 - pixiv inside [archive]
こんにちは、エンジニアのみどです。 ピクシブは、イラスト1枚で簡単にオリジナルグッズが作れるサービス pixivFACTORY を開発しています。 そのpixivFACTORYのプレビューに焦点を絞った勉強会を社内で行いました。 今回は、その勉強会の内容を公開したいと思います。 プレビューとは pixivFACTORYでは、グッズの仕上がりのイメージを確認する機能を提供しています。 この機能は、チーム内でプレビューと呼ばれていて、pixivFACTORYの売りのひとつになっています。 今回の勉強会では、ピクシブのエンジニアがこのプレビューに関する技術やノウハウについて発表を行いました。 pixivFACTORYのプレビューを支える技術 まず、私がアプリケーションサーバ側の処理について発表しました。 ImageMagickやBlenderといったソフトウェアをどのように使い分けているかが見所
![二次元から三次元を作る方法 — サーバ内でBlenderを動かしてみたら意外にもイケていたという話 - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/c01c6645554c7603a1d377f33f0b20f7b90482f0/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F5f602570d6d440e71f2bc42a0cde8d2078e2ffd6%2Fbackend%3Dimagemagick%3Bheight%3D1300%3Bversion%3D1%3Bwidth%3D1300%2Fhttp%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fd%252Fdevpixiv%252F20150924%252F20150924161502.png)
slashie.org - slashie Patrik Goethe Patrik Göthe developer designer engineer startup startups リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
ImplicitCad.org
/* This creates a twisted extrusion of 5 unioned circles * with gratuitous amounts of rounding. Try it out! */ linear_extrude (height = 40, twist(h) = 35*cos(h*2*pi/60)) union ( r = 8) { circle (10); translate ([22,0]) circle (10); translate ([0,22]) circle (10); translate ([-22,0]) circle (10); translate ([0,-22]) circle (10); } Try out this code! With the explosion of 3D printing, designing 3D o
VOXEL ARTICLE - voxel
Are you looking for a fun and exciting way to spend your time online? Look no further than online slots! With their colorful graphics, engaging sound effects, and endless opportunities to win big, online slots are a popular choice for both seasoned gamblers and newcomers alike. Online slots are not…
円周上及び球体表面のある一点の座標を求める
ちょっと思いついた事をやる為に円周上/球体表面の座標を求める必要が出てきたので調べながらプログラムを書いてみた。 どちらも中心点は Vector3(0, 0, 0) としています。 座標を求め方は 極座標系 - Wikipedia にある公式をそのままプログラムにしています。 円周上のある一点を求める あるオブジェクトを円状に配置する為に角度と半径から円周上のある位置を求めるメソッドを書いてみた。 public Vector3 GetPosition(float angle, float radius) { float x = Mathf.Cos(angle * Mathf.Deg2Rad) * radius; float y = Mathf.Sin(angle * Mathf.Deg2Rad) * radius; return new Vector3 (x, y, 0); } 三角関数を
オートデスクが無償提供している「Autodesk Character Generator」を使ってみる。データはUnityから驚くほど簡単に利用可能
オートデスクが無償提供している「Autodesk Character Generator」を使ってみる。データはUnityから驚くほど簡単に利用可能 編集部：aueki 先日お伝えしたように，オートデスクはWeb上で3Dキャラクターを作成できるサービス「Autodesk Character Generator」（以下，Character Generator）を開始した。 これは，あらかじめ用意された3Dキャラクターをブレンドして新しいキャラクターを作れるというシステムで，顔や身体の個別パーツごとに2つのモデリングデータとブレンド比率を指定することができる。クラウド上で動いているので，応答性が悪いのは仕方ない面もあるのだが，Webブラウザさえ動けばPCでなくても作業ができるのが特徴となっている。なにはともあれ，キャラクターエディタということで，さっそく触ってみた。 Character Gen
Caption Hover Effects | Codrops
A tutorial on how to create some subtle and modern caption hover effects. Today we want to show you how to create some simple, yet stylish hover effects for image captions. The idea is to have a grid of figures and apply a hover effect to the items which will reveal a caption with the title, author and a link button. For some of the effects we will use 3D transforms. The aim is to keep the effects
[CSS]コンテンツを水平・垂直にぐぐぐっと傾けてナビゲーションを表示するスタイルシート
最近ちらほら見かける、コンテンツをアニメーションでぐぐぐっと傾けて、ナビゲーションを配置したサイドバーやヘッダを表示するスタイルシートを紹介します。 実装 Step 1: HTML パースペクティブで表示するコンテンツをdivなどのラッパーを使って配置します。 <div class="wrapper"> <div class="menu"> <div class="hover-icon"> <i class="icon-align-justify"></i> </div> <ul> <li class="category"><a href="#">HOME</a></li> <li class="category"><a href="#">SEARCH</a></li> <li class="category"><a href="#">ABOUT US</a></li> <li class
WebGL無しiOSでも簡単軽快3D。three.jsとCSS3DRendererでDOMを3D化
Warning: preg_replace(): Compilation failed: invalid range in character class at offset 4 in /home/koj/www/sites/0017_tettori.net/wp-content/plugins/crayon-syntax-highlighter/crayon_langs.class.php on line 340 Warning: preg_replace(): Compilation failed: invalid range in character class at offset 4 in /home/koj/www/sites/0017_tettori.net/wp-content/plugins/crayon-syntax-highlighter/crayon_langs.cl
『スマートフォンで動くリアルタイム3Dグラフィック』
はじめまして。 アメーバ事業本部コア室コアディベロップメントグループの新屋です。 コア室では3Dアニメーションライブラリの開発を行っています。 リアルタイム・プリレンダ問わず3Dモーショングラフィックが好きで趣味でも3Dの制作をしています。プリレンダはTAKCOMさん、WOWのdaihei shibataさん、ogaoooooさん、リアルタイムはMasato Tsutsuiさん等の作品が好きです。 リアルタイム3D 昨今のスマートフォンの処理能力の向上に伴い、webブラウザでも一昔前にPCで動作していたようなリッチなコンテンツも高速に処理できるようになりました。 スマホサービスでは必ずと言っていい程CSSやjavascriptでのUI・演出アニメーションが組込まれています。 そうしたアニメーションの表現力を引き上げる方法の一つとしてリアルタイム3Dを紹介します。 リアルタイム3Dを扱う言語
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Phototiler
GitHub - lettier/3d-game-shaders-for-beginners: 🎮 A step-by-step guide to implementing SSAO, depth of field, lighting, normal mapping, and more for your 3D game.
[CSS]画像をかっこよく表示し、操作が気持ちいいインタラクションを楽しめる -Fluid twisting image 3D
Tridiv | CSS 3D Editor