Three.jsを使って3D表示しようとしたらいきなりはまった件

スクリーンショット 2014-07-27 17.12.54
Three.js

最近Three.jsというのを勉強しはじめた。

きっかけは前回までやってたEve onlineのマーケットデータを解析した後に、視覚的にどこで何が売れてるのか表示しようとして苦戦してる時にたまたま 100,000 Starsというページをみて、今ブラウザでこんなことできるのかよ。。。 と思ってしまったからである。

とりあえず、本を買ってサンプルを動かしてということをやっていたのだが、なんかサンプルがうまくローカルで動かないことがあった。

 

本当はこうなる予定だった(このサンプルはhttps://github.com/mrdoob/three.js/からダウンロードできます)

Three-001

 

 

 

 

 

 

 

 

 

 

 

 

 

でも最初はこうだった

Three-002

 

 

 

 

 

 

 

 

 

 

 

 

 

最初はブラウザが悪いのかなとか、PCが悪いのかなとか思ってごちゃごちゃ調べてたけど、なんかローカルファイルのテクスチャを使ってる場合、うまく表示されないらしい。

サーバ上で動かして確認すればいいみたいだけど、回避策もあったので紹介する。

Chrome起動の際

C:\Program Files (x86)\Google\Chrome\Application>chrome.exe –allow-file-access-from-files

というようにする。これでローカル上でもきちんと表示されるようになりました。

うん、よかった

コメントはまだありません

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

AWS
Docker
ECS+ALBの動的ポートマッピングでダウンタイムのないデプロイを試してみた

はじめに 少し前に個人で作成しているWebサービスのインフラにDockerを使い始めました。 複数台 …

スクリーンショット 2016-01-09 20.02.08
Ruby on Rails
Capistrano3を利用してBitbucketプライベートリポジトリにあるRailsアプリをデプロイしてみた

Railsアプリを配置する際、毎回手作業で頑張って配置してきたが、そろそろ自動デプロイを・・・ とい …

MarketTreeViewのイメージ
Ruby on Rails
[Eve Online 3rd party app] Market Tree Viewの実装 [EOPES制作記]

Eve Online 3rd party app のEOPES を作り始めてから約3ヶ月が経ちました …