WebGL(three.js)でのモデルの表示される高さを変更する方法について

前提・実現したいこと

WebGLの技術を使用し、動く街を作りたいと思っています。

発生している問題・エラーメッセージ

以下のコードを自作しました。
真ん中にある長方形のものを地面と同じ高さにしたい→モデルが表示される高さを変更したい　
と思ったのですが、どうすれば良いかわかりません。
Googleで検索をしてみたのですが、日本語のWebGLに関する資料が少な過ぎて解決しませんでした。

該当のソースコード

HTML
1
2<html>
3  <head>
4    <meta charset="utf-8" />
5    <script src="https://unpkg.com/three@0.131.3/build/three.min.js"></script>
6    <script src="https://unpkg.com/three@0.131.3/examples/js/controls/OrbitControls.js"></script>
7    <script>
8      // ページの読み込みを待つ
9      window.addEventListener('load', init);
10
11      function init() {
12        // サイズを指定
13        const width = 960;
14        const height = 540;
15
16        const canvasElement = document.querySelector('#myCanvas');
17        // レンダラーを作成
18        const renderer = new THREE.WebGLRenderer({
19          canvas: canvasElement,
20        });
21        renderer.setSize(width, height);
22
23        // シーンを作成
24        const scene = new THREE.Scene();
25
26        // カメラを作成
27        const camera = new THREE.PerspectiveCamera(45, width / height);
28        // カメラの初期座標を設定
29        camera.position.set(0, 0, 1000);
30
31        // カメラコントローラーを作成
32        const controls = new THREE.OrbitControls(camera, canvasElement);
33
34        // 滑らかにカメラコントローラーを制御する
35        controls.enableDamping = true;
36        controls.dampingFactor = 0.2;
37
38        // 平行光源を作成
39        const directionalLight = new THREE.DirectionalLight(0xffffff);
40        directionalLight.position.set(1, 1, 1);
41        scene.add(directionalLight);
42        
43        //いじった。
44        // 地面を作成
45        const floor1 = new THREE.GridHelper(600,1000,900);
46        scene.add(floor1);
47        //const floor2 = new THREE.AxesHelper(300);
48        //scene.add(floor2);
49
50        const group = new THREE.Group();
51        scene.add(group);
52        //ここまで
53        
54        // 形状とマテリアルからメッシュを作成します
55        const mesh = new THREE.Mesh(new THREE.BoxGeometry(60, 60, 300 ,20), new THREE.MeshNormalMaterial());
56        scene.add(mesh);
57        
58
59        tick();
60
61        // 毎フレーム時に実行されるループイベントです
62        function tick() {
63          //mesh.rotation.y += 0.01;
64          
65          //ZZ++
66           mesh.translateZ(0.5);
67          //mesh.translateX(0.1);
68
69          // カメラコントローラーを更新
70          controls.update();
71
72          // レンダリング
73          renderer.render(scene, camera);
74
75          requestAnimationFrame(tick);
76        }
77      }
78    </script>
79  </head>
80  <body>
81    <canvas id="myCanvas"></canvas>
82  </body>
83</html>
84

試したこと

色々なウェブサイトを確認した。

https://ics.media/tutorial-three/quickstart/

https://wgld.org/

補足情報（FW/ツールのバージョンなど）

文章がわかりにくかったり、質問内容に不備がある場合は教えてください。訂正させていただきます。

行動規範の内容に同意します

回答1件

ベストアンサー

真ん中にある長方形のものを地面と同じ高さにしたい→モデルが表示される高さを変更したい　

こういうことでしょうか？

■ 変更前

■ 変更後

■ ソース

javascript
1const mesh = new THREE.Mesh(new THREE.BoxGeometry(60, 60, 300 ,20), new THREE.MeshNormalMaterial());
2mesh.position.y = -60/2; // 位置を調整
3scene.add(mesh);

投稿2021/09/05 12:55

cx20

総合スコア4648

byayo907

2021/09/05 13:11

その通りです。ありがとうございます。 Mesh.position.yを使えば良いのですね。ついでにお聞きしたいのですが、このようなthree.jsのことがよく書いてある日本語のサイトはありますでしょうか。

cx20

2021/09/05 13:47

> Mesh.position.yを使えば良いのですね。そうですね。もしくは、 `Mesh.posistion.set(x, y, z)` という書き方もできます。 > このようなthree.jsのことがよく書いてある日本語のサイト有名どころだと＜入門記事＞ ■ Three.js入門サイト https://ics.media/tutorial-three/ ■ Three.js Fundamentals (日本語訳版) https://threejsfundamentals.org/threejs/lessons/ja/ あたりでしょうか。個人的には、Three.js の公式サンプルでやりたいことに近いサンプルを見つけて、それの実装を眺めるのが良いかな、と思います。 ■ Three.js 公式サンプル https://threejs.org/examples/ ただ、Three.js は仕様の変化が激しいので、ライブラリのバージョン上げたら動かなくなった（メソッドがなくなった、名称が変わった、等）が良くあります。その際は、バージョン間の仕様変更を確認することになるかと思います。 ■ Migration Guide https://github.com/mrdoob/three.js/wiki/Migration-Guide 以下は、その他、参考情報です。＜本＞ ■ 初めてのThree.js 第2版 https://www.amazon.co.jp/dp/4873117704/ ＜Slack＞ ■ webgl-jp https://webgl-jp.slack.com ＜Qiita＞ ■ three.js - Qiita https://qiita.com/tags/three.js

byayo907

2021/09/05 14:39

丁寧に教えていただき、本当にありがとうございます。今後の学習の参考にさせていただきます！今後も、よろしくお願いします。

行動規範の内容に同意します