Hatena 블로그에 3D 모델을 표시하고 싶습니다.

결론부터 먼저

움직이는 곳
소스 코드

소개

취미로 만든 미소녀의 3D 모델을 하테나 블로그(우울증으로 죽을 것)에 이미지로 투고하고 있다.
아직 일주일도 지나지 않았지만, 0액세스가 계속되고 있는 것은 슬프다・・・

3D 모델을 표시하고 멋지게하고 싶습니다.

3D모델을 표시할 수 있다면 이미지 페타페타의 블로그보다 멋지고 있는 블로그를 할 수 있지 않을까.
그렇게 하면, 액세스수도 늘어나지 않을까.

··· 그런 사악한 기분으로, 하테나 블로그에 3D 모델을 표시해 나가려고 한다.

Hatena 블로그에서 Three.js를 사용해보십시오.

우선은 3D모델의 표시를 제외한 Three.js를 시험해 보는, 이것이 할 수 없으면 이야기가 되지 않는다.
아래 코드를 HTML 편집 텍스트 상자에 넣습니다.

sample.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
<script>
  window.addEventListener("load", init)

  function init() {
    // キャンバスサイズ
    const width = 512
    const height = 512

    // レンダラーの作成
    const renderer = new THREE.WebGLRenderer({ canvas: document.querySelector("canvas") })
    renderer.setPixelRatio(window.devicePixelRatio)
    renderer.setSize(width, height)
    // シーンの作成
    const scene = new THREE.Scene()
    // カメラの作成
    const camera = new THREE.PerspectiveCamera(45, width / height)

    // 箱の作成
    const geometry = new THREE.BoxGeometry(10, 10, 10)
    const material = new THREE.MeshNormalMaterial()
    const box = new THREE.Mesh(geometry, material)
    scene.add(box)

    // レンダリング
    camera.position.set(100, 100, 100)
    camera.lookAt(box.position)
    renderer.render(scene, camera)
  }
</script>
<canvas id="canvas"></canvas>

표시 결과

할 수 있다! !
이것이 가능하다는 것은, 나중에 조금으로 3D모델을 표시할 수 있을 것 같다.

Hatena 블로그에 3D 모델 표시

마찬가지로 다음 코드를 HTML 편집에 넣습니다.

sample.html

<input id="view" type="button" value="3Dモデルを表示する" />（※表示に5秒前後かかるよ）<br>
<canvas id="three"></canvas><br>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/s/wtcer7wh4pz0sxj/OBJLoader.js"></script>
<script src="https://dl.dropboxusercontent.com/s/i3exk9p5ddeuokq/OrbitControls.js"></script>
<script type="text/javascript">
  document.getElementById("view").addEventListener("click", init);

  function init() {
    // キャンバスサイズ
    const width = 512
    const height = 512

    // レンダラーの作成
    const renderer = new THREE.WebGLRenderer({ canvas: document.querySelector("#three") })
    renderer.setPixelRatio(window.devicePixelRatio)
    renderer.setSize(width, height)
    renderer.setClearColor(new THREE.Color(0xffffff))
    // シーンの作成
    const scene = new THREE.Scene()
    // カメラの作成
    const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10000)
    camera.position.set(0, 0, 100)
    // カメラコントローラの作成
    const controls = new THREE.OrbitControls(camera)

    // OBJファイルの読み込み
    const loader = new THREE.OBJLoader()
    loader.load("https://dl.dropboxusercontent.com/s/nvm2xo3am3kx8eu/bishojo5.OBJ",
      (object) => {
        // 読み込み後シーンに追加
        object.position.set(0, 25, 0)
        object.scale.set(25, 25, 25)
        scene.add(object)

        renderer.render(scene, camera)
      })

    animation()
    // カメラコントロールを反映させる、描画処理
    function animation() {
      renderer.render(scene, camera)
      requestAnimationFrame(animation)
    }
  }
</script>

표시 결과

할 수 있었다! ! ! ! !
텍스처라든지 머티리얼의 설정하지 않기 때문에, 새까만이지만 360도 어느 방향에서도 볼 수 있다.

확인한 환경

Chrome(Windows)에서는 (아마) 문제없이 표시할 수 있었다.
하지만, 스마트폰의 Safari(iOS)에서는 세로의 플릭이 스크롤에 빨려 잘 표시의 회전을 할 수 없었다. 스마트폰에 대응할 때는 화면의 스크롤을 제한하거나의 대책이 필요할지도 모른다(하테나 블로그로 할 수 있을지는 모른다)

여담

파일의 위치

제일 이것이 곤란했지만, 하테나 블로그에서는 화상 이외의 파일의 업로드를 할 수 없었다. 즉, JavaScript의 소스는 물론, 3D모델 파일도 업로드할 수 없다.
어쩔 수 없기 때문에, GoogleDrive의 일반 공개로 속임수하면서 실장하려고 하면, CORS로 연주되었다.
어떻게 했는지 생각했지만, DropBox의 계정을 만들어 DropBox의 공유 링크로 구현하면 어떻게든 움직였다.

모델을 읽으려면 OBJLoader.js가 필요하지만 이것도 Three.js와 같이 핫 링크로 처리하고 싶었지만 Node.js 용 CDN 밖에 없어 포기했다.

Hatena 블로그 및 JavaScript

당연히 터무니없는 블로그에서의 스크립트 편집은 예측 효과가 없거나, 미리 보기 끼지 않으면 표시의 확인을 할 수 없거나에서 뼈가 부러진다. Three.js의 시험으로 상자를 표시했을 때에 상당히 위장했다. 솔직히 말하고, 더 이상하고 싶지 않습니다 ...

그리고, 하테나 블로그에 한정한 이야기는 아닐지도 모르지만, CORS라든지 Button에 직접 onClick 사용할 수 없거나는, JavaScript에 와카나의 자신에게는 찔렀다(반나절 정도 소비했다).

끝에

첫 투고이므로 작법적으로 이르지 않는 점이라든지, 규약적으로 위험한 부분이 있으면 가르쳐 주세요. 신속하게 수정하고 싶습니다.

실제로 움직이고 있는 곳은 미소녀 만드는 오 그 5.5~3D 모델을 표시해 본다~ 로 볼 수 있으므로, 좋으면 봐 주세요.