質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.54%
Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

17030閲覧

init() の意味を分かりやすく簡単に説明してもらえないでしょうか

mukuta0111

総合スコア18

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2019/09/19 05:57

編集2019/09/19 06:01

Three.jsを勉強するにあたって、「init()」について
色々なサイトをみて学んでいるのですが、

  • 生成するときに自動で呼び出されるメソッド
  • プロバティの初期値を設定するときに使用する

ということ分かったのですが、
初期化とは具体的にどういうことでしょうか。

Three.js で3Dを作るときには必ず使用するという理解の仕方で大丈夫ですか??

<script> window.addEventListener('load', init); function init() { const width = 960; const height = 540; const renderer = new THREE.WebGLRenderer({ canvas: document.querySelector('#myCanvas') }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(width, height); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(45, width / height); camera.position.set(0, 0, +1000); const geometry = new THREE.BoxGeometry(400, 400, 400); const material = new THREE.MeshNormalMaterial(); const box = new THREE.Mesh(geometry, material); scene.add(box); tick(); function tick() { box.rotation.y += 0.01; renderer.render(scene, camera); requestAnimationFrame(tick); } } </script>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/09/19 05:59

どこで出てくるinit()のことでしょうか。 具体的なコードや出典を明示してください
mukuta0111

2019/09/19 06:02

失礼しました。 コメントありがとうございます。 コチラの4行目の function init() { の部分になります。
guest

回答2

3

initはただの名前なので、

js

1 window.addEventListener('load', syokika); 2 3 function syokika() {

としても動作します。特段の意味はありません。

初期化とは具体的にどういうことでしょうか。

「初めにやっておきたいことをする」ということです。
たとえば、ユーザーのクリックがあって動き出すようなスクリプトであれば、初めにやっておきたいことが全くないかもしれませんので、そういった場合には必要ないです。
それ以上の特段の意味はありません。

投稿2019/09/19 06:36

Lhankor_Mhy

総合スコア35702

kei344, m.ts10806, maisumakun👍を押しています

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

2

ベストアンサー

自前で作っている関数のようなので別に名前はaとかでも関数として有効なもの(且つできれば標準関数で使われていないものなど)であればなんでも良いです。

単に「初期化」と言っても要件によって違います。
グラフなら棒グラフにするのか円グラフにするのか。凡例や投入するデータなど。
利用するキャンバスのサイズなど、「実行するために必要な最低限の設定をすること」を総合して「初期化」と読ばれます。

Three.js で3Dを作るときには必ず使用する

要件次第です。
ドキュメントを確認してもらえれば「実行するために必要な最低限の設定」は分かるかと思います。
必須パラメータがそれです。
そうでないパラメータは任意なので「作りたいものによって変化する」ものです。

先に書いたように自前で勝手に作った関数でWindowのload時に呼ばれるようになっていますが、おそらく#myCanvasという要素が読み込まれたあとにJavaScriptの記述を書くのならload時にinit()を呼ぶ必要はないのではと思います。

ここからはまさに要件次第なので、想像も入りますが、自前の関数にしたのは、中の数値が変わったりして再描画するような要件があり、そのときに呼び出すだけで再度作り直されるような作りにしたいとかあるのかもしれません。
そうでないにしてもベタで書くよりは関数にした方が読みやすくはなりますね。

投稿2019/09/19 06:36

m.ts10806

総合スコア80705

Lhankor_Mhy, kei344👍を押しています

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.54%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

同じタグがついた質問を見る

Three.js

Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。