Three.jsでCinema 4Dオブジェクトを読み込む

Cinema 4Dでモデリングした静止オブジェクトをThree.jsで表示する手順のメモ書きです。
（三年ぶりにThree.jsを触ったら1ミリも覚えていないことに気付き、要するにリハビリです…）
Three.js上では静止したオブジェクトが表示されるだけのシンプルなものです。実装後マウスでグリグリ動かせます。

完成デモはこちら！

使用したバージョン

Cinema 4D	R18 (Broadcast)
Three.js	r87

※Cinema 4Dが古いとマテリアルが書き出せないかもしれないので要注意。

Cinema 4D作業

・所望のモデリングデータを完成させておきます。ここでは木の額縁に花の写真画像をはめ込んでみました。
・[ファイル→エクスポート→Wavefront OBJ(*.obj)]を選びます。
・「OBJエクスポート」のダイアログが出るので下記の設定で。
Cinema 4D保存画面
※「Z軸を反転」のチェックを外すとThree.js上でテクスチャが裏返るようです。
※テクスチャ画像は「コンテンツブラウザ」で設定した画像は使いませんでした。使用許諾の範囲がわからなかったのと元画像が探せなかったからです。今回はフォトショで作ったjpgを貼りました。

・するとobjファイルとmtlファイルが出力されます。これらと貼り付けている元のテクスチャ画像（jpgなど）を同じ階層にまとめておいてください。ここではwooden_frame.jpg（額縁のテクスチャ）とDSC09065_wp.jpg（花の写真画像）が該当します。
・これでCinema 4Dの作業は終わりです。

html作業

公式サイトからthree.js-master.zipをダウンロードしましょう。このzipを展開しますが全部は使いません。ここでは下記のファイルだけを使います。

/build/three.min.js （Three.js本体）
/examples/js/loaders/DDSLoader.js （マテリアル表示用）
/examples/js/loaders/MTLLoader.js （マテリアル表示用）
/examples/js/loaders/OBJLoader.js （objロード用）
/examples/js/controls/OrbitControls.js （マウスでグリグリ動かす用）

index.htmlサンプル

htmlは極めて単純です。極力他の要素を排除しています。

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Three.js + Cinema 4D</title>
<style type="text/css">
*{
	margin: 0;
	padding: 0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="./build/three.min.js"></script>
<script src="./examples/js/loaders/DDSLoader.js"></script>
<script src="./examples/js/loaders/MTLLoader.js"></script>
<script src="./examples/js/loaders/OBJLoader.js"></script>
<script src="./examples/js/controls/OrbitControls.js"></script>
<script src="./main.js"></script>
</head>

<body>
<div id="stage"></div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Three.js + Cinema 4D</title>

margin: 0;

padding: 0;

}

</style>

</head>

<body>

</body>

</html>

main.jsサンプル

jsはjQueryっぽくなっていますので違う宗派の方は脳内で変換してください。
objファイルとmtlファイルとテクスチャ画像はobjディレクトリにまとめています。

$(document).ready(function(){
    var stats;
    var camera, scene, renderer;
    var mouseX = 0, mouseY = 0;

    init();
    animate();

    function init(){
      camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
      camera.position.z = 450;

    // scene
      var controls = new THREE.OrbitControls(camera);
      scene = new THREE.Scene();

      var ambient = new THREE.AmbientLight(0x808080);
      scene.add(ambient);

      var directionalLight = new THREE.DirectionalLight(0xffeedd);
      directionalLight.position.set(0, 1, 0).normalize();
      scene.add(directionalLight);

    // model
      var onProgress = function (xhr){
        console.log(xhr.loaded + "/" +  xhr.total);
        if (xhr.lengthComputable){
          var percentComplete = xhr.loaded / xhr.total * 100;
          console.log(Math.round(percentComplete, 2) + '% downloaded');
        }
      };

      var onError = function (xhr){
      };

      THREE.Loader.Handlers.add(/\.dds$/i, new THREE.DDSLoader());

      //r87記述
      var mtlLoader = new THREE.MTLLoader();
      mtlLoader.setPath('obj/');
      mtlLoader.load('Picture_threejs.mtl', function(materials){

        materials.preload();

        var objLoader = new THREE.OBJLoader();
        objLoader.setMaterials(materials);
        objLoader.setPath('obj/');
        objLoader.load('Picture_threejs.obj', function (object){
          object.position.y = -50;
          scene.add(object);
        }, onProgress, onError);
      });

      renderer = new THREE.WebGLRenderer();
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(window.innerWidth, window.innerHeight);
      $('#stage').append(renderer.domElement);
    }

    function animate(){
      requestAnimationFrame(animate);
      render();
    }

    function render(){
      camera.lookAt(scene.position);
      renderer.render(scene, camera);
    }
});

$(document).ready(function(){

var stats;

var camera, scene, renderer;

var mouseX = 0, mouseY = 0;

init();

animate();

function init(){

camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);

camera.position.z = 450;

// scene

var controls = new THREE.OrbitControls(camera);

scene = new THREE.Scene();

var ambient = new THREE.AmbientLight(0x808080);

scene.add(ambient);

var directionalLight = new THREE.DirectionalLight(0xffeedd);

directionalLight.position.set(0, 1, 0).normalize();

scene.add(directionalLight);

// model

var onProgress = function (xhr){

console.log(xhr.loaded + "/" + xhr.total);

if (xhr.lengthComputable){

var percentComplete = xhr.loaded / xhr.total * 100;

console.log(Math.round(percentComplete, 2) + '% downloaded');

}

};

var onError = function (xhr){

};

THREE.Loader.Handlers.add(/\.dds$/i, new THREE.DDSLoader());

//r87記述

var mtlLoader = new THREE.MTLLoader();

mtlLoader.setPath('obj/');

mtlLoader.load('Picture_threejs.mtl', function(materials){

materials.preload();

var objLoader = new THREE.OBJLoader();

objLoader.setMaterials(materials);

objLoader.setPath('obj/');

objLoader.load('Picture_threejs.obj', function (object){

object.position.y = -50;

scene.add(object);

}, onProgress, onError);

});

renderer = new THREE.WebGLRenderer();

renderer.setPixelRatio(window.devicePixelRatio);

renderer.setSize(window.innerWidth, window.innerHeight);

$('#stage').append(renderer.domElement);

}

function animate(){

requestAnimationFrame(animate);

render();

}

function render(){

camera.lookAt(scene.position);

renderer.render(scene, camera);

}

});

これで完成です。

以前Three.jsを触ったときは三年ぐらい前で確かリビジョンは68でした。フロントエンドの三年前ってちょっと引くぐらい古いですね。恐ろしい世界…

参考にさせていただいたサイト：
https://threejs.org/examples/#webgl_loader_obj_mtl
http://isi-work.com/20151011/webglcode/

日	月	火	水	木	金	土
« 4月
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31