{"id":1389,"date":"2015-08-28T10:59:13","date_gmt":"2015-08-28T01:59:13","guid":{"rendered":"http:\/\/www.digifie.jp\/blog\/?p=1389"},"modified":"2015-08-28T18:54:11","modified_gmt":"2015-08-28T09:54:11","slug":"three-js-%e3%81%a7-obj-%e5%bd%a2%e5%bc%8f%e3%83%a2%e3%83%87%e3%83%ab%e3%81%ae%e4%bd%bf%e7%94%a8","status":"publish","type":"post","link":"https:\/\/www.digifie.jp\/blog\/archives\/1389","title":{"rendered":"three.js \u3067 obj \u5f62\u5f0f\u30e2\u30c7\u30eb\u306e\u4f7f\u7528"},"content":{"rendered":"
Facebook \u306b\u30b7\u30a7\u30a2<\/a><\/div>
Tweet<\/a><\/div><\/div>\n
\n
\"\u753b\u50cf\u30af\u30ea\u30c3\u30af\u3067\u30c7\u30e2\u753b\u9762\u304c\u958b\u304d\u307e\u3059\u3002<\/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

\u524d\u56de\u306e\u8a18\u4e8b<\/a> \u3067\u306f json \u5f62\u5f0f\u306e\u30e2\u30c7\u30eb\u3092\u8aad\u307f\u8fbc\u3093\u3067\u30de\u30c6\u30ea\u30a2\u30eb\u3092\u8a2d\u5b9a\u3059\u308b\u65b9\u6cd5\u306e\u30c7\u30e2\u3067\u3057\u305f\u304c\u3001\u4eca\u56de\u306f \u3053\u3061\u3089<\/a> \u304b\u3089\u5165\u624b\u3055\u305b\u3066\u3044\u305f\u3060\u3044\u305f Wavefront(obj) \u5f62\u5f0f\u306e\u30e2\u30c7\u30eb\u3092\u4f7f\u7528\u3057\u3066\u540c\u69d8\u306e\u30c7\u30e2\u3092\u4f5c\u6210\u3057\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n

three.js \u306e\u57fa\u672c\u7684\u306a\u90e8\u5206\u3068\u30de\u30c6\u30ea\u30a2\u30eb\u3092\u4f5c\u6210\u3057\u3066\u30e2\u30c7\u30eb\u306b\u9069\u7528\u3059\u308b\u90e8\u5206\u306f\u524d\u56de\u3068\u307b\u307c\u540c\u3058\u3067\u3059\u304c\u30013D\u30e2\u30c7\u30eb\u8aad\u307f\u8fbc\u307f\u3068\u30e2\u30c7\u30eb\u304b\u3089\u306e Mesh \u304a\u3088\u3073 \u30de\u30c6\u30ea\u30a2\u30eb\u306e\u9078\u629e\u90e8\u5206\u304c\u7570\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n

\u3067\u306f\u3001\u624b\u9806\u3067\u3059\u3002<\/p>\n

obj\u5f62\u5f0f\u306e\u30e2\u30c7\u30eb\u306e\u8aad\u307f\u8fbc\u307f\u3002
\nOBJMTLLoader \u3067 .obj \u3068 .mtl \u3092\u30ed\u30fc\u30c9\u3059\u308b\u3002<\/p>\n

\r\nvar loader = new THREE.OBJMTLLoader();\r\nloader.load( "obj\/Robot_BI.obj", "obj\/Robot_BI.mtl", onLoad );<\/pre>\n
\u74b0\u5883\u30de\u30c3\u30d7\u7528\u306e\u30c6\u30af\u30b9\u30c1\u30e3\u3092\u8aad\u307f\u8fbc\u3093\u3067\u30ad\u30e5\u30fc\u30d6\u7528\u30c6\u30af\u30b9\u30c1\u30e3\u3092\u4f5c\u6210\u3002<\/p>\n
var r = "cube_tex\/";\r\ncubeTexUrls = [ r + "posx.jpg", r + "negx.jpg", r + "posy.jpg", r + "negy.jpg", r + "posz.jpg", r + "negz.jpg" ];\r\nvar textureCube = THREE.ImageUtils.loadTextureCube( cubeTexUrls );<\/pre>\n
\u52d5\u7684\u306b\u5909\u66f4\u3059\u308b\u305f\u3081\u306e\u30de\u30c6\u30ea\u30a2\u30eb\u3092\u4f5c\u6210\u3002<\/p>\n
\r\n\u3000\/\/ \u30de\u30c6\u30ea\u30a2\u30eb\uff08\u30ac\u30e9\u30b9\uff09\r\n  glass = new THREE.MeshBasicMaterial( {\r\n    color: 0x223344,\r\n    envMap: textureCube,\r\n    opacity: 0.1,\r\n    combine: THREE.MixOperation,\r\n    reflectivity: 0.7,\r\n    transparent: true\r\n  } )\r\n\r\n  \/\/ \u30ed\u30dc\u306e\u672c\u4f53\u8272\u5909\u66f4\u7528\u30de\u30c6\u30ea\u30a2\u30eb\r\n  bodyMaterials =\r\n  {\r\n    Red: new THREE.MeshLambertMaterial( {\r\n      color: 0x660000,\r\n      envMap: textureCube,\r\n      combine: THREE.MixOperation,\r\n      reflectivity: 0.5\r\n    } ),\r\n    Blue: new THREE.MeshLambertMaterial( {\r\n      color: 0x224466,\r\n      envMap: textureCube,\r\n      combine: THREE.MixOperation,\r\n      reflectivity: 0.3,\r\n      side: THREE.DoubleSide\r\n    } ),\r\n    Black: new THREE.MeshLambertMaterial( {\r\n      color: 0x000000,\r\n      envMap: textureCube,\r\n      combine: THREE.MixOperation,\r\n      reflectivity: 0.5\r\n    } ),\r\n    White: new THREE.MeshLambertMaterial( {\r\n      color: 0xffffff,\r\n      envMap: textureCube,\r\n      combine: THREE.MixOperation,\r\n      reflectivity: 0.5\r\n    } ),\r\n    Scorpion: new THREE.MeshPhongMaterial( {\r\n      color: 0x770000,\r\n      specular: 0xffaaaa,\r\n      envMap: textureCube,\r\n      combine: THREE.MultiplyOperation\r\n    } ),\r\n    Gold: new THREE.MeshPhongMaterial( {\r\n      color: 0xaa9944,\r\n      specular: 0xbbaa99,\r\n      shininess: 50,\r\n      envMap: textureCube,\r\n      combine: THREE.MultiplyOperation\r\n    } ),\r\n    Chrome: new THREE.MeshPhongMaterial( {\r\n      color: 0xffffff,\r\n      specular:0xffffff,\r\n      envMap: textureCube,\r\n      combine: THREE.MultiplyOperation\r\n    } ),\r\n    Wire: new THREE.MeshPhongMaterial( {\r\n      color: 0xffaa66,\r\n      wireframe: true\r\n    } )\r\n  };<\/pre>\n
DirectionalLight \u306e castShadow \u3092\u6709\u52b9\u306b\u3057\u3066\u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u8a2d\u5b9a\u3002
\n\u30d1\u30e9\u30e1\u30fc\u30bf\u306f\u4e0b\u8a18\u30b3\u30fc\u30c9\u306e\u30b3\u30e1\u30f3\u30c8\u304c\u8a2d\u5b9a\u5185\u5bb9\u3068\u601d\u308f\u308c\u307e\u3059\u304c\u3088\u304f\u308f\u304b\u3063\u3066\u3044\u307e\u305b\u3093\u2026<\/p>\n
var directionalLight = new THREE.DirectionalLight( 0x999999 );\r\ndirectionalLight.position.set( -1.5, 2, -0.5 ).normalize();\r\ndirectionalLight.castShadow = true;\r\ndirectionalLight.shadowCameraVisible = true; \/\/ \u78ba\u8a8d\u7528\u56db\u89d2\u9310\r\ndirectionalLight.shadowMapWidth = 1024; \/\/ \u5f71\u30c6\u30af\u30b9\u30c1\u30e3\u306e\u5e45\r\ndirectionalLight.shadowMapHeight = 1024; \/\/ \u5f71\u30c6\u30af\u30b9\u30c1\u30e3\u306e\u9ad8\u3055\r\nvar d = 50; \/\/ dist \u5927\u304d\u3051\u308c\u3070\u5e83\u7bc4\u56f2\u30fb\u5c0f\u3055\u3044\u8e74\u308c\u3070\u72ed\u7bc4\u56f2\r\ndirectionalLight.shadowCameraLeft = -d;\r\ndirectionalLight.shadowCameraRight = d;\r\ndirectionalLight.shadowCameraTop = d;\r\ndirectionalLight.shadowCameraBottom = -d;\r\ndirectionalLight.shadowCameraNear = -30; \/\/ \u56db\u89d2\u9310\u306e\u4e0a\u9762\u306e\u4f4d\u7f6e\r\ndirectionalLight.shadowCameraFar = 20; \/\/ \u56db\u89d2\u9310\u306e\u4e0b\u9762\u306e\u4f4d\u7f6e\r\ndirectionalLight.shadowCameraFov = 40; \/\/ \u8996\u91ce\u89d2\r\ndirectionalLight.shadowBias = 0.0001; \/\/ \uff1f\r\ndirectionalLight.shadowDarkness = 0.5; \/\/ \u5f71\u306e\u6fc3\u3055\r\nscene.add( directionalLight );<\/pre>\n
WebGLRenderer \u306e shadowMapEnabled \u3092\u6709\u52b9\u306b\u3059\u308b\u3002<\/p>\n
renderer.shadowMapEnabled = true;<\/pre>\n
\u30e2\u30c7\u30eb\u306f Object3D \u3068\u3057\u3066\u8aad\u307f\u8fbc\u307e\u308c\u308b\u306e\u3067\u3001Object3D \u306b\u5185\u5305\u3055\u308c\u3066\u3044\u308b Mesh \u3068 Mesh \u306b\u4f7f\u7528\u3055\u308c\u3066\u3044\u308b\u30de\u30c6\u30ea\u30a2\u30eb\u3092\u898b\u3064\u3051\u3066\u4f5c\u6210\u3057\u305f\u30de\u30c6\u30ea\u30a2\u30eb\u3092\u9069\u7528\u3002
\nMesh \u306e castShadow \u3068 receiveShadow \u3092\u6709\u52b9\u306b\u3057\u3066\uff08\u5730\u9762\u3060\u3051\u3067\u306f\u306a\u304f\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u672c\u4f53\u306b\u3082\uff09\u5f71\u304c\u843d\u3061\u308b\u3088\u3046\u306b\u8a2d\u5b9a\u3002
\n\u30de\u30c6\u30ea\u30a2\u30eb\u5909\u66f4\u53ef\u80fd\u306a Mesh \u306f\u30b0\u30ed\u30fc\u30d0\u30eb\u5909\u6570\u3067\u53c2\u7167\u3057\u3066\u304a\u304f\u3002<\/p>\n
\r\n\u3000var scale = 5;\r\n  object.scale.x = object.scale.y = object.scale.z = scale;\r\n\r\n  for(var i = 0; i < object.children.length; i++)\r\n  {\r\n    var obj = object.children[i];\r\n    var l = object.children[i].children.length;\r\n    for(var j = 0; j < l; j++)\r\n    {\r\n      var mesh = obj.children[j];\r\n      mesh.receiveShadow = true;\r\n      mesh.castShadow = true;\r\n      if(mesh.material.name == "lensglass")\r\n      {\r\n        mesh.material = glass;\r\n      }\r\n      else if (mesh.material.name == "shinymetal") {\r\n        mesh.material = bodyMaterials.Chrome;\r\n      }\r\n      else\r\n      {\r\n        \/\/ \u8272\u3092\u5909\u66f4\u3059\u308b Mesh\r\n        if(mesh.material.name == "colmetal")\r\n        {\r\n          bodyMesh = mesh;\r\n          bodyMesh.material = bodyMaterials.Red;\r\n        }\r\n      }\r\n    }\r\n  }\r\n  scene.add( object );<\/pre>\n
\u80cc\u666f\u3068\u5730\u9762\u306e\u4f5c\u6210\u3002
\n\u80cc\u666f\u306f\u74b0\u5883\u30de\u30c3\u30d7\u7528\u306e\u30ad\u30e5\u30fc\u30d6\u30c6\u30af\u30b9\u30c1\u30e3\u3092\u4f7f\u7528\u3057\u305f skybox\u3001\u5730\u9762\u306f Plane \u306b\u30c6\u30af\u30b9\u30c1\u30e3\u3092\u8cbc\u308a\u4ed8\u3051\u305f\u3060\u3051\u3067\u3059\u3002
\n\u5730\u9762\u306b\u306f\u5f71\u304c\u843d\u3061\u308b\u305f\u3081 receiveShadow \u3092\u6709\u52b9\u306b\u3002<\/p>\n
\r\n\u3000\/\/ skybox\r\n  var size = (maxDist * 100)\/2;\r\n  var skyGeometry = new THREE.CubeGeometry( size, size, size );\r\n  var materialArray = [];\r\n  for (var i = 0; i < 6; i++)\r\n  {\r\n    var mat = new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture( cubeTexUrls[i] ), side: THREE.BackSide });\r\n    materialArray.push( mat );\r\n  }\r\n  var skyMaterial = new THREE.MeshFaceMaterial( materialArray );\r\n  var skyBox = new THREE.Mesh( skyGeometry, skyMaterial );\r\n  skyBox.receiveShadow = true;\r\n  skyBox.rotation.y = 180;\r\n  scene.add( skyBox );\r\n\r\n  \/\/ ground\r\n  var planeGeo = new THREE.PlaneGeometry(size, size);\r\n  var texture = THREE.ImageUtils.loadTexture( "tex\/ground.jpg", null, onLoadGround )\r\n  texture.wrapS = THREE.RepeatWrapping;\r\n  texture.wrapT = THREE.RepeatWrapping;\r\n  texture.repeat.set( 64, 48 );\r\n  var mat = new THREE.MeshLambertMaterial({map:texture});\r\n  var plane = new THREE.Mesh( planeGeo, mat );\r\n  plane.rotation.x = - Math.PI \/ 2\r\n  plane.position.y = -2;\r\n  plane.receiveShadow = true;\r\n  scene.add( plane );<\/pre>\n
\u30dc\u30bf\u30f3\u3092\u4f5c\u6210\u3057\u30af\u30ea\u30c3\u30af\u3067 Mesh.Material \u3092\u5909\u66f4\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u3002<\/p>\n
\r\n\u3000var buttons = document.getElementById( "buttons" );\r\n  for ( var key in materials )\r\n  {\r\n    var button = document.createElement( 'button' );\r\n    button.textContent = key;\r\n    \/\/ \u30de\u30c6\u30ea\u30a2\u30eb\u306e\u5207\u308a\u66ff\u3048\r\n    button.addEventListener( 'click', function ( event ) {\r\n      bodyMesh.material = materials[ this.textContent ];\r\n    }, false );\r\n    buttons.appendChild( button );\r\n  }<\/pre>\n
\u8aad\u307f\u8fbc\u307f\u304b\u3089\u8868\u793a\u307e\u3067\u306e\u4e00\u9023\u306e\u624b\u9806\u306f\u4ee5\u4e0a\u306e\u3088\u3046\u306a\u611f\u3058\u3067\u3059\u3002
\n\u305d\u308c\u306b\u3057\u3066\u3082\u52d5\u4f5c\u304c\u91cd\u3044\u306e\u304c\u306a\u3093\u3068\u3082\u304b\u3093\u3068\u3082\u2026<\/p>\n
        
Facebook \u306b\u30b7\u30a7\u30a2<\/a><\/div>        
Tweet<\/a><\/div><\/div>\n
\n","protected":false},"excerpt":{"rendered":"
\u524d\u56de\u306e\u8a18\u4e8b \u3067\u306f json \u5f62\u5f0f\u306e\u30e2\u30c7\u30eb\u3092\u8aad\u307f\u8fbc\u3093\u3067\u30de\u30c6\u30ea\u30a2\u30eb\u3092\u8a2d\u5b9a\u3059\u308b\u65b9\u6cd5\u306e\u30c7\u30e2\u3067\u3057\u305f\u304c\u3001\u4eca\u56de\u306f \u3053\u3061\u3089 \u304b\u3089\u5165\u624b\u3055\u305b\u3066\u3044\u305f\u3060\u3044\u305f Wavefront(obj) \u5f62\u5f0f\u306e\u30e2\u30c7\u30eb\u3092\u4f7f\u7528\u3057\u3066\u540c\u69d8\u306e\u30c7\u30e2\u3092\u4f5c\u6210\u3057\u3066\u307f\u307e\u3057\u305f\u3002 t […]<\/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\/1389"}],"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=1389"}],"version-history":[{"count":11,"href":"https:\/\/www.digifie.jp\/blog\/wp-json\/wp\/v2\/posts\/1389\/revisions"}],"predecessor-version":[{"id":1401,"href":"https:\/\/www.digifie.jp\/blog\/wp-json\/wp\/v2\/posts\/1389\/revisions\/1401"}],"wp:attachment":[{"href":"https:\/\/www.digifie.jp\/blog\/wp-json\/wp\/v2\/media?parent=1389"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.digifie.jp\/blog\/wp-json\/wp\/v2\/categories?post=1389"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.digifie.jp\/blog\/wp-json\/wp\/v2\/tags?post=1389"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}