{"id":1361,"date":"2015-08-12T17:44:25","date_gmt":"2015-08-12T08:44:25","guid":{"rendered":"http:\/\/www.digifie.jp\/blog\/?p=1361"},"modified":"2015-08-14T23:44:06","modified_gmt":"2015-08-14T14:44:06","slug":"three-js-%e3%81%a7-%e3%82%ad%e3%83%a5%e3%83%bc%e3%83%96%e3%83%9e%e3%83%83%e3%83%97%e3%81%a7%e3%81%ae%e7%92%b0%e5%a2%83%e3%83%9e%e3%83%83%e3%83%94%e3%83%b3%e3%82%b0","status":"publish","type":"post","link":"https:\/\/www.digifie.jp\/blog\/archives\/1361","title":{"rendered":"three.js \u3067 \u74b0\u5883\u30de\u30c3\u30d4\u30f3\u30b0"},"content":{"rendered":"
Facebook \u306b\u30b7\u30a7\u30a2<\/a><\/div>
Tweet<\/a><\/div><\/div>\n
\n
\"150813\"<\/a>

\u753b\u50cf\u30af\u30ea\u30c3\u30af\u3067\u30c7\u30e2\u753b\u9762\u304c\u958b\u304d\u307e\u3059\u3002
3D\u30e2\u30c7\u30eb\u306e\u30ed\u30fc\u30c9\u306b\u5c11\u3057\u6642\u9593\u304c\u304b\u304b\u308a\u307e\u3059\u3002<\/p><\/div>\n

three.js\/examples\/<\/a> \u306e materials\/cars\/camaro<\/a> \u306e\u3088\u3046\u306a\u3053\u3068\u304c\u3084\u308a\u305f\u304f\u3066\u8272\u3005\u8a66\u3057\u305f\u306e\u3067\u307b\u307c\u81ea\u5206\u7528\u306e\u30e1\u30e2\u3002<\/p>\n

\u516c\u5f0f\u304b\u3089\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u306ethreejs\u30d5\u30a9\u30eb\u30c0\/utils\/convertres.obj\/convert_obj_three.py
\n\u3092\u4f7f\u7528\u3057\u3066 obj \u5f62\u5f0f\u306e\u30e2\u30c7\u30eb\u30c7\u30fc\u30bf\uff08\u4eca\u56de\u30e2\u30c7\u30eb\u306f\u3053\u3061\u3089<\/a>\u3092\u4f7f\u7528\u3055\u305b\u3066\u3044\u305f\u3060\u304d\u307e\u3057\u305f\uff09\u3092\u4e0b\u8a18\u30b3\u30de\u30f3\u30c9\u3067 json \u306b\u5909\u63db\u3002<\/p>\n

python convert_obj_three.py -i hogehoge.obj -o hagehage.js<\/pre>\n
\u9802\u70b9\u30d0\u30c3\u30d5\u30a1\u3092\u30d0\u30a4\u30ca\u30ea\u5f62\u5f0f\u3067\u5206\u96e2\u3059\u308b\u5834\u5408\u306f -t \u30d1\u30e9\u30e1\u30fc\u30bf\u306b binary \u3092\u6307\u5b9a\u3059\u308c\u3070\u516c\u5f0f\u30b5\u30f3\u30d7\u30eb\u3068\u540c\u3058\u5f62\u5f0f\u306b\u3067\u304d\u307e\u3059\u3002<\/p>\n
python convert_obj_three.py -i hogehoge.obj -o hagehage.js -t binary<\/pre>\n
\u5909\u63db\u3057\u305f json \u30c7\u30fc\u30bf\uff08\u4e0a\u306e python \u30b3\u30de\u30f3\u30c9\u4f8b\u3060\u3068 hagehage.js \uff09\u306f\u3053\u3093\u306a\u611f\u3058\u3002<\/p>\n
{\r\n    "metadata" :\r\n    {\r\n        "formatVersion" : 3.1,\r\n        "sourceFile"    : "hogehoge.obj",\r\n        "generatedBy"   : "OBJConverter",\r\n        "vertices"      : 29340,\r\n        "faces"         : 26193,\r\n        "normals"       : 19819,\r\n        "colors"        : 0,\r\n        "uvs"           : 22171,\r\n        "materials"     : 23\r\n    },\r\n    "scale" : 1.000000,\r\n    "materials": [\t{\r\n\t"DbgColor" : 15658734,\r\n\t"DbgIndex" : 0,\r\n\t"DbgName" : "body"\r\n\t},\r\n\t{\r\n\t"DbgColor" : 15597568,\r\n\t"DbgIndex" : 1,\r\n\t"DbgName" : "tire"\r\n\t},\r\n\t{\r\n\t"DbgColor" : 60928,\r\n\t"DbgIndex" : 2,\r\n\t"DbgName" : "window"\r\n\t},\r\n\t{\r\n\t"DbgColor" : 238,\r\n\t"DbgIndex" : 3,\r\n\t"DbgName" : "Disk"\r\n\t},\r\n\t.\r\n\t.\r\n\t.\r\n\t}],\t\r\n\t"vertices": [\u9802\u70b9\u30d0\u30c3\u30d5\u30a1]\r\n}<\/pre>\n
\u9802\u70b9\u30d0\u30c3\u30d5\u30a1\u3092\u30d0\u30a4\u30ca\u30ea\u3067\u5909\u63db\u3057\u305f\u5834\u5408\u306f “vertices”: [\u9802\u70b9\u30d0\u30c3\u30d5\u30a1] \u306e\u90e8\u5206\u304c “buffers”: “hagehage.bin” \u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n
\u3053\u306e\u4e2d\u3067\u306e\u30de\u30c6\u30ea\u30a2\u30eb\u306b\u95a2\u4fc2\u3059\u308b\u30c7\u30fc\u30bf\u306f\u3001
\n.metadata.materials \u306b \u30de\u30c6\u30ea\u30a2\u30eb\u306e\u6570\u3002
\n.materials[n].DbgIndex \u304c \u30de\u30c6\u30ea\u30a2\u30eb\u306e\u30a4\u30f3\u30c7\u30c3\u30af\u30b9\u3002
\n.materials[n].DbgName \u304c \u30e2\u30c7\u30eb\u4e0a\u3067\u8a2d\u5b9a\u3055\u308c\u305f\u30de\u30c6\u30ea\u30a2\u30eb\u306e\u540d\u524d\u3002
\n\u3053\u306e materials[n] \u306b\u30aa\u30fc\u30b5\u30ea\u30f3\u30b0\u4e0a\u3067\u8a2d\u5b9a\u3057\u305f\u30de\u30c6\u30ea\u30a2\u30eb\u3092\u52d5\u7684\u306b\u9069\u7528\u3059\u308c\u3070\u3001\u8aad\u307f\u8fbc\u3093\u3060\u30e2\u30c7\u30eb\u306b\u5bfe\u3057\u3066 threejs \u5074\u3067\u8a2d\u5b9a\u3057\u305f\u30de\u30c6\u30ea\u30a2\u30eb\u3092\u52d5\u7684\u306b\u9069\u7528\u3067\u304d\u307e\u3059\u3002<\/p>\n
\u4eca\u56de\u306e\u30b5\u30f3\u30d7\u30eb\u3067\u306e three.js \u5074\u306e\u4e3b\u8981\u306a\u30b3\u30fc\u30c9\u306f\u3053\u3093\u306a\u611f\u3058\u3002<\/p>\n
\u74b0\u5883\u30de\u30c3\u30d7\u7528\u30c6\u30af\u30b9\u30c1\u30e3\u3092\u30ed\u30fc\u30c9\u3057\u3066 textureCube \u3092\u4f5c\u6210<\/p>\n
var r = "cube_tex\/";\r\nvar urls = [ r + "px.jpg", r + "nx.jpg", r + "py.jpg", r + "ny.jpg", r + "pz.jpg", r + "nz.jpg" ];\r\nvar textureCube = THREE.ImageUtils.loadTextureCube( urls );<\/pre>\n
\u5404\u30de\u30c6\u30ea\u30a2\u30eb\u3092\u4f5c\u6210
\n\u30dc\u30c7\u30a3\u30fb\u30b0\u30e9\u30b9\u30fb\u30af\u30ed\u30fc\u30e0\u306b\u306f textureCube \u3092\u9069\u7528\u3057\u3066\u53cd\u5c04\u3055\u305b\u308b<\/p>\n
carMaterials = {\r\nbody: {\r\n\tOrange: new THREE.MeshLambertMaterial( {\r\n\t\tcolor: 0xff6600,\r\n\t\tenvMap: textureCube,\r\n\t\tcombine: THREE.MixOperation,\r\n\t\treflectivity: 0.3,\r\n\t\tside: THREE.DoubleSide\r\n\t} ),\r\n\tBlue: new THREE.MeshLambertMaterial( {\r\n\t\tcolor: 0x226699,\r\n\t\tenvMap: textureCube,\r\n\t\tcombine: THREE.MixOperation,\r\n\t\treflectivity: 0.3,\r\n\t\tside: THREE.DoubleSide\r\n\t} )\r\n\t.\r\n\t.\r\n\t.\r\n\t},\r\nchrome: new THREE.MeshLambertMaterial( {\r\n\tcolor: 0xffffff,\r\n\tenvMap: textureCube,\r\n\tside: THREE.DoubleSide\r\n} ),\r\n.\r\n.\r\n.\r\nblack: new THREE.MeshLambertMaterial( {\r\n\tcolor: 0x000000\r\n} )\r\n};<\/pre>\n
THREE.JSONLoader \u3067\u30e2\u30c7\u30eb\u3092\u8aad\u307f\u8fbc\u307f<\/p>\n
var loader = new THREE.JSONLoader();\r\nloader.load( "obj\/hagehage.js", onLoad);\r\n\r\nfunction onLoad( geometry )\r\n{\r\n\tcreateScene( geometry, carMaterials );\r\n}<\/pre>\n
\u9802\u70b9\u30d0\u30c3\u30d5\u30a1\u3092\u30d0\u30a4\u30ca\u30ea\u5316\u3057\u305f\u5834\u5408\u306f THREE.BinaryLoader \u3067\u30e2\u30c7\u30eb\u3092\u8aad\u307f\u8fbc\u307f<\/p>\n
var loader = new THREE.BinaryLoader();\r\nloader.load( "obj\/hagehage.js", onLoad);\r\n\r\nfunction onLoad( geometry )\r\n{\r\n\tcreateScene( geometry, carMaterials );\r\n}<\/pre>\n
\u4e21\u65b9\u8a66\u3057\u3066\u307f\u305f\u3068\u3053\u308d\u3001\u9802\u70b9\u3092\u30d0\u30a4\u30ca\u30ea\u5316\u3059\u308b\u307b\u3046\u304c\u5c11\u3057\u8aad\u307f\u8fbc\u307f\u304c\u65e9\u3044\u6c17\u304c\u3057\u307e\u3057\u305f\u304c\u3001\u3053\u308c\u306f\u6c17\u306e\u305b\u3044\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002<\/p>\n
\u30e2\u30c7\u30eb\u306e\u5404\u90e8\u306b\u30de\u30c6\u30ea\u30a2\u30eb\u3092\u9069\u7528<\/p>\n
function createScene( geometry, materials )\r\n{\r\n\tvar s = 200, m = new THREE.MeshFaceMaterial();\r\n\tm.materials[ 0 ] = materials.body[ "Orange" ];\r\n\tm.materials[ 1 ] = materials.tire;\r\n\tm.materials[ 2 ] = materials.glass;\r\n\tm.materials[ 3 ] = materials.chrome;\r\n\tm.materials[ 4 ] = materials.chrome;\r\n\tm.materials[ 5 ] = materials.black;\r\n\tm.materials[ 6 ] = materials.orange;\r\n\t.\r\n\t.\r\n\t.\r\n\t\/\/ \u30e1\u30c3\u30b7\u30e5\u3092\u4f5c\u6210\r\n\tvar mesh = new THREE.Mesh( geometry, m );\r\n\tmesh.rotation.y = 1;\r\n\tmesh.scale.set( s, s, s );\r\n\tscene.add( mesh );\r\n}<\/pre>\n
\u4eca\u56de\u306e\u30c7\u30e2\u3067\u306f\u3001\u8eca\u306e\u30e2\u30c7\u30eb\u306e\u30dd\u30ea\u30b4\u30f3\u304c\u304a\u304b\u3057\u304f\u306a\u3063\u3066\u3057\u307e\u3063\u3066\u3044\u308b\u90e8\u5206\u304c\u3042\u308a\u307e\u3059\u304c\u3001\u4eca\u56de\u306f\u30c6\u30b9\u30c8\u3068\u3044\u3046\u3053\u3068\u3067\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u305f\u30e2\u30c7\u30eb\u3092 Blender \u3067\u8aad\u307f\u8fbc\u3093\u3067\u30de\u30c6\u30ea\u30a2\u30eb\u3060\u3051\u8a2d\u5b9a\u3057\u3066 Obj \u3067\u66f8\u304d\u51fa\u3057\u3066 json \u5909\u63db\u3057\u305f\u3060\u3051\u306a\u306e\u3067\u305d\u3053\u306f\u3054\u611b\u656c\u3068\u3044\u3046\u3053\u3068\u3067\u2026<\/p>\n
\u203b 2015.08.13 \u8eca\u306e\u30dc\u30c7\u30a3\u307e\u308f\u308a\u4ed6\u306e\u30de\u30c6\u30ea\u30a2\u30eb\u304c\u8868\u9762\u3057\u304b\u63cf\u753b\u3057\u306a\u3044\u8a2d\u5b9a\u306b\u306a\u3063\u3066\u3044\u305f\u90e8\u5206\u3092\u4e21\u9762\u63cf\u753b\u306b\u4fee\u6b63\u3057\u307e\u3057\u305f\u3002<\/p>\n
        
Facebook \u306b\u30b7\u30a7\u30a2<\/a><\/div>        
Tweet<\/a><\/div><\/div>\n
\n","protected":false},"excerpt":{"rendered":"
three.js\/examples\/ \u306e materials\/cars\/camaro \u306e\u3088\u3046\u306a\u3053\u3068\u304c\u3084\u308a\u305f\u304f\u3066\u8272\u3005\u8a66\u3057\u305f\u306e\u3067\u307b\u307c\u81ea\u5206\u7528\u306e\u30e1\u30e2\u3002 \u516c\u5f0f\u304b\u3089\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u306ethreejs\u30d5\u30a9\u30eb\u30c0\/utils\/convertre […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[45],"tags":[],"_links":{"self":[{"href":"https:\/\/www.digifie.jp\/blog\/wp-json\/wp\/v2\/posts\/1361"}],"collection":[{"href":"https:\/\/www.digifie.jp\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.digifie.jp\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.digifie.jp\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.digifie.jp\/blog\/wp-json\/wp\/v2\/comments?post=1361"}],"version-history":[{"count":23,"href":"https:\/\/www.digifie.jp\/blog\/wp-json\/wp\/v2\/posts\/1361\/revisions"}],"predecessor-version":[{"id":1387,"href":"https:\/\/www.digifie.jp\/blog\/wp-json\/wp\/v2\/posts\/1361\/revisions\/1387"}],"wp:attachment":[{"href":"https:\/\/www.digifie.jp\/blog\/wp-json\/wp\/v2\/media?parent=1361"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.digifie.jp\/blog\/wp-json\/wp\/v2\/categories?post=1361"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.digifie.jp\/blog\/wp-json\/wp\/v2\/tags?post=1361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}