ブラウザで3DCG!! Three.jsを使ってWebGL | HTML5GOGO
OpenGL のウェブブラウザ版 WebGLの登場によって、ブラウザ上で精密な3DCGを描画できるようになりました。 GoogleマップがWebGLに対応して、プラグインなしで3D表示が可能になったり、美しい3DCGを駆使したゲームが数多く登場したりと、WebGLを使用したものが続々と誕生しています。 今回は、そんな見た目において非常に強力なAPIのWebGLに少し触れてみましたので、ご紹介させて頂きます。 サンプル概要 3DCGのスロットです。 手前のボタンをクリックすると、同色のリールが止まります。 右端のボタンを押すと、リールとボタンがリセットされます。 ※対応ブラウザ：Chrome 最新 ※動作にはCPUパワーが少々必要になります。 ※サンプルコードは紹介用に編集してありますので、 動作しているコードと異なる部分があります。 サンプルアプリ WebGLについて WebGLは、Win
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
Three.jsでJSON形式でモデルを読み込んでBoneアニメーションさせるときの注意点 - Qiita
ちょっと（だいぶ？）ハマったのでメモ。 いやー、Three.jsはupdateが激しいのと、そもそも日本語記事が少ないのでだいぶ苦戦した。（というか、まだ全然しっかり把握できてないけど） とりあえず モデルを読み込んでアニメーションさせる 、というWebGLでなにかやるときに避けて通れない処理でハマったのでメモ。 まず結論から言うと、Boneアニメーションをさせる際は、Boneの数が問題になるぽい。 boneの数はどうやら関係ないぽい。改めて書きだしてみたら正常にアニメーションしました。 ちなみにモデルデータはBlenderでThree.jsのJSON形式にExportしたものを使用。 Export設定 モデルを作成してBoneをいくつか適当に追加してから（17くらい？）Exportして読み込ませたところ、モデル自体は正常に読み込まれているものの、アニメーションしない。 試しにBoneをふ
多彩な表現力のWebGLを扱いやすくする「Three.js」
多彩な表現力のWebGLを扱いやすくする「Three.js」：Webグラフィックをハックする（5）（1/5 ページ） Three.jsはWebGLの冗長な仕様をうまくラップし、扱いやすいインターフェイスで提供するライブラリだ。サンプルコードと見比べながら、効率良く学習しよう Three.jsの基礎 本連載も5回目を迎え、いよいよ佳境に入ります。今回の題材は、Webブラウザ上で3次元グラフィックを実現する「WebGL」です。ただし、これまでと違ってAPIを直接は触れず、「Three.js」を利用します。Three.jsはWebGLの冗長な仕様をうまくラップし、扱いやすいインターフェイスで提供するライブラリです。Mr.Doob氏を中心にオープンソースで開発が進められており、WebGL界隈ではデファクトスタンダードに近い地位を築いています。 Three.jp公式サイト WebGLはこれまで解説し
日記 | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
three.js wiki
ジオメトリ (プリセット)TextGeometry[テキスト]日本語フォント PlaneGeometry[平面] CircleGeometry[円] CubeGeometry[直方体] SphereGeometry[球] CylinderGeometry[円柱] TorusGeometry [トーラス(ドーナツ)] TorusKnotGeometry [トーラス結び目] LatheGeometry[回転体] ConvexGeometry[凸包] TetrahedronGeometry[正4面体] OctahedronGeometry[正8面体] IcosahedronGeometry[正20面体] PolyhedronGeometry[多面体] TubeGeometry[管] ParametricGeometry [パラメトリック曲面] ExtrudeGeometry[] ShapeGeo
Aerotwist - Getting Started with Three.js
Please note: this has been tested with Three.js r82 I have used Three.js for some of my experiments, and it does a really great job of abstracting away the headaches of getting going with 3D in the browser. With it you can create cameras, objects, lights, materials and more, and you have a choice of renderer, which means you can decide if you want your scene to be drawn using HTML 5's canvas, WebG
New community features for Google Chat and an update on Currents
Join the official community for Google Workspace administrators In the Google Cloud Community, connect with Googlers and other Google Workspace admins like yourself. Participate in product discussions, check out the Community Articles, and learn tips and tricks that will make your work and life easier. Be the first to know what's happening with Google Workspace. ______________ Learn about more Goo
やっと理解できた！JSオブジェクト指向プログラミング再入門 | ゆっくりと…
既に多くの方が JavaScript のオブジェクト指向的側面についての解説を記事にされていますが、読み手側から見ると、例えばプログラミング言語への習熟度やオブジェクト指向自体に対する理解度がマチマチなわけで、私自身、「おお、なるほど！」 っていう、頭の中のスイッチがパチンッ！と入るような境地には達していませんでした。 かつて私も オブジェクト指向なJavaScriptプログラミングのススメ なんていう翻訳記事を書いてはいるのですが、正直なところ prototype.constructor の存在は知りませんでしたし、Function.call や Function.apply をどう使えばよいのかなどをちゃんと理解できてはいませんでした。 そんな中、2011年12月に書かれた Doc Center | Mozilla Developer Network の記事 オブジェクト指向 Java
画像を使う - HTML | MDN
What's this? MDN has switched to Persona, a safe and simple way to sign in with just your e-mail address. Learn more about why Mozilla is using Persona. Returning members: sign in with Persona and you'll be connected to your MDN profile (all your information is still here). New members: sign in with Persona first, then you'll be able to set up your new MDN profile. Sign in canvas のより楽しい機能の一つは画像を使う
canvas要素の基本的な使い方まとめ
Written by defghi1977@xboxLIVE.この文書は全てテキストエディタで作成しています．えーと，そりゃもうゴリゴリと． 本文書はsvg要素の基本的な使い方まとめの姉妹版として作成を開始した．canvas要素の仕様は現在進行中で色々と変化しているため，一筋縄で行かないが大方のapiについて書き上がったので公開する．なお，まだ使えない機能等満載だったり，内容に間違いがあっても中々検証することができないので，その部分を了承した上でご利用下さい… 更新履歴 2012/07/18 初版 1・canvas要素の概観 canvas要素とは canvas要素はhtml5で採用されたwebブラウザ上でグラフィックを描画するための機構であり，webページの機能性・視認性が重要視される昨今では，svg要素と並び重要な役割を果たしている．もともとapple社が自社製osの機能向上策として，同
ちょっと便利なJavascriptオブジェクトの作り方
今回は、ちょっと便利なJavascriptオブジェクトの作り方をご紹介します。いわゆるモジュール・パターンと呼ばれている方法です。 はじめに 最近、HTML5への注目と共に、Javascriptを使用する機会が増えてきました。以下のように適用範囲は多岐に渡っています。 通常のWebサイトでのユーザビリティ向上 スマートフォン用Webサイト開発 HTML5アプリによるクライアント・アプリ開発 スマートフォンのハイブリッドアプリ開発 Node.jsによるサーバサイド・プログラミング このように、Javascriptが基幹となる仕組みが広がっています。クライアント側とサーバ側を同じ言語で作れることは、開発側にとってはとても有難いことです（学習コストの低減、人的リソース配分の柔軟性など）。もちろん、発注者やエンドユーアにとっても開発速度などの面で利益が生まれます。 Javascriptプログラミン
EfficientJavaScript - Dev.Opera - 効率的な JavaScript
EfficientJavaScript - Dev.Opera - 効率的な JavaScript 目次 この文書について 効率的な JavaScript ECMAScript eval や Function のコンストラクタを使うのはやめよう eval を書き換えよう 関数を使いたいなら function を使おう with を使うのはやめよう 性能を決める関数で try-catch-finally を使うのはやめよう eval と with は隔離しよう グローバル変数を使うのはやめよう 暗黙のオブジェクト変換に気をつけよう 性能を決める関数で for-in を使うのはやめよう 文字列は累積スタイルで使おう プリミティブの操作は関数呼び出しより速い setTimeout() や setInterval() には文字列でなく関数を渡そう DOM 再描画と再フロー 再フローの回数をでき
enchant.js 怒涛の 100 tips | TM Life
※ phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです. enchant.js 怒涛の 100 tips!! ローカル整理してたら昔勉強がてら作った enchant.js のサンプルが大量に出てきたので, 整理するついでに公開しようと思います. 最終的に 100超えちゃったけどw(全部で102個あります) 逆引きてきな感じでまとめてます. 参考になれば幸いです. 全て jsdo.it に移植したので Web上で実行できます!! fork なりダウンロードなりして遊んでくださいな♪♪ Tips Base(基本) 基礎です. enchant.js のテンプレートを用意しよう Entity(エンティティ) 表示物系の基底クラスです. 内部で DOM を持っているので表示は
Class Index | JsDoc Reference
Documentation generator: JsDoc Toolkit 2.4.0 Template: Codeview 1.2 Generated on: 2016-0-4 21:23 Class Index _global_ enchant.Action アニメーションタイムラインを構成する, 実行したい処理を指定するためのクラス. enchant.ActionEventTarget timelineの enchant.Action クラス向けに拡張された enchant.EventTarget クラス. enchant.BinaryInputManager 入力を管理するためのクラス. enchant.BinaryInputSource 任意の2値入力をラップするクラス. enchant.CanvasLayer Canvas を用いた描画を行うクラス. enchant.Canv
継承とプロトタイプチェーン - JavaScript | MDN
JavaScript のオブジェクトはプロパティ（自身のプロパティを指す）の動的な「袋」です。 JavaScript のオブジェクトは、プロトタイプオブジェクトへのリンクを持っています。あるオブジェクトのプロパティにアクセスしようとすると、オブジェクトだけでなく、オブジェクトのプロトタイプ、プロトタイプのプロトタイプへと、一致する名前のプロパティが得られるか、プロトタイプチェーンの終端に到達するまで、プロパティの探索が行われます。 メモ: ECMAScript 標準に従い、 someObject.[[Prototype]] という表記を someObject のプロトタイプを示すのに使用しています。内部スロット [[Prototype]] には Object.getPrototypeOf() と Object.setPrototypeOf() 関数でアクセスすることができます。これは、標準
setInterval関数が、第一引数の関数を呼ばない【Javascript】 - DRYな備忘録
【問題】 var i = 0; function jack(){ if( i == 10 ){ clearInterval( dummyInterval ); } console.log( i ); i++; } function myCounter(){ var dummyInterval = setInterval("jack()",1000); } $("#hoge").click( function(){ myCounter(); } を実行し、クリックすると、 ご丁寧に1000ミリ秒ごとに Uncaught ReferenceError: jack is not defined と伝えてくれる。 【解決】 var dummyInterval = setInterval("jack()",1000); を var dummyInterval = setInterval( jack
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
three.js editor
three.js - JavaScript 3D library
JavaScriptの「this」は「4種類」？？ - Qiita
