Three.js について知る
前回の記事では、three.js フレームワークを通じて最初の 3D グラフィックスをレンダリングしました。
ただし、現在の 3D オブジェクトは移動できません
次に、内部にコントローラーを追加して、3D グラフィックスを動かせるようにします。
コントローラ
まず、コントローラーとは何かを理解する必要があります。コントローラーには 3 つの種類があります。
トラックコントローラーについて学びましょう
オービットコントロール
オービット コントロールを使用すると、カメラがターゲットの周りを周回できます。この機能を使用するには、/examples (examples) ディレクトリ内のすべてのファイルと同様に、このファイルを HTML に含める必要があります。
つまり、作成したカメラを回転させることで、作成したオブジェクトを360°観察することができます
人間が物体を観察するときの目の動きに相当します。
物理的な意味では、さまざまな参照オブジェクトを介してオブジェクトの回転を操作していることが大まかに理解できます
が、この理解方法はお勧めしません。コードを常に回転するカメラとして理解する方が便利です。
前回の記事でうまくレンダリングできたので、ここではコードの表示を繰り返しません。
トラック コントローラーを作成したい場合は、three.js フレームワークからインポートする必要があります。
import {
OrbitControls } from "three/examples/jsm/controls/OrbitControls";
なぜサンプルフォルダーに導入されたのかと誰かが尋ねました
聞かないで、3人に聞いてください。彼らは自分でその場所に置きました。
上記の参考文献でも説明されています
参照した後、新しいコントローラーを作成します。
// 控制器需要一个相机，还有指定渲染的元素，否则谁知道你是哪个相机，监听哪个页面的元素呢，对吧
const controls = new OrbitControls(camera, renderer.domElement);
前述したように、カメラを 360°回転させるとコードを理解するのに便利であることがわかります。つまり、ここでコードを理解することになります。
論理的に言えば、これでコントローラーも作成されました
レンダリングも終わったので、次は制御できるようになりますね。
ページ上で試してみましょう
マウスの左ボタンを押したままマウスをドラッグしても、動かないことがわかりました
これはなぜですか、コントローラーをすでに作成していないのに、なぜ動かないのですか?
実際、これまでのところ、内部の要素は変更されています。
再度レンダリングしなかっただけで、シーン内のオブジェクトはまだ元の状態のままです。
したがって、最後に、ブラウザがフレームごとに更新されるときに自動的に更新する機能を追加する必要があります。
ここで説明します。ディスプレイにはリフレッシュ フレーム レートがあり、ブラウザも同じです。人間の目に見える最小連続フレーム レートは 24 フレーム/秒であるため、ブラウザ内のそれらのフレーム レートは連続しているように感じられます。
最後の 3 つを使用して関数をレンダリングし、それをカプセル化しています。
function render() {
renderer.render(scene, camera);
// 浏览器自带方法，在刷新的时候自动执行某个函数↓，此处我们是在浏览器进行刷新的时候重新渲染一次
requestAnimationFrame(render);
}
// 最后，我们在调用一下这个渲染的方法就可以开始了
render();
マウスの左ボタンを押したままドラッグすると、3D 効果が現れ、360° で観察できることがわかります。
軸ヘルパー
このとき、たとえば、軸やその他のグリッド線を表示できるようにしたいと考えています。
この方法で開発するのは簡単でしょう。
それで、何かありますか
答えは間違いなくあります
いくつかの
three.js には、axis ヘルパーがあります。
同様の補助具と同様に、それらはすべてヘルパーという単語で終わります
たとえば、これから学習する座標軸ヘルパー AxesHelper
軸ヘルパー
3つの座標軸を簡易的にシミュレーションするためのオブジェクトです 赤がX軸、緑がY軸、青がZ軸を表します。
対応する座標軸の長さを表示できるように、構築中に値を入力する必要があります。
このアシスタントをシーンに追加すると、正常に表示できるようになります
// 坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper)
物体の動き
座標軸があるだけでは不十分で、オブジェクトを動かせるようにしたいのですが、どうすればよいですか?
オブジェクトの移動は非常に簡単で、省略されたリフレッシュ フレーム レート方式でオブジェクトの位置を設定するだけです。
このようにして、各フレーム内のオブジェクトの位置が変化し、オブジェクトの動きが形成されます。
PS: 同じ原則が映画にも当てはまります
では、このオブジェクトの位置を設定するにはどうすればよいでしょうか?
達成するには2つの方法があります
// 三维物体的位置需要三个值来定位，x轴，y轴，z轴
// 以下是 Object3D 的公用方法，是构造出来的原型链上面的方法
cube.position.set(3,0,0)
// 或者可以通过对应的属性，来改变对应的值
cube.position.x = 3
オブジェクトの動きは、リフレッシュされると位置が少し変わることです。
function render() {
renderer.render(scene, camera);
cube.position.x += 0.01
if(cube.position.x > 5){
// 我们刚刚设置的坐标轴是5，那么这里设置当他大于5的时候，给他的坐标轴重置
cube.position.x = 0
}
// 浏览器自带方法，在刷新的时候自动执行某个函数↓
requestAnimationFrame(render);
}
ズーム
オブジェクトのスケールは位置と同じであり、フィールドはスケールです
回転させる
回転は移動やスケーリングと似ていますが、回転のパラメータはラジアンであることに注意してください。
どのデータを最初にレンダリングするかを決定するための属性が背後にあります
公式サイトの説明はコチラ
オブジェクトのローカル回転。ラジアンで表されます。(オイラー角- オイラー角を参照)
cube.rotation.set(Math.PI / 4, 0, 0, 'XYZ');
オブジェクトの移動と同様に、回転を続ける必要がある場合は、前のレンダリング方法に次のコードを追加するだけです~
cube.rotation.x += 0.01;
よろしければ途中で私のブログも覗いていただければ幸いです
新しいブログ
前のブログ
それでは、次のエピソードでお会いしましょう~