Plugin pp3Diso : moteur de jeu web pour l'affichage et la gestion d'une map 3D isométrique
Plugin pp3Diso : moteur de jeu web pour l'affichage et la gestion d'une map 3D isométrique Présentation pp3Diso est un plugin jQuery qui permet l'affichage et la gestion d'une carte 2D isométrique (ou 3D isométrique par abus de langage). Ce plugin est distribué gratuitement pour une utilisation personnelle ou commerciale sous licence GPL v3. La seule obligation est l'insertion d'un lien vers www.p
SmallWorld3D
The White Box of 3D Programming About SmallWorld3D is an educational realtime 3DCG library. Entire system including polygon rasterizer is written in short javascript. Download Please download zip or pull from Github Getting Started Step 1: Create framebuffer and rasterizer. framebuffer = new smallworld3d.ImageBuffer(300, 300, true); rasterizer = new smallworld3d.Rasterizer(framebuffer); rasterizer
Procedural Terrain With Minko 2 | Jean-Marc Le Roux
Being able to create procedural geometry is very important in a 3D engine. Minko is special because it offers 2 ways to work with the 3D geometry: The streams API: low level but the fastest solution. You have to create and fill the buffers yourself which becomes rapidly annoying and hard to read. The vertex iterators: a high level dynamic API, slow but very very easy to work with. In this post I w
HTML5による物理シミュレーション環境の構築 ～WebGLライブラリThree.js 入門（２／３）～
本稿では新しいWEBページ用の言語であるHTML5＋WebGLを利用して、 ウェブブラウザ上で、物理シミュレーションの計算と描画をリアルタイムに実行する「物理シミュレータ」の作成までの手順を記述します。 本稿では、物理シミュレータの例として、任意の初期条件に対する２重振り子の時間発展を４次のルンゲクッタ法を計算する「２重振子シミュレータ」を構築します。また、本稿では WebGL を簡単に利用することができるWebGLライブラリとして著名な Three.js を用いています。 物理や工学とは無関係に、初めて Three.js を利用する人がチュートリアルとしても利用できることも意図しております。 パート１では、主に Three.js の使い方について触れました。 パート２では、拘束力のある運動の代表例である単振子を取り上げ、物理演算結果のリアルタイム描画＋物理量の時間発展の様子をグラフ化しま
HTML5による物理シミュレーション環境の構築 ～WebGLライブラリThree.js 入門（１／３）～
HTML5とWebGL 初めにHTML5の位置づけについて簡単に触れます。HTML5とはこれまでのWebページ作成言語で主流だったHTML4やXHTMLの後継言語のことで、 2008年に草案がまとめられ、2014年までにウェブブラウザ各社への正式勧告を目指して策定が進められています。 HTML5は 2012年1月でもまだ「草案」段階で、仕様も流動的な準備段階であるが、開発側からもユーザ側からも非常に注目が集められています。 その大きな理由の一つに挙げられているのが、iPhoneやAndroidなどのスマートフォンの台頭による情報端末の多様化への対応のためです。つまり、様々なWEBコンテンツのクロスプラットフォーム化への重要な貢献が期待されているからです。 というのもスマートフォンの登場までは、Adobe社が提供する FLASH が動画やオーディオなどが組み合わされたマルチメディアコンテンツ
THREE.jsで3D入門してみた - ずっと君のターン
先月Mr.doobに会えたので、せっかくだからTHREE.js使ってなんか作りたくなりました。ただ、3Dはほぼ未経験なのであんまりアグレッシブなものを作ろうとしても挫折必至。何か簡単かつ楽しそうなものないかな・・・と考えてて以前見たこれを思い出しました。 これなら基本平面だし、（ちゃんとやると大変なのかもしれないけど）単にドラッグした部分のZ値を増減するだけなら簡単そう。 ということでやってみたのがこれです。 http://photo-anvil.appspot.com/ マウスドラッグして写真の上に色を塗ると （画像だとわかりにくいけど）色を塗った部分が浮き出します。 EDITモードでLOW-HIGHを一番HIGHにするとわりと変化が分かりやすいです。なかなか楽しいと思うので、お暇な方はぜひ。 3D童貞の自分にもこのくらいなら簡単に実装させてくれるTHREE.js、かなりおすすめ！
Three.js doc
top THREE.PerspectiveCamera File doc/three.js/src/cameras/PerspectiveCamera.js Instance Variables fov aspect near far fullWidth fullHeight x y width height projectionMatrix Superclass THREE.Camera Examples (122) doc/three.js/examples/canvas_geometry_birds.html (source) doc/three.js/examples/canvas_geometry_cube.html (source) doc/three.js/examples/canvas_geometry_earth.html (source) doc/three.js/ex
Amazing 3D Animation with three.js
The hottest topic for client-side developers seems to be animation. Whether it be from CSS transformations, keyframe animations, or animations managed with JavaScript APIs, it seems like each day we come across another demo that shows us how can we've come outside of Flash. The latest shocker comes from the three.js project. The creators of three.js explains the project best: The aim of the projec
A3 | aerotwist.com
Aerotwist.com is the website of Paul Lewis, a British web developer now to be found in Stockholm, Sweden. Hello.A Simple 3D Engine Having used Three.js a lot, and at the suggestion of Bartek Drozdz, I decided to sit down and create a simple 3D engine in JavaScript and WebGL. I have a lot of experience building sites and applications, but I've never built an engine before, nor created anything spec
forked from: 変体 - jsdo.it - Share JavaScript, HTML5 and CSS
forked from: 変体 Vertex3D(lib) Triangle3D(lib) Matrix3D(lib) Light(lib) FlatShader(lib) ExtraDisplayObject3D(lib) // forked from daijimachine's "変体" http://jsdo.it/daijimachine/1_hentai /** * 変体 * * HTML5 Canvasの挙動テスト。 * 即席3Dライブラリを作って、 * Canvasの処理速度、描画速度等々、 * もろもろの挙動を体感してみた。 * * 今回やってみて、Canvasの描画精度が、 * わりと低いという印象を持った。 * * @author Masayuki Daijima (ARCHETYP Inc.) * http://www.daijima.jp/blog/ * http
60個のソースが無料でダウンロードできるFlash 3Dの学習サンプル集 | ClockMaker Blog
当ブログではFlashの3Dに関する記事を数多く書いていますが、この度それらの記事をこの1ページにまとめてみました。系統別にまとめたので、目的とする解説やサンプルが探しやすくなったのではないかと思います。それぞれの記事でソースファイルをダウンロードできますので、学習の理解にお役立てください。 Flashの3Dエンジンで最もメジャーな「Papervision3D」を中心にブログ記事を書いています。 Papervision3D – チュートリアル クリックで再生できます フレームア クションで覚える PV3D チュートリアル Vol.01 フ レームアクションで覚える PV3D チュートリアル Vol.01 (補足) フ レームアクションで覚える PV3D Vol.02 : Primitiveを理解する フ レームアクションで覚える PV3D Vol.03 : Materialを理解する フ
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
GitHub - mrdoob/three.js: JavaScript 3D Library.
import * as THREE from 'three'; const width = window.innerWidth, height = window.innerHeight; // init const camera = new THREE.PerspectiveCamera( 70, width / height, 0.01, 10 ); camera.position.z = 1; const scene = new THREE.Scene(); const geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 ); const material = new THREE.MeshNormalMaterial(); const mesh = new THREE.Mesh( geometry, material ); scene.add
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Password Protection
WebGL procedural terrain [three.js]
CSSで高度な3D表現ができると話題の「Sprite3D.js」で作った凄いデモ
blog.alumican.net » Blog Archive » そろそろWebGLを・・・
Canvas3D & Flickr
Loading...
drawlogic - creative engineering + interactive action!