このセクションでは、それはすべての最初の、私たちは抽象キャビネットができ、その後、使用することができますが、プロジェクトのほとんどはそんなにトラブルを行っているではないでしょうキャビネットもう少し複雑な、リアルな3Dモデリングツールかのように、実際には、キャビネットをペイントする方法について話します直方体は、鉄の長さ及び幅を有し、そして以下のように我々は、DIGアウトドアのような位置の小さなサイズながら立方体の中央から取り出しています
initCabient(){ LET = _selfこの; //遊びに設定メッシュが位置における当社グループがコントロールしていないという利点があり、我々は唯一のグループの位置を制御する必要が this.initCabientObject =新しい新しいグループを(); VAR = Cabinet_material新しい新しいTHREE。 MeshPhongMaterial({ 色:0x42474c、 }); //ここでは、同じ形状を注意クローンを初期化する前に使用することができない、クローニングするために使用される骨材の長さと幅の両方が1であるので、我々は参照が増幅され、そして実際には、体の大きさに変更するので、形状によって減算を行わないでNOの場合減少する 。VAR = _self.returnLambertObjectキャビネット(60、200であり、60、0、Cabinet_material、0、0、0) VAR Cabinet_inside _self.returnLambertObject(= 54、56、0、196、Cabinet_material ,. 3、0、0); this.initCabientObject.add(_self.returnResultBsp(キャビネット、Cabinet_inside、2、0)); //このステップは、中空ボックスが発生しています / /のみ実証するためのコードの3行以下 this.initCabientObject.position.set(0、100、0) ; this.initCabientObject.rotation.y = 1 *にMath.PI。 this.scene.add(this.initCabientObject)。 }
次のように図符号の結果は、(initメソッドへの次の呼び出しに注意してください)です。
このように、中空のボックスには、何の不足分を残して箱から出して、登場しましたか?友人が見ていたシャープ目、ドアを逃し、右、不足我々はドアを描く、記事塗装ウォール時間のドア材料は、その後、私のような材料で直接それを取る、紹介してきました
VaRのdoorgeometry =新しいTHREE.BoxGeometry(55、190、2)。 VAR = THREE.Mesh(doorgeometry、_self.DoorRenderingList)によって新しいです。 door.position.set(30、0、0); door.rotation.y = 0.5 *にMath.PI。// -逆时针旋转、+顺时针 door.nature = "Cabinet__door"。 door.isClose = 1。 this.initCabientObject.add(よります)。
初期化の完了後、次に効果ドアinitCabientObjectに詰め、以下の通りである(小さいが明確ではない参照)
キャビネットは形を取るような、それは非常に簡単ではありません!もちろん、私たちの initCabientの 方法は、我々は削除していた次の三つの文章で、彼はこの機能ではので、名前からだけではない初期塗装キャビネットだと見ることができます
this.initCabientObject.position.set(0、100、0); this.initCabientObject.rotation.y = 1 *にMath.PI; this.scene.add(this.initCabientObject)。
グループraycasterレーザ素子を選択することはできませんが、キャビネットのグループは、(デバイスなし)、ここでは完成されていますが、これは、この投影では非常に優れている、と我々は異なる方向に、異なる方向のチューブがキャビネットの扉を開く方法には必要ありません。機器の筐体内の異なる位置の方向や位置を変更する必要はありませんが、私たちは広場に多くの人々があったのと同じように、うまくグループ全体の位置や角度を制御する必要がある、我々はすべての人の位置や顔を制御する必要がありますその後、車の中の乗客の位置と方向を制御するために、多くの問題の方向が、私たちは車の上の正方形の人々(仮説大きな車は、下の広場に人を収容することができます)させた場合には、非常に簡単です、私達はちょうどOK上の車の位置と方向を知る必要があり、内部の乗客の位置を制御しません。
以来initCabientこのメソッドは、キャビネットを描画するために使用されていない、それはそれをやってに使用されていますか?もちろん、モデルはちょうどキャビネットの数を生産する工場のように、実行され、彼はテンプレートのちょうど最初の生産、個別に各製品の生産を必要としない、そして、他の人はうまくこのテンプレートのクローンをたどる、このテンプレートは、一般的ではありませんこれは、買い手に引き渡されますが、テンプレートとして、その後、関係なく、あなたがしたい何時間、私はちょうど私がいくつかのコードが削除されたことをシーンに上から私のテンプレートを追加する理由である、テンプレートのクローンに合わせてうまく継続する必要がありません理由。
次はキャビネットの位置データのセットを定義します
cabient:[ {X:130、Z 120、codeID: "XZ100001"、角度:0}、 {X:230、Z 120、codeID: "XZ100002"、角:0.5}、 {X:330、Z: 120、codeID: "XZ100003"、角:1}、 {X:430、Z 120、codeID: "XZ100004"、角:1.5} ]
その後、我々は、キャビネットを描画することにより、データのカプセル化方式を開始しました:
/ ** メソッド*は、キャビネット内部の部屋に追加 {データキャビネット* @param結果} * / createCabient(結果){ LET =この_self; result.map((項目)=> { cabientMod = _self.initCabientObjectをしましょう。クローン(); cabientMod.position.set(item.x - _self.houseWidth / 2、100、item.z - _self.houseHeight / 2); cabientMod.rotation.y * = item.angleにMath.PI; //このキャビネットはcabient _プラスプラスエンクロージャIDを識別するために、それぞれの名前のために提供される時に、後で使用される cabientMod.name = "cabient_" + item.codeID; _self.scene.add(cabientMod); }) }。
だから我々は、シーンにキャビネットのデータ情報を追加する必要があり、図を参照してください
この時点で、キャビネットはあなたの観客がこれを感じたら記事の下で、私は、シンプルな動的な効率塗装機器や装置の最も単純には、よく、この記事では、ここで終わりにする方法を詳細に説明します、うまく塗装されています記事大丈夫、トラブルがスポット「推奨」、ありがとうございました!
記事は1日のページビュー数百人を公表する前に、ところで、あなたがすべての混乱の記事を書く前に、コメント領域での一連の記事Three.js欠点や不備を指摘歓迎するために、本研究では、多くの人々に物事を説明します不適がある場合、私に知らせてください間違っていると他の人に誤解があるので、むしろ技術的な記事を書き込むことができません書きません