three.js / editor
はじめに
Three.js Advent Calendar 2019の 7 日目の記事です。
Three.js Meetup Tokyo #0で初LTしてきた勢いそのままに登録したものの何も思い浮かばずピンチな感じが満載ですが…
今回は意外と検索しても出てこないthree.js / editorを紹介できたらと思います。
思いっきりただのツール紹介になりますがご了承ください…
three.js / editor
Three.jsのオンラインエディターになります。
公式サイトにもリンク先があるのですが見逃したりしているのか、もしくはそもそも使ってる人がいないのかあまり話題になっていないような気がします(気のせい?)
基本操作
立方体を作成
では、簡単(手抜き)に立方体を作成していきます。
ツールバーの「Add」から作成するオブジェクトを選択します。
Boxを選択すると黒い立方体が表示されるかと思います。
この立方体は画面下部にあるTRANSLATE・ROTATE・SCALEを選択することでドラッグ&ドロップによる移動・回転・サイズ変更することができます。
(画面右にあるOBJECTタブからも変更できます)
色を変更
画面右にあるMATERIALタブから立方体の色や質感などを編集することができます。
今回は簡単(手抜き)に赤にしてみましょう。
Emissiveを選択し、表示されたカラーピッカーから赤を選択すると立方体が赤くなると思います。
Export
作成したSceneやGeomeryはいくつかの形式でexportすることができます。
こちらでexportするとjsonがダウンロードされ、このエディタでimportすることもできますしthree.jsのObjectLoaderで読み込むことも可能です。(Export Geometry・Export Object・Export Scene)
// Export Sceneをexportしてダウンロードされたscene.jsonを読み込む
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(new THREE.Color(0xaaaaaa));
document.getElementById("WebGL-output").appendChild(renderer.domElement);
const camera = new THREE.PerspectiveCamera(
45,
window.innerWidth / window.innerHeight,
1,
1000
);
camera.position.set(0, 5, 10);
camera.lookAt(0, 0, 0);
const loader = new THREE.ObjectLoader();
loader.load('scene.json', (obj: THREE.Object3D) => {
const scene = obj as THREE.Scene;
const render = () => {
requestAnimationFrame(render);
renderer.render(scene, camera);
};
render();
});
Publishはhtmlやjsファイルの一式をzip形式でダウンロードすることができます。
Example
Exampleもいくつか用意されていますので、それを見て色々手を加えて遊んでみると楽しめるかもしれません。
PWA
個人的に「おっ!」と思ったのが、このエディターはPWA(Progressive Web App)になっているところです。
今回はThree.jsの記事ですのでPWAの説明は省略しますが、一言でいうとインストールできるWebアプリケーションです。
Chromeでこのエディターを起動するとオムニバーにアイコンが現れインストールすることができます。
インストールするとデスクトップにアイコンが表示され起動できます。
おわりに
簡単(手抜き)な紹介だけとなってしまいましたが、今後も色々使ってみて何か良さ気なものがあったら紹介しようと思います。
(今回は入門の入門ということで…)
ツールをインストールなどせずに手軽に3DCGをやってみたい方やThree.jsに入門したいけれどまずはイメージを掴みたい方などにはお勧めできるかなと思いました。
また、UnityやBlenderなどをゴリゴリ使っている強々勢の方は興味があれば、issueやPRを出してみて機能改善していくのも良いかもしれませんね。
Author And Source
この問題について(three.js / editor), 我々は、より多くの情報をここで見つけました https://qiita.com/f-a24/items/44efffbb5fae10c3ecb6著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .