エフェクト作成入門講座 Three.js編 RPGのセーブポイント風の魔法陣 - ICS MEDIA
昨今のWebサイトではWebGLを利用した3Dコンテンツをしばしば見かけるようになってきました。WebGLに対応した端末が普及してきていることや、Three.jsなどのライブラリが充実していることもあり、実案件での採用が現実的になってきているからです。 しかし、いざ3Dコンテンツを作ってみると、どこか味気のないものになってしまう事があります。そんな時はエフェクトの追加をオススメです。エフェクトを追加することで、コンテンツの見栄えが派手になったり、キャラやゲームの状態が伝わりやすくなります。今回エフェクトの例として、RPGのセーブポイントや回復ポイントで使用されそうなデモを制作してみました。 デモを別ウインドウで再生する ソースコードを見る ※このデモはThree.js r146とTypeScript 4.9によって書かれています。 本記事では、セーブポイント風なエフェクトの作成を通して、T
Three.js入門サイト - ICS MEDIA
このサイトは、WebGLのライブラリ「Three.js」の入門サイトです。 初学者から学べるように基本から解説しつつ、発展的な内容までまとめています。このサイトを通して、ウェブの3Dのインタラクションデザインについて学んでいきましょう。 Three.js概要 Three.jsは、HTML5で3Dコンテンツを制作するためのJavaScriptライブラリです。Mr.doob氏が中心となって開発されており、オープンソースソフトウェアとして個人・商用でも無償で利用できます。 WebGLだけで3D表現をするためには、立方体1つ表示するだけでも多くのJavaScriptやGLSLコードを書く必要があり専門知識も必要です。Three.jsを使えばJavaScriptの知識だけで簡単に3Dコンテンツが作成できるため、手軽に扱えるようになります。 もともと2000年代後半のFlashの時代から、ウェブの3D
Three.jsで大量のパーティクルを表示する方法 - ICS MEDIA
3D空間内に大量の粒子を表示させたい、星を表示させたい、塵を表示させたい。そんな表現に適しているのがTHREE.Pointクラスです。 この機能を使えば大量の粒子を表示でき、性能的にもすぐ入れているので実行性能をほとんど下げることなく利用できます。 3D空間にたくさんの粒子を配置するだけで、空間の距離感など雰囲気がでるので、オススメの機能のひとつです。 パーティクルのサンプル サンプルを再生する サンプルのソースコードを確認する この機能の使い方 この機能を実現する部分を抜粋して解説します。 // 形状データを作成 const SIZE = 3000; // 配置する個数 const LENGTH = 1000; // 頂点情報を格納する配列 const vertices = []; for (let i = 0; i < LENGTH; i++) { const x = SIZE * (
Three.js OrbitControls.js - Three.jsを使って、作ってみた
今回は、Three.jsの「OrbitControls.js」について書きます。 OrbitControls.jsは、マウスドラッグによる視点移動と、マウスホイールによるズームが可能になるクラスです。簡単に言いますと、マウスで視点がグルグル回せるということです。 以前に、「TrackballControls.js」というやつを書きましたが、それと少し似ています。 今回は、実際にやってみたほうが、分かりやすいと思います。 OrbitControlsは、Three.jsに記述されている標準クラスではなく、「OrbitControls.js」に書かれています。 ファイルの場所は、Three.jsダウンロードフォルダ内の examples/js/controls/OrbitControls.js にあります。 では、OrbitControlsの読み込み方を書きます。基本的にTrackballCon
three.jsのサンプルをいじってカメラの動きを確認してみた - Qiita
カメラ位置を自動で動かすなら、OrbitControlsは使えない カメラ位置を自動で動かさないなら、OrbitControlsを使える カメラ自動回転 render()部分のカメラの自動回転に着目。 // Detector.js webgl使えないブラウザへのサポート // http://gupuru.hatenablog.jp/entry/2014/01/05/224813 if ( ! Detector.webgl ) { Detector.addGetWebGLMessage(); document.getElementById( 'container' ).innerHTML = ""; } var container, stats; var camera, controls, scene, renderer; var sphere; var parameters = { wid
3Dモデルの表示 - Qiita
const loader = new THREE.JSONLoader(); loader.load('../assets/models/model.json', (geometry, mat) => { const faceMat = new THREE.MeshFaceMaterial(mat); mesh = new THREE.Mesh(geometry, faceMat); scene.add(mesh); }); ※materialが設定されていない場合は、引数はgeometryだけにする https://teratail.com/questions/33951 Blenderエクスポート モデルだけ貰ってエンジニアが手を加えた上で BlenderからJSONをエクスポートすることも多い three.jsでjson形式のモデルを表示してみる オブジェクトをjoinしないと、欲し
Three.jsの基礎基礎メモ - Qiita
準備 下記からjsをダウンロード http://threejs.org/ CDNは下記から //cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js 基本構成 Scene (舞台） ーMesh (部品） ーーGeometry (形状） ーーMaterial (素材） ーLight (光） ーCamera (カメラ） これらをレンダリング（描画）する。 Scene シーンの作り方
Meshの位置を変えて複数の立方体を作成する - not good but great
demo Meshの位置を変えて複数の立方体を作成する //ジオメトリーを生成 var geometry = new THREE.CubeGeometry(60,60,60); //マテリアル(ランバート反射)を生成 var material = new THREE.MeshPhongMaterial({color:0x660000}); //キューブの個数 var cubeNum = 3; for(var i = 0;i < cubeNum;i++){ //メッシュを生成 var cube = new THREE.Mesh(geometry,material); //キューブの座標 cube.position.x = -100 + 80 * i; cube.position.y = 0; cube.position.z = 0; //メッシュをシーンに追加 scene.add(cube)
Three JS:基本の使い方総まとめ-ジオメトリー前編-
Webサイトでは徐々にWebGLコンテンツを取り入れる企業が多くなり、私の仕事でも3Dを触る機会が増えてきました。WebGLコンテンツの制作にあたり、多々あるWebGLライブラリの中でもやはりおすすめはThree JSです。触りやすさや情報の多さでも他のライブラリとは一線を画しており、WebGL初心者でも大変扱いやすいです。 今回はそのThree JSの中でも、花形であるジオメトリー(形状)に関してまとめてみました。と言っても大変たくさんあるので、ジオメトリーの中でもコンストラクタの引数へ数値を指定するだけの簡単な種類のみを2回に分けてご紹介します。 ちなみに現状のバージョンは下記のとおりです。 three.js : r73 Three JSのひな形 まずはThree JSを使用して3Dオブジェクトを表示させるひな形を紹介します。使用しているライブラリはjQueryとThree JSです。
エフェクト作成ツールのEffekseerがWebGLに対応。Web表現の新兵器となるか - ICS MEDIA
エフェクトツール「Effekseer」ですが、2017年5月25日、WebGLに対応したEffekseerForWebGLがリリースされました。今回はEffekseerで作成したエフェクトをJavaScriptライブラリ「Three.js」を使ってWebGLで表示するまでの流れを紹介します。 EffekseerForWebGLのデモ デモを別ウインドウで再生する ソースコードを確認する Effekseerでのエフェクト作成をオススメしたい理由とは？ 1つのエフェクトソースでマルチプラットフォームに展開できる点。たとえばEffekseerはUnityにも対応しているため、WebブラウザとUnityプラットフォームの両方に対応できます (DirectXやOpenGLを用いたアプリケーション、Cocos2d-x、Unreal Engine4、さらにはMMDやSiv3Dにも対応）。Unity用コン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
project-nya.jp - このウェブサイトは販売用です！ - フラッシュ にゃあ にゃんこ プロジェクト ウェブ ジェクト ひろゆき リソースおよび情報
three.js - examples
three.js – matorel