{"id":577,"date":"2022-06-26T00:28:19","date_gmt":"2022-06-25T15:28:19","guid":{"rendered":"https:\/\/ubun2m.com\/?p=577"},"modified":"2022-12-19T01:55:17","modified_gmt":"2022-12-18T16:55:17","slug":"%e7%b5%b5%e3%81%ae%e5%9f%ba%e7%a4%8e%e7%b7%b4%e7%bf%92%e3%81%ae%e5%9b%b3%e5%bd%a2%ef%bc%93%e7%a8%ae%e9%a1%9e%ef%bc%88%e7%ae%b1%e3%80%81%e5%86%86%e6%9f%b1%e3%80%81%e7%90%83%e4%bd%93%ef%bc%89%e3%80%90ja","status":"publish","type":"post","link":"https:\/\/ubun2m.com\/?p=577","title":{"rendered":"\u7d75\u306e\u57fa\u790e\u7df4\u7fd2\u306e\u56f3\u5f62\uff13\u7a2e\u985e\uff08\u7bb1\u3001\u5186\u67f1\u3001\u7403\u4f53\uff09\u3010Javascript , Three.js\u3011"},"content":{"rendered":"\n<p>\u57fa\u790e\u7df4\u7fd2\u7528\u306b\u30b7\u30f3\u30d7\u30eb\u306a\u30a2\u30d7\u30ea\u3092\u4f5c\u6210\u3057\u305f\u3002\u753b\u9762\u30af\u30ea\u30c3\u30af\u3067\u56f3\u5f62\u306e\u52d5\u304d\u304c\u505c\u6b62\u3059\u308b\u3002\u3082\u3046\u4e00\u5ea6\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u518d\u3073\u52d5\u304f\u3002\u5149\u6e90\u306f\u753b\u9762\u53f3\u4e0a\u3002<\/p>\n\n\n\n<script src=\".\/lib\/three.js\"><\/script>\n<script>\nwindow.addEventListener('DOMContentLoaded', init);\n\nfunction init() {\n  let canvas  = document.getElementById('canvas');\n  let moveFlag = 1;\n\n  canvas.addEventListener('click',  function(e){\n    moveFlag = 1- moveFlag;\n  }, false);\n\n  let width = 400;\n  if(screen.width < width){\n   width = screen.width - 20;\n  }\n  const height = 1000;\n\n  \/\/ \u30ec\u30f3\u30c0\u30e9\u30fc\u3092\u4f5c\u6210\n  const renderer = new THREE.WebGLRenderer({\n    canvas: document.querySelector('#canvas')\n  });\n  renderer.setPixelRatio(window.devicePixelRatio);\n  renderer.setSize(width, height);\n\n  \/\/ \u30b7\u30fc\u30f3\u3092\u4f5c\u6210\n  const scene = new THREE.Scene();\n  scene.background = new THREE.Color( 0xF0F0F0 );\n\n  \/\/ \u30ab\u30e1\u30e9\u3092\u4f5c\u6210\n  const camera = new THREE.PerspectiveCamera(45, width \/ height, 1, 10000);\n  camera.position.set(0, 0, +4000);\n\n  \/\/ \u7bb1\u3092\u4f5c\u6210\n  const geometry = new THREE.BoxGeometry(500, 500, 500);\n  const material = new THREE.MeshStandardMaterial({color: ConvertRGBtoHex(getRandomInt(256),getRandomInt(256),getRandomInt(256))});\n  const box = new THREE.Mesh(geometry, material);\n  box.position.set(0,1000,0);\n  scene.add(box);\n\n  \/\/ \u5186\u67f1\u3092\u4f5c\u6210\n  \/\/ \u4e0a\u9762\u534a\u5f84,\u4e0b\u9762\u534a\u5f84,\u9ad8\u3055,\u5186\u5468\u5206\u5272\u6570     \n  const cylinder = new THREE.Mesh(                                     \n     new THREE.CylinderGeometry(250,250,600,32),                         \n     new THREE.MeshStandardMaterial({                                      \n               color: ConvertRGBtoHex(getRandomInt(256),getRandomInt(256),getRandomInt(256)),\n               flatShading: true,\n      }));\n  cylinder.position.set(0,0,0);\n  cylinder.flatShading = 1;\n  scene.add(cylinder); \n\n  \/\/ \u30ab\u30d7\u30bb\u30eb\u578b\u3092\u4f5c\u6210\n  \/\/ radius : Float, length : Float, capSubdivisions : Integer, radialSegments : Integer\n  const capsule = new THREE.Mesh(\n        new THREE.CapsuleGeometry( 250, 250, 10, 32 ),\n        new THREE.MeshStandardMaterial({\n                   color: ConvertRGBtoHex(getRandomInt(256),getRandomInt(256),getRandomInt(256)),\n                   flatShading: 1,\n        }));\n  capsule.position.set(0,-1000,0);\n  scene.add( capsule );\n\n  \/\/HemisphereLight ( groundColor, color, intensity, position )\n  const light = new THREE.DirectionalLight(0xFFFFFF);\n  light.intensity = 1; \/\/ \u5149\u306e\u5f37\u3055\u3092\u500d\u306b\n  light.position.set(1, 1, 1);\n  \/\/ \u30b7\u30fc\u30f3\u306b\u8ffd\u52a0\n  scene.add(light);\n\n  \/\/ \u74b0\u5883\u5149\u6e90\n  const light2 = new THREE.AmbientLight(0x333333); \n  light2.intensity = 1.5; \/\/ \u5149\u306e\u5f37\u3055\u3092\u500d\u306b\n  \/\/light.position.set(1, 1, 1);\n  \/\/ \u30b7\u30fc\u30f3\u306b\u8ffd\u52a0\n  scene.add(light2);\n\n    \/\/\u80cc\u666f\u30b0\u30ea\u30c3\u30c9\n    var grid = new THREE.GridHelper( 4000, 40 );\n    grid.geometry.rotateX( Math.PI \/ 2 );\n    var vector = new THREE.Vector3( 0, 0, 0 );\n    grid.lookAt( vector );\n    grid.position.set(0,0,-500);\n    scene.add( grid );\n\n  \/\/ \u521d\u56de\u5b9f\u884c\n  tick();\n\n  function tick() {\n    requestAnimationFrame(tick);\n    if(moveFlag){\n    \/\/ \u7bb1\u3092\u56de\u8ee2\u3055\u305b\u308b\n    box.rotation.x += 0.01;\n    box.rotation.y += 0.01;\n    box.rotation.z += 0.01;\n\n    \/\/ \u5186\u67f1\u3092\u56de\u8ee2\u3055\u305b\u308b\n    cylinder.rotation.x += 0.01;\n    cylinder.rotation.y += 0.01;\n    cylinder.rotation.z += 0.01;\n\n    \/\/ \u30ab\u30d7\u30bb\u30eb\u4f53\u3092\u56de\u8ee2\u3055\u305b\u308b\n    capsule.rotation.x += 0.01;\n    capsule.rotation.y += 0.01;\n    capsule.rotation.z += 0.01;\n\n    }\n    \/\/ \u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\n    renderer.render(scene, camera);\n  }\n  function createLine(){\n    const size = 10;\n    const divisions = 10;\n    const gridHelper = new THREE.GridHelper( size, divisions );\n    scene.add( gridHelper );\n  }\n\n  function ColorToHex(color) {\n  var hexadecimal = color.toString(16);\n  return hexadecimal.length == 1 ? \"0\" + hexadecimal : hexadecimal;\n  }\n  \/\/ RGB\u309216bit\u30ab\u30e9\u30fc\u306b\u5909\u63db\n  function ConvertRGBtoHex(red, green, blue) {\n  return \"#\" + ColorToHex(red) + ColorToHex(green) + ColorToHex(blue);\n  }\n  function getRandomInt(max) {\n  return Math.floor(Math.random() * max);\n  }\n}\n<\/script>\n<canvas id=\"canvas\"><\/canvas>\n\n\n\n<h4 class=\"wp-block-heading\">\u53c2\u8003\u8cc7\u6599<\/h4>\n\n\n\n<div class=\"affiliate-box\"><div class=\"affiliate-containar\"><a href=\"https:\/\/amzn.to\/3WsTTox\" rel=\"nofollow\"><img decoding=\"async\" style=\"border: none;\" src=\"https:\/\/m.media-amazon.com\/images\/I\/51l0To1VuML.jpg\" target=\"_blank\"><\/a><div class=\"affiliate-content\"><a href=\"https:\/\/amzn.to\/3WsTTox\" rel=\"nofollow\">\u7d75\u304c\u3075\u3064\u3046\u306b\u4e0a\u624b\u304f\u306a\u308b\u672c\u3000\u306f\u3058\u3081\u306e\u4e00\u6b69\u00d7\u4e0a\u624b\u3044\u7d75\u306e\u6280\u8853\u00d7\u5b89\u5b9a\u3057\u3066\u7a3c\u3050\u79d8\u8a23 Kindle\u7248<\/a><ul class=\"affiliate-button\"><li><a href=\"https:\/\/amzn.to\/3WsTTox\" rel=\"nofollow\">Amazon<\/a><\/li><\/ul><\/div><\/div><\/div>\n\n\n\n<p><br>\u30fbDelftstack - JavaScript \u3067 RGB \u3092 HEX \u306b\u5909\u63db\u3059\u308b<\/p>\n\n\n\n<p><a href=\"https:\/\/www.delftstack.com\/ja\/howto\/javascript\/rgb-to-hex-javascript\/\">https:\/\/www.delftstack.com\/ja\/howto\/javascript\/rgb-to-hex-javascript\/<\/a><\/p>\n\n\n\n<p>\u30fbThree.js\u3092\u4f7f\u3063\u3066\u3001\u4f5c\u3063\u3066\u307f\u305f by gupru\u6c0f<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-hatena-blog wp-block-embed-hatena-blog\"><div class=\"wp-block-embed__wrapper\">\n<iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" title=\"Three.js\u3000CylinderGeometry\uff08\u5186\u67f1\uff09 - Three.js\u3092\u4f7f\u3063\u3066\u3001\u4f5c\u3063\u3066\u307f\u305f\" src=\"https:\/\/hatenablog-parts.com\/embed?url=https%3A%2F%2Fgupuru.hatenablog.jp%2Fentry%2F2013%2F12%2F15%2F204613#?secret=IrbBr2NIWX\" data-secret=\"IrbBr2NIWX\" scrolling=\"no\" frameborder=\"0\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>\u30fbICS MEDIA - \u6700\u65b0\u7248\u3067\u5b66\u3076Three.js\u5165\u9580\u3000\u624b\u8efd\u306bWebGL\u3092\u6271\u3048\u308b3D\u30e9\u30a4\u30d6\u30e9\u30ea<\/p>\n\n\n\n<p><a href=\"https:\/\/ics.media\/entry\/14771\/\">https:\/\/ics.media\/entry\/14771\/<\/a><\/p>\n\n\n\n<p>\u30fbICS MEDIA - Three.js\u306e\u30b8\u30aa\u30e1\u30c8\u30ea\u306e\u57fa\u672c<\/p>\n\n\n\n<p><a href=\"https:\/\/ics.media\/tutorial-three\/geometry_general\">https:\/\/ics.media\/tutorial-three\/geometry_general<\/a><\/p>\n\n\n\n<p>\u30fbThreeJS - CapsuleGeometry<\/p>\n\n\n\n<p><a href=\"https:\/\/threejs.org\/docs\/#api\/en\/geometries\/CapsuleGeometry\">https:\/\/threejs.org\/docs\/#api\/en\/geometries\/CapsuleGeometry<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u57fa\u790e\u7df4\u7fd2\u7528\u306b\u30b7\u30f3\u30d7\u30eb\u306a\u30a2\u30d7\u30ea\u3092\u4f5c\u6210\u3057\u305f\u3002\u753b\u9762\u30af\u30ea\u30c3\u30af\u3067\u56f3\u5f62\u306e\u52d5\u304d\u304c\u505c\u6b62\u3059\u308b\u3002\u3082\u3046\u4e00\u5ea6\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u518d\u3073\u52d5\u304f\u3002\u5149\u6e90\u306f\u753b\u9762\u53f3\u4e0a\u3002 \u53c2\u8003\u8cc7\u6599 \u7d75\u304c\u3075\u3064\u3046\u306b\u4e0a\u624b\u304f\u306a\u308b\u672c\u3000\u306f\u3058\u3081\u306e\u4e00\u6b69\u00d7\u4e0a\u624b\u3044\u7d75\u306e\u6280\u8853\u00d7\u5b89\u5b9a\u3057\u3066\u7a3c\u3050\u79d8\u8a23 Kindl [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":697,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3],"tags":[],"class_list":["post-577","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3"],"acf":[],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/ubun2m.com\/wp-content\/uploads\/2022\/06\/Screenshot-2022-06-25-at-19.17.16.png","_links":{"self":[{"href":"https:\/\/ubun2m.com\/index.php?rest_route=\/wp\/v2\/posts\/577","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ubun2m.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ubun2m.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ubun2m.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ubun2m.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=577"}],"version-history":[{"count":0,"href":"https:\/\/ubun2m.com\/index.php?rest_route=\/wp\/v2\/posts\/577\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ubun2m.com\/index.php?rest_route=\/wp\/v2\/media\/697"}],"wp:attachment":[{"href":"https:\/\/ubun2m.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=577"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ubun2m.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=577"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ubun2m.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=577"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}