Three.js scale(大きさ)
今回は、Three.jsの「scale(大きさ)」について書きます。
scaleを使うと、物体(球,立方体など)の大きさを変更できます。
scaleを使わず、このようなソースコードで実行した場合は、
//「立方体」の生成 var cube = new THREE.Mesh( //立方体の大きさ(300,300,300) new THREE.CubeGeometry(300,300,300), new THREE.MeshPhongMaterial({ color: 0x990000 //球の色 })); //sceneにcubeを追加 scene.add(cube); //「地面」の生成 var plane = new THREE.Mesh( new THREE.CircleGeometry(1000, 100), new THREE.MeshLambertMaterial({ side: THREE.DoubleSide, color: 0x990000 })); plane.position.set(0,0,1); scene.add(plane); //XYZ軸の表示(長さ) var axis = new THREE.AxisHelper(1000); scene.add(axis); axis.position.set(0,0,1);
こうなります。(立方体には、分かりやすくするためにテクスチャを使用しています。)
で、scaleを使うと、
こうなります。
立方体が大きくなりました。
このように、scaleを使うと、簡単に物体のサイズが変更できます。
scaleの書き方は、
オブジェクト名.scale.set(x軸方向の大きさ,y軸方向の大きさ,z軸方向の大きさ);
オブジェクト名.scale.x = x軸方向の大きさ; オブジェクト名.scale.y = y軸方向の大きさ; オブジェクト名.scale.z = z軸方向の大きさ;
この2通りあります。
実際のソースコードは、こんな感じです。
//「立方体」の生成 var cube = new THREE.Mesh( //立方体の大きさ(300,300,300) new THREE.CubeGeometry(300,300,300), new THREE.MeshPhongMaterial({ color: 0x990000 //球の色 })); //sceneにcubeを追加 scene.add(cube); //scale約2倍の大きさに変更 cube.scale.set(2,2,2);
このコードは、立方体の大きさを2倍にしています。
他にも、こういう風に書きますと、
//「立方体」の生成 var cube = new THREE.Mesh( //立方体の大きさ(300,300,300) new THREE.CubeGeometry(300,300,300), new THREE.MeshPhongMaterial({ color: 0x990000 //球の色 })); //sceneにcubeを追加 scene.add(cube); cube.scale.x = 2; cube.scale.y = 0.2;
こんなのが出来ます!
scaleは、ちょっとした時に役に立ちます(多分(笑))
これで終わりです。
ご不明な点などがありましたら、遠慮なくご質問ください。
ありがとうございました!