今回、Windows7のパソコンでnode-three.jsをEclipseでステップ実行できるようにしました。
ここで、
- Node.jsはサーバーサイドのJavaScriptです。
- three.jsはWebGLを扱いやすくするライブラリ群です。
- node-three.jsはthree.jsをNode.jsで扱うためのライブラリ群です。
です。
以下の手順は、EclipseやNodeclipseプラグイン、Node.jsは事前にインストールされているという前提です。
目次
node-three.jsをGitHubから取得する
Eclipseの
「File」→「Import」→「Git」→「Projects from Git」→「Clone URI」
を選択します。
URIとして
GitHub - nulltask/node-three.js: Three.js for Node.js
Three.js for Node.js. Contribute to nulltask/node-three.js development by creating an account on GitHub.
github.com
を入力します。
そのまま「Import as general project」としてGitHubからcloneして入手します。
C:\Users\(ユーザー名)\git\node-three.jsにnode-three.jsがcloneされて入手できました。
Windowsの
「スタートメニュー」→「Node.js」→「Node.js command prompt」
を実行して、Node.js(npm)のコマンドプロンプトを起動します。
このまま、
GitHub - nulltask/node-three.js: Three.js for Node.js
Three.js for Node.js. Contribute to nulltask/node-three.js development by creating an account on GitHub.
github.com
のインストレーション手順通りにNode.jsのコマンドプロンプトからnpm install three.jsを実行するとエラーが出ます。
|
1 2 |
C:\Users\XXXX\git\node-three.js>npm install three.js npm WARN install Refusing to install three.js as a dependency of itself |
これは、当然です。
three.jsのフォルダの下でinstallを実行する際は、three.jsを引数につけてはいけません。
node-three.jsフォルダの下で引数なしで、npm installと実行します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
C:\Users\XXXX\git\node-three.js>npm install > canvas@1.1.6 install C:\Users\XXXX\git\node-three.js\node_modules\canvas > node-gyp rebuild C:\Users\XXXX\git\node-three.js\node_modules\canvas>node "C:\Program Files\n odejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gy p.js" rebuild Warning: Missing input files: C:\GTK\bin\zlib1.dll C:\GTK\bin\libexpat-1.dll C:\GTK\bin\libpng14-14.dll C:\GTK\bin\libcairo-2.dll C:\GTK\bin\libfontconfig-1.dll C:\GTK\bin\libfreetype-6.dll このソリューション内のプロジェクトを 1 度に 1 つずつビルドします。並行ビルドを有 効にするには、"/m" スイッチを追加してください。 Canvas.cc CanvasGradient.cc CanvasPattern.cc CanvasRenderingContext2d.cc c:\users\XXXX\git\node-three.js\node_modules\canvas\src\Canvas.h(19): fatal error C1083: include ファイルを開けません。'cairo/cairo.h': No such file or dir ectory [C: \Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] c:\users\XXXX\git\node-three.js\node_modules\canvas\src\Canvas.h(19): fatal error C1083: include ファイルを開けません。'cairo/cairo.h': No such file or dir |
エラーが発生しました。
これらのエラーはWindowsにGTK+のライブラリ群がインストールされていないために発生します。
http://www.gtk.org/download/win64.php
www.gtk.org
からGTK+の2.22のAll-in-one bundleであるgtk+-bundle_2.22.1-20101229_win64.zipをダウンロードして展開してC:\GTKとしておきます。
GTK+の最新版はVersion3系ですが、Version2.22を使います。
Version3系を使うと以下のエラーが表示されます。
|
1 2 3 4 5 6 7 8 9 10 11 |
LINK : fatal error LNK1181: 入力ファイル 'C:\GTK\lib\libpng.lib' を開けません。 [C:\Users\Ur ashita\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] gyp ERR! build error gyp ERR! stack Error: `C:\Windows\Microsoft.NET\Framework\v4.0.30319\msbuild.exe ` failed with exit code: 1 gyp ERR! stack at ChildProcess.onExit (C:\Program Files\nodejs\node_modules\ npm\node_modules\node-gyp\lib\build.js:267:23) gyp ERR! stack at ChildProcess.emit (events.js:98:17) gyp ERR! stack at Process.ChildProcess._handle.onexit (child_process.js:810: 12) |
これはC:\GTK\lib\libpng.libが存在しないためですが、GTK+がVersion2系とVersion3系ではファイル名が変更されたようです。
Version3系にはC:\GTK\lib\libpng.libは存在しません。
また、GTK+のVersion2系32bit版を使うと以下のエラーが発生します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 |
ライブラリ C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\Release\canvas.lib とオブジェクト C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\Release\canvas.exp を作成中 Canvas.obj : error LNK2001: 外部シンボル "png_write_info" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] Canvas.obj : error LNK2001: 外部シンボル "png_write_image" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] Canvas.obj : error LNK2001: 外部シンボル "__imp_cairo_pdf_surface_set_size" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] Canvas.obj : error LNK2001: 外部シンボル "png_destroy_write_struct" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] Canvas.obj : error LNK2001: 外部シンボル "png_set_bKGD" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] Canvas.obj : error LNK2001: 外部シンボル "__imp_cairo_pdf_surface_create_for_stream" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] Canvas.obj : error LNK2001: 外部シンボル "png_set_write_fn" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] Canvas.obj : error LNK2001: 外部シンボル "__imp_cairo_image_surface_create" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] Canvas.obj : error LNK2001: 外部シンボル "__imp_cairo_surface_finish" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] Canvas.obj : error LNK2001: 外部シンボル "__imp_cairo_status_to_string" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] Canvas.obj : error LNK2001: 外部シンボル "__imp_cairo_image_surface_get_stride" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] Canvas.obj : error LNK2001: 外部シンボル "png_write_end" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] Canvas.obj : error LNK2001: 外部シンボル "__imp_cairo_surface_flush" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] Canvas.obj : error LNK2001: 外部シンボル "png_get_io_ptr" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] Canvas.obj : error LNK2001: 外部シンボル "__imp_cairo_image_surface_get_format" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] Canvas.obj : error LNK2001: 外部シンボル "png_create_info_struct" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] Canvas.obj : error LNK2001: 外部シンボル "png_get_error_ptr" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] Canvas.obj : error LNK2001: 外部シンボル "png_set_longjmp_fn" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] Canvas.obj : error LNK2001: 外部シンボル "__imp_cairo_image_surface_get_height" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] Canvas.obj : error LNK2001: 外部シンボル "png_create_write_struct_2" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] Canvas.obj : error LNK2001: 外部シンボル "png_set_filler" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] Canvas.obj : error LNK2001: 外部シンボル "__imp_cairo_create" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] Canvas.obj : error LNK2001: 外部シンボル "png_set_packswap" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] Canvas.obj : error LNK2001: 外部シンボル "__imp_cairo_destroy" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] Canvas.obj : error LNK2001: 外部シンボル "png_set_filter" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] Canvas.obj : error LNK2001: 外部シンボル "png_error" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] Canvas.obj : error LNK2001: 外部シンボル "png_set_IHDR" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] Canvas.obj : error LNK2001: 外部シンボル "png_set_write_user_transform_fn" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] Canvas.obj : error LNK2001: 外部シンボル "__imp_cairo_surface_status" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] Canvas.obj : error LNK2001: 外部シンボル "__imp_cairo_surface_destroy" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] Canvas.obj : error LNK2001: 外部シンボル "__imp_cairo_image_surface_get_data" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] Canvas.obj : error LNK2001: 外部シンボル "png_set_compression_level" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] Canvas.obj : error LNK2001: 外部シンボル "__imp_cairo_image_surface_get_width" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasGradient.obj : error LNK2001: 外部シンボル "__imp_cairo_pattern_create_radial" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasGradient.obj : error LNK2001: 外部シンボル "__imp_cairo_pattern_add_color_stop_rgba" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasGradient.obj : error LNK2001: 外部シンボル "__imp_cairo_pattern_destroy" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasGradient.obj : error LNK2001: 外部シンボル "__imp_cairo_pattern_create_linear" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasPattern.obj : error LNK2001: 外部シンボル "__imp_cairo_pattern_create_for_surface" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_identity_matrix" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_set_antialias" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_set_font_size" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_get_dash" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_text_path" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_set_line_cap" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_in_fill" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_show_text" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_line_to" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_arc" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_set_source_rgba" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_get_group_target" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_close_path" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_set_operator" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_in_stroke" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_clip_preserve" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_pattern_get_filter" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_fill" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_set_miter_limit" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_get_line_width" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_restore" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_pop_group_to_source" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_set_line_join" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_move_to" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_pattern_set_extend" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_get_line_join" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_get_antialias" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_curve_to" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_paint_with_alpha" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_arc_negative" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_push_group" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_set_dash" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_get_source" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_set_line_width" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_get_miter_limit" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_get_dash_count" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_matrix_init" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_text_extents" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_rotate" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_set_source" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_fill_preserve" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_scale" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_get_current_point" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_pattern_set_filter" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_paint" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_transform" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_show_page" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_save" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_clip" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_rectangle" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_surface_mark_dirty_rectangle" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_append_path" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_stroke" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_font_extents" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_set_source_surface" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_select_font_face" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_get_line_cap" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_translate" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_copy_path_flat" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_path_destroy" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_stroke_preserve" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_get_operator" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] CanvasRenderingContext2d.obj : error LNK2001: 外部シンボル "__imp_cairo_new_path" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] Image.obj : error LNK2001: 外部シンボル "__imp_cairo_image_surface_create_from_png_stream" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] Image.obj : error LNK2001: 外部シンボル "__imp_cairo_image_surface_create_from_png" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] init.obj : error LNK2001: 外部シンボル "__imp_cairo_version_string" は未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\Release\canvas.node : fatal error LNK1120: 外部参照 104 が未解決です。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] gyp ERR! build error gyp ERR! stack Error: `C:\Windows\Microsoft.NET\Framework\v4.0.30319\msbuild.exe` failed with exit code: 1 gyp ERR! stack at ChildProcess.onExit (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\build.js:267:23) gyp ERR! stack at ChildProcess.emit (events.js:98:17) gyp ERR! stack at Process.ChildProcess._handle.onexit (child_process.js:810:12) gyp ERR! System Windows_NT 6.1.7601 gyp ERR! command "node" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" gyp ERR! cwd C:\Users\XXXX\git\node-three.js\node_modules\canvas gyp ERR! node -v v0.10.30 gyp ERR! node-gyp -v v0.13.1 gyp ERR! not ok npm ERR! canvas@1.1.6 install: `node-gyp rebuild` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the canvas@1.1.6 install script. npm ERR! This is most likely a problem with the canvas package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! node-gyp rebuild npm ERR! You can get their info via: npm ERR! npm owner ls canvas npm ERR! There is likely additional logging output above. npm ERR! System Windows_NT 6.1.7601 npm ERR! command "C:\\Program Files\\nodejs\\\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" npm ERR! cwd C:\Users\XXXX\git\node-three.js npm ERR! node -v v0.10.30 npm ERR! npm -v 1.4.21 npm ERR! code ELIFECYCLE npm ERR! npm ERR! Additional logging details can be found in: npm ERR! C:\Users\XXXX\git\node-three.js\npm-debug.log npm ERR! not ok code 0 |
32bit版を使うとこのようにリンクに失敗するので、必ずVersion2系の64bit版を使うようにします。
正しくVersion2系の64bit版のGTK+が設定できていると以下の通り、インストールに成功します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
> canvas@1.1.6 install C:\Users\XXXX\git\node-three.js\node_modules\canvas > node-gyp rebuild C:\Users\XXXX\git\node-three.js\node_modules\canvas>node "C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild このソリューション内のプロジェクトを 1 度に 1 つずつビルドします。並行ビルドを有効にするには、"/m" スイッチを追加してください。 Canvas.cc CanvasGradient.cc CanvasPattern.cc CanvasRenderingContext2d.cc color.cc Image.cc ImageData.cc init.cc ..\src\CanvasRenderingContext2d.cc(1256): warning C4344: 動作変更 : 明示的テンプレート引数を使用すると 'v8::Local<T> NanNew<v8::String,char*>(P)' への呼び出しを行います。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] with [ T=v8::String, P=char * ] 通常関数 'v8::Local<T> NanNew(const char *,int)' がより適合します。 with [ T=v8::String ] 'v8::Local<T> NanNew(const char *,int)' の呼び出しを指定する場合、それは明示的特殊化である必要があります。 with [ T=v8::String ] ..\src\CanvasRenderingContext2d.cc(1285): warning C4344: 動作変更 : 明示的テンプレート引数を使用すると 'v8::Local<T> NanNew<v8::String,char*>(P)' への呼び出しを行います。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] with [ T=v8::String, P=char * ] 通常関数 'v8::Local<T> NanNew(const char *,int)' がより適合します。 with [ T=v8::String ] 'v8::Local<T> NanNew(const char *,int)' の呼び出しを指定する場合、それは明示的特殊化である必要があります。 with [ T=v8::String ] ..\src\CanvasRenderingContext2d.cc(1314): warning C4344: 動作変更 : 明示的テンプレート引数を使用すると 'v8::Local<T> NanNew<v8::String,char*>(P)' への呼び出しを行います。 [C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\canvas.vcxproj] with [ T=v8::String, P=char * ] 通常関数 'v8::Local<T> NanNew(const char *,int)' がより適合します。 with [ T=v8::String ] 'v8::Local<T> NanNew(const char *,int)' の呼び出しを指定する場合、それは明示的特殊化である必要があります。 with [ T=v8::String ] PixelArray.cc ライブラリ C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\Release\canvas.lib とオブジェクト C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\Release\canvas.exp を作成中 コード生成しています。 コード生成が終了しました。 canvas.vcxproj -> C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\Release\\canvas.node Copying C:/GTK/bin/libcairo-2.dll to C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\Release\\libcairo-2.dll 1 個のファイルをコピーしました。 Copying C:/GTK/bin/libfontconfig-1.dll to C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\Release\\libfontconfig-1.dll 1 個のファイルをコピーしました。 Copying C:/GTK/bin/libexpat-1.dll to C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\Release\\libexpat-1.dll 1 個のファイルをコピーしました。 Copying C:/GTK/bin/libfreetype-6.dll to C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\Release\\libfreetype-6.dll 1 個のファイルをコピーしました。 Copying C:/GTK/bin/libpng14-14.dll to C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\Release\\libpng14-14.dll 1 個のファイルをコピーしました。 Copying C:/GTK/bin/zlib1.dll to C:\Users\XXXX\git\node-three.js\node_modules\canvas\build\Release\\zlib1.dll 1 個のファイルをコピーしました。 canvas@1.1.6 node_modules\canvas 笏披楳笏� nan@1.2.0 |
これでnode-three.jsのインストールは完了です。
jsdomを古いバージョンに置き換える
C:\Users\XXXX\git\node-three.js\examples\canvas_particles_random
にサンプルモジュールがあるのでEclipseからデバッグ実行してみます。
Eclipseからindex.jsを選択して
「右クリック」→「Debug As」→「Node Application」
を実行します。
コンソールに以下のエラーが表示されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
debugger listening on port 5858 C:\Users\XXXX\git\node-three.js\lib\three.js:9 , window = document.createWindow() ^ TypeError: Object [ null ] has no method 'createWindow' at Object.<anonymous> (C:\Users\XXXX\git\node-three.js\lib\three.js:9:23) at Module._compile (module.js:456:26) at Object.Module._extensions..js (module.js:474:10) at Module.load (module.js:356:32) at Function.Module._load (module.js:312:12) at Module.require (module.js:364:17) at require (module.js:380:17) at Object.<anonymous> (C:\Users\XXXX\git\node-three.js\index.js:2:18) at Module._compile (module.js:456:26) at Object.Module._extensions..js (module.js:474:10) |
どうやら、jsdomのバージョンがversion1.0.0-pre.7を使っており、バージョンが新しすぎるようです。
jsdomの1.0.0-pre.7をアンインストールしてjsdomの0.11.1をインストールします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
C:\Users\XXXX\git\node-three.js>npm uninstall jsdom unbuild jsdom@1.0.0-pre.7 C:\Users\XXXX\git\node-three.js>npm install jsdom@0.11.1 > contextify@0.1.9 install C:\Users\XXXX\git\node-three.js\node_modules\jsdo m\node_modules\contextify > node-gyp rebuild C:\Users\XXXX\git\node-three.js\node_modules\jsdom\node_modules\contextify>n ode "C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modul es\node-gyp\bin\node-gyp.js" rebuild このソリューション内のプロジェクトを 1 度に 1 つずつビルドします。並行ビルドを有 効にするには、"/m" スイッチを追加してください。 contextify.cc c:\Program Files (x86)\Microsoft Visual Studio 10.0\VC\include\xlocale(323): wa rning C4530: C++ 例外処理を使っていますが、アンワインド セマンティクスは有効には なりません。/EHsc を指定してください。 [C:\Use rs\XXXX\git\node-three.js\node_modules\jsdom\node_modules\contextify\build\ contextify.vcxproj] C:\Users\XXXX\git\node-three.js\node_modules\jsdom\node_modules\contextify\ node_modules\nan\nan.h(1221): warning C4267: '引数' : 'size_t' から 'int' に変換 しました。デ ータが失われているかもしれません。 [C:\Users\XXXX\git\node-three.js\node_mod ules\jsdom\node_ modules\contextify\build\contextify.vcxproj] C:\Users\XXXX\git\node-three.js\node_modules\jsdom\node_modules\contextify\ node_modules\nan\nan.h(1247): warning C4267: '引数' : 'size_t' から 'int' に変換 しました。デ ータが失われているかもしれません。 [C:\Users\XXXX\git\node-three.js\node_mod ules\jsdom\node_ modules\contextify\build\contextify.vcxproj] C:\Users\XXXX\.node-gyp\0.10.30\deps\v8\include\v8.h(184): warning C4506: イ ンライン関数 'v8::Persistent<T> v8::Persistent<T>::New(v8::Handle<T>)' は定義さ れていません。 [C :\Users\XXXX\git\node-three.js\node_modules\jsdom\node_modules\contextify\b uild\contextify.vcxproj] with [ T=v8::Object ] C:\Users\XXXX\.node-gyp\0.10.30\deps\v8\include\v8.h(184): warning C4506: イ ンライン関数 'v8::Persistent<T> v8::Persistent<T>::New(v8::Handle<T>)' は定義さ れていません。 [C :\Users\XXXX\git\node-three.js\node_modules\jsdom\node_modules\contextify\b uild\contextify.vcxproj] with [ T=v8::FunctionTemplate ] ライブラリ C:\Users\XXXX\git\node-three.js\node_modules\jsdom\node_modu les\ contextify\build\Release\contextify.lib とオブジェクト C:\Users\XXXX\git\n ode-th ree.js\node_modules\jsdom\node_modules\contextify\build\Release\contextify.ex p を作成中 コード生成しています。 コード生成が終了しました。 contextify.vcxproj -> C:\Users\XXXX\git\node-three.js\node_modules\jsdom\ node_modules\contextify\build\Release\\contextify.node jsdom@0.11.1 node_modules\jsdom ├── xmlhttprequest@1.6.0 ├── cssom@0.3.0 ├── nwmatcher@1.3.3 ├── htmlparser2@3.7.3 (domelementtype@1.1.1, entities@1.0.0, domutils@1.5.0, domhandler@2.2.0, readable-stream@1.1.13) ├── request@2.44.0 (caseless@0.6.0, json-stringify-safe@5.0.0, forever-agent@ 0.5.2, aws-sign2@0.5.0, stringstream@0.0.4, oauth-sign@0.4.0, tunnel-agent@0.4.0 , mime-types@1.0.2, node-uuid@1.4.1, qs@1.2.2, bl@0.9.3, tough-cookie@0.12.1, fo rm-data@0.1.4, hawk@1.1.1, http-signature@0.10.0) ├── cssstyle@0.2.14 └── contextify@0.1.9 (bindings@1.2.1, nan@1.3.0) C:\Users\XXXX\git\node-three.js> |
これでjsdomが古いバージョン0.11.1に置き換わりました。
Eclipseでnode-three.jsのサンプルを実行する
再度、デバッグ実行する前に一部
index.jsを修正します。
|
1 2 3 4 5 6 7 8 |
var fs = require('fs') , Particles = require('./particles') , particles = new Particles(1024, 768, 15) , curFrame = 0 /* , maxFrame = parseInt(process.argv[process.argv.length - 1] || 30, 10); */ maxFrame = 10; |
私の環境では、parseIntがNaNを返して、無限ループになってしまうので、maxFrame=10と変更しました。
Eclipseからindex.jsを選択して
「右クリック」→「Debug As」→「Node Application」
を実行します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
debugger listening on port 5858 THREE.CanvasRenderer 60 Writing... (1/10) Writing... (2/10) Writing... (3/10) Writing... (4/10) Writing... (5/10) Writing... (6/10) Writing... (7/10) Writing... (8/10) Writing... (9/10) Writing... (10/10) |
こんな感じで実行されます。
こんなPNGファイルが10個生成されます。
node-three.jsのまとめ
node-three.jsのプロジェクトは2013年1月から進捗がないようですが、ちょっと使いこんでみようと思います。
正直なところ、まだ、どの程度使えるのかわかりません。
プログラミングの無料レッスン体験
約8,000名の受講生と80社以上の導入実績のあるプログラミングやWebデザインのオンラインマンツーマンレッスンCodecamp
＜Codecampの特徴＞
1 現役エンジニアによる指導
2オンラインでのマンツーマン形式の講義
3大手企業にも導入されている実践的なカリキュラム
↓無料体験レッスン実施中です。
コメント