Three.jsで3D年賀状を作成したいです。
以下( http://coderecipe.jp/recipe/7PrRS8IMRb/ )の通りコードをコピペしたのですが動作させることが出来ません。何故でしょうか?
HTML
1<!DOCTYPE html> 2<meta charset="utf-8"> 3<title>Happy New Year 2015</title> 4<!-- three.min.js --> 5<script src="http://threejs.org/build/three.min.js"></script> 6<script src="index.js"></script>
JavaScript
1// Jumping Sheep by cx20 2// http://kyucon.com/qblock/#/63138 3// 4var dataSet = [ 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 30function init() { 31 container = document.createElement('div'); 32 document.body.appendChild(container); 33 34 // カメラを作成する 35 camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000); 36 camera.position.x = 0; 37 camera.position.y = 0; 38 camera.position.z = 500; 39 40 // シーンを作成する 41 scene = new THREE.Scene(); 42 43 // 立体ドット絵を作成する 44 group = createSheep(); 45 46 // シーンに立体ドット絵を追加する 47 scene.add(group); 48 49 // ライトを作成する 50 var light = new THREE.DirectionalLight(0xffffff); 51 light.position.set(0, 0, 10).normalize(); 52 scene.add(light); 53 54 // レンダラーを作成する 55 renderer = new THREE.WebGLRenderer(); 56 57 // 背景色を指定する(空色に変更する) 58 renderer.setClearColor(0x4584b4); 59 60 // レンダラーのサイズを指定する 61 renderer.setSize(window.innerWidth, window.innerHeight); 62 63 // HTML との紐づけを行う 64 container.appendChild(renderer.domElement); 65} 66 67function createSheep() { 68 // 立体ドット絵をグループ化して返却する 69 var group = new THREE.Object3D(); 70 71 // 箱を用意する 72 var geometry = new THREE.BoxGeometry(DOT_SIZE * 0.9, DOT_SIZE * 0.9, DOT_SIZE * 0.9); 73 74 // ドット絵の枚数ぶんループする 75 for (var j = 0; j < dataSet.length; j++) { 76 77 // ドット絵1枚のドット数ぶんループする 78 for (var i = 0; i < dataSet[j].length; i++) { 79 80 // ドット絵の表示座標を計算する 81 var x = (i % 16) * DOT_SIZE + X_START_POS; 82 var y = (16 - Math.floor(i / 16)) * DOT_SIZE + Y_START_POS; 83 var z = j * DOT_SIZE + Z_START_POS; 84 85 // ドット絵の色を取得する("赤"→"#ff0000"に変換する) 86 var color = getRgbColor(dataSet[j][i]); 87 88 // ドットが "×" でなければ 89 if (dataSet[j][i] != "×") { 90 // 色を指定する 91 var material = new THREE.MeshLambertMaterial({color: color}); 92 93 // 箱に色をつける 94 var mesh = new THREE.Mesh(geometry, material); 95 96 // 箱の位置を指定する 97 mesh.position.x = x; 98 mesh.position.y = y; 99 mesh.position.z = z; 100 101 // グループ化する 102 group.add(mesh); 103 } 104 } 105 } 106 107 // 立体ドット絵を返却する 108 return group; 109} 110 111function render() { 112 // 立体ドット絵をY軸に回転させる 113 group.rotation.y += Math.PI / 180; 114 115 // 表示を更新する 116 renderer.render(scene, camera); 117}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/08/15 07:48