長年フロントエンド開発に深く関わってきたプログラマーとして、私が日々最も扱うのが「コードエディタ」と「コーディング」です。優れたコードエディターを使用すると、半分の労力で 2 倍の結果が得られ、開発作業の効率が向上します。ブロガーの現在の開発プロジェクトで最も一般的に使用されているフロントエンド開発エディターは次のとおりです。

(1) vscode: Microsoft によって開発されたエディタで、Vue、JavaScript、Python、React、C/C++ などのフロントエンドおよびバックエンドの多言語をサポートし、コードをデバッグするための統合ターミナルを提供し、Git を統合します。バージョン管理ツール。短所: 一部のプラグインや機能を実行するには開発環境をインストールする必要があります。小規模なプログラムの開発はサポートされていません。一部のプロジェクトは実行時に大量のメモリを消費します。

(2) HBuilderX: 国産のエディタで、uni-app、Vue.js、その他のフレームワークをよくサポートしており、クロスプラットフォームのモバイルアプリケーションや小さなプログラムを迅速に開発でき、多くのフロントエンド開発者に好まれています。短所: React や Python などの他の言語やフレームワークは不親切で、Git などのバージョン管理ツールはサポートされていないため、チームのコラボレーションには不便です。

(3) WebStorm: JetBrains によって開発されたフロントエンド開発ツール。JavaScript とフロントエンド開発に焦点を当て、強力なコード分析とデバッグ機能を提供し、TypeScript、React などの他の言語やフレームワークもサポートします。。欠点は、メモリを大量に消費することと、純正コピーの価格が高いことです。

最近は暇なときに3Dの技術調査や知識の備蓄をしています｡公式ドキュメントを見ながらスクリプトを書いて実際の効果を確認することもあります｡そのため､自宅に私が開発したスクリプトのデモがいくつかあります｡コンピューター環境と会社環境。バージョン管理ツールを使用したり、行ったり来たりするのは常に少し不便に感じます。そこで今回アプリケーションを開発する際、ブロガーは従来のエディターの使用を諦め、「Tencent Cloud Studio クラウドエディター」を使って開発を試みました。ブラウザを開いてコードを書くことができ、ネイティブ IDE と同じクラウド開発エクスペリエンスを実現できます。クラウドエディターを使用して開発されたブロガーの作品の結果もここに示します。

アプリケーション開発のこの個人的な経験を踏まえて、従来のエディタと比較したTencent Cloud Editor Cloud Studioの利点と利便性は何ですか、またCloud Studioを使用して3D 家具のパーソナライズされたカスタマイズアプリケーションを開発する方法を説明します。それでは、ブロガーの話を聞いてみましょう次~~~

1. Tencent Cloud Cloud Studio の概要:

Cloud Studio はクラウドベースの開発環境です。プロジェクト体験のアドレス: Cloud Studio 公式 Web サイト。これにより、プログラマーはクラウド上でプログラムを作成して実行できるようになります。従来のローカル IDE と比較して、Cloud Studio には次の利点があります。まず、Cloud Studio はクラウドをベースとしているため、ネットワーク接続が正常であれば、クラウドリソースを使用し何もすることがないため、低構成のコンピューターでもメモリを消費するさまざまなプログラムを作成して実行できます。ローカルコンピュータのパフォーマンスに依存します。第二に、Cloud Studio はオンラインプレビュー機能を提供しており、頻繁にウィンドウを切り替えたりローカルサーバーを起動したりすることなく、コードの効果と実行結果を簡単に確認できます。統合された AI アシスタントは、Cloud Studio で AI コードアシスタントを直接呼び出すことができます。、プロの研究開発パートナーと協力して、より高品質のコーディング作業を完了し、半分の労力で 2 倍の結果を得ることができます。Cloud Studio は、従来の IDE が直面する問題点を解決できる便利なクラウド開発環境を提供し、いくつかの独自の利点を備えています。

1. ローカルIDEの開発経験に近い

ダウンロードやインストールをすることなく、ブラウザを開いてコードを書くことができ、いつでもどこでもブラウザを開いてコードを書くことができ、コードのハイライト表示、オートコンプリート、フル機能のターミナル、リアルタイム保存などの機能をサポートしています。ローカル IDE と同じスムーズな編集エクスペリエンスを実現します。

2. 複数の環境はオプションです。またはクラウドホストに接続します

Node.js、Java、Pythonなどの共通環境が組み込まれているため、複雑な設定作業を省いて直接開発状態に入ることができます。または、独自のクラウドホストに接続して、クラウドホスト内のリソースを管理することもできます。

3.いつでもプレビュー効果を共有できます

Cloud Studio でプレビューリンクをすばやく生成すると、プロジェクトを他の人と共有して表示したり、デバッグインターフェースとして使用したりするのに非常に便利です。

4. VSCodeプラグインとの互換性

デフォルトの構成では需要を満たすことができませんか? VSCode プラグインをオンラインでインストールしてエクスペリエンスを向上させることもできます。現在、Cloud Studio はほとんどの VSCode プラグインと互換性があります。

5. AIコードアシスタント

AI コードアシスタントを Cloud Studio で直接起動することで、プロの R&D パートナーが高品質でコーディング作業を完了し、半分の労力で 2 倍の結果を得ることができます。

Cloud Studio は非常に強力なので、さまざまな環境をインストールする必要がなく、使いやすく、箱から出してすぐに使い始めることができます。0 から 1 まで使用して、Cloud Studio によってもたらされる利点を体験するにはどうすればよいですか?クラウドIDEを使用すると、ブロガーは[3D家具パーソナリティ]カスタマイズされたアプリケーションの実際の開発事例]を使用して共通の体験をもたらします~~

2. Tencent Cloud Cloud Studio プロジェクト実践 (3D 家具パーソナライズカスタマイズアプリケーション)

1. Cloud Studioに登録してログインします

登録とログインの手順は比較的簡単で、Cloud Studio オンラインプログラミングプラットフォームでは、コーディングアカウント、GitHub アカウント、WeChat 認証の 3 つのログイン方法がサポートされています。ここでは、ブロガーは WeChat スキャンコードを使用してログインを認証し、ログインが成功しました。これは、登録が成功したことを意味します。

2. Vue プリセット開発環境に入る

2.1 正常にログインし、Cloud Studio のメインページに入ります

次のスペーステンプレートはすぐに使用できるため、コード開発用の環境を迅速に構築できます。同時に、Cloud Studio では、すべての新旧ユーザーに 1 か月あたり 3,000 分の無料作業スペースも提供されます。

2.2. Vue.js テンプレートカードをクリックして、vue3.0 プロジェクトを迅速かつ自動的に生成します

2.3 30 秒未満の待機後 (帯域幅やネットワーク速度の違いとは異なります)、開発環境が初期化され、設定されます。

2.4 Cloud Studio は開発 Vue 環境の初期化に役立ちます。デフォルトで小さなデモがあります

2.5 この時点で、基本的な Vue プロジェクトが構築されました。

また、Cloud Studio クラウドエディターの操作インターフェースは基本的に普段使用している VS Code とよく似ており、アプリケーション開発の準備を始めます。

3. プロジェクト開発

3.1 プロジェクトの機能ポイントの概要

Three.js はブラウザ上で動作する 3D エンジンで、統合後は強力な WebGL グラフィックス機能を利用して【3D 家具カスタマイズアプリケーション】を構築できます。3Dシーンの作成、ソファモデルのインポート、ソファモデルの3D表示、シーン内の光と影の構築、ソファパーツのマテリアルカラー切り替え、視野角切り替えのアニメーションなどの機能が含まれています。

3.2 インストールの依存関係

Web3D の開発には Three.js をよく使用しますが、ここでは npm を使用してプロジェクトに統合し、コンソールで次のコマンドを実行します。

npm i three -S

インストールが完了したら、package.json に 3 つがあるかどうかを確認します。これは、インストールされていることを意味します。

3.3 3Dシーンの作成

まず HTML で Canvas 要素を構築すると、3D エクスペリエンス全体がこの要素にレンダリングされます。

     <!-- 三维场景 -->
<canvas id="canvasDom" class="canvas-container" ref="canvasDom"> </canvas>

背景色を使用してシーンを作成し、遠くに同じ色の霧を追加します。これは、追加後に床の端を隠すのに役立ちます。


const BACKGROUND_COLOR = 0xf1f1f1;
 
// Init the scene
const scene = new THREE.Scene();
 // Set background
scene.background = new THREE.Color(BACKGROUND_COLOR );
scene.fog = new THREE.Fog(BACKGROUND_COLOR, 20, 100);

レンダラーを作成し、キャンバス要素を渡して、3D モデルの周囲に滑らかなエッジを作成するアンチエイリアスを設定します。

  // 初始化 renderer
  const canvas = document.querySelector("#canvasDom");
  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
  renderer.shadowMap.enabled = true;
  renderer.setPixelRatio(window.devicePixelRatio);

次に行う必要があるのは更新ループです。この関数はデフォルトで 1 秒あたり 60 回実行されるため、3D シーンを確認してリアルタイムで更新できます。更新関数は animate( )


function animate() {
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}
 
animate();

シーンを確認できるようにスペースにカメラを追加する必要があります

// Add a camera
var camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 1000);

3.4 モデルのロード

ここでは glft 形式のモデルを使用します。GLB は GLTF モデルのバイナリファイル形式表現です。この形式のモデルの利点は、モデルの構造、メッシュ、マテリアル、アニメーションなどに関するすべての情報がすでに含まれていることです。

  var theModel; //定义模型
  const MODEL_PATH = "./model/sofa_chair.glb";        //沙发模型地址

GLTFLoader を使用してモデルをインポートし、ブラウザが表示できるデータ形式に変換します。

メソッドの最初のパラメータはモデルのファイルパス、2 番目のパラメータはリソースのロード後に実行する関数、3 番目のパラメータは現在未定義ですが、リソースのロード時に 2 番目の関数を実行するために使用できます。、およびエラー処理の最後のパラメータ

 // 初始化GLTF模型loader
var loader = new THREE.GLTFLoader();;
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath("./draco/gltf/");
loader.setDRACOLoader(dracoLoader);
 
loader.load(MODEL_PATH, function(gltf) {
  theModel = gltf.scene;
 
// 设置模型缩放大小  
  theModel.scale.set(2,2,2);
 
  // 把模型加到场景中
  scene.add(theModel);
 
}, undefined, function(error) {
  console.error(error)
});

この時点で、黒いソファがシーンに追加されたことがわかります。

3.5 光と影の効果を設定する

ここでは、半球ライトと指向性ライトをシーンに追加します。そして空間的な位置と強度を設定します。

  // 设置场景灯光
  var hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.61);
  hemiLight.position.set(0, 50, 0);
  scene.add(hemiLight);
  var dirLight = new THREE.DirectionalLight(0xffffff, 0.54);
  dirLight.position.set(-8, 12, 8);
  dirLight.castShadow = true;
  dirLight.shadow.mapSize = new THREE.Vector2(1024, 1024);
  scene.add(dirLight);

ここではシーンがはるかに明るくなり、ソファの元の色と素材が見えます。

3.6 フロアの追加

シーン内の効果をより良くするために、シーンに床を追加します

  // 给场景加个地板
  var floorGeometry = new THREE.PlaneGeometry(5000, 5000, 1, 1);
  var floorMaterial = new THREE.MeshPhongMaterial({
    color: 0xeeeeee,
    shininess: 0,
  });
  var floor = new THREE.Mesh(floorGeometry, floorMaterial);
  floor.rotation.x = -0.5 * Math.PI;
  floor.receiveShadow = true;
  floor.position.y = -1;
  scene.add(floor);

3.7 ソファモデルのパーツを入手する

ローダーを使用してモデルをロードした後、traverse 関数を使用してモデルの各子ノードを走査します。ここで、各モデルの子ノードの名前を取得し、一意の識別子として使用できます。

    theModel.traverse((o) => { //此函数可以遍历出模型包含的各个子节点
        console.log(o.name,'节点名称');
        if (o.isMesh) {
          o.castShadow = true;
          o.receiveShadow = true;
        }
      });

  //  给模型各部位赋材质
  const initColor=(parent, type, mtl)=> {
    parent.traverse((o) => {
      if (o.isMesh) {
        if (o.name.includes(type)) {
          o.material = mtl;
          o.nameID = type; // 设置一个属性来标识此对象
        }
      }
    });
  }

3.8 モデルのマテリアルの置き換えまたは色の切り替え

モデルが何色であるか、金属か木製か、新しいか古いかなど、モデルの外観は質感と色によって決まります。

前のステップを通じて、モデルのサブノードとそのロゴを定義し、このステップで色を切り替えるための道を開くことができます。ここでは、最初にモデルのサブノードオブジェクトを定義し、色の切り替えメソッドを定義します。

  const INITIAL_MAP = [   // 沙发模型各个模块及视角
    { childID: "Object_6", mtl: INITIAL_MTL ,position:{x:0,y:1.2,z:4},imgurl:'/img/modeltype/front.png'},
    { childID: "Object_4", mtl: INITIAL_MTL ,position:{x:-4.16,y:0.17,z:0.167},imgurl:'/img/modeltype/back.png'},
    { childID: "Object_8", mtl: INITIAL_MTL ,position:{x:-0.06,y:1.88,z:3.26},imgurl:'/img/modeltype/down.png'},
    { childID: "Object_10", mtl: INITIAL_MTL,position:{x:-2.78,y:2.83,z:3.70},imgurl:'/img/modeltype/leg.png'},
    { childID: "Object_12", mtl: INITIAL_MTL,position:{x:0.6,y:0.6,z:1.52},imgurl:'/img/modeltype/pillow.png'},
  ];

  // 点击色卡给选中的子模型切换贴图或颜色
const selectColor=(item)=>{
    let color = item
    let new_mtl;

    if (color.texture) {
      let txt = new THREE.TextureLoader().load(color.texture);

      txt.repeat.set(color.size[0], color.size[1], color.size[2]);
      txt.wrapS = THREE.RepeatWrapping;
      txt.wrapT = THREE.RepeatWrapping;

      new_mtl = new THREE.MeshPhongMaterial({
        map: txt,
        shininess: color.shininess ? color.shininess : 10,
      });
    } else {
      new_mtl = new THREE.MeshPhongMaterial({
        color: parseInt("0x" + color.color),
        shininess: color.shininess ? color.shininess : 10,
      });
    }

    theModel.traverse((o) => {
      if (o.isMesh && o.nameID != null) {
        if (o.nameID == activeOption.value) {
          o.material = new_mtl;
        }
      }
    });
}

3.9. カラーカードメニューの生成

        <div class="menuAside">
            <div class="title">选择颜色</div>
            <div class="colorList">
              <div class="item" v-for="(item,index) in colors" 
              @click="selectColor(item)"
              :key="index" :style="{'background':item.color?'#'+item.color:'',
                'backgroundImage':item.texture?'url(' + item.texture + ')':''
              }">
              </div>
            </div>
        </div>

3.10 アングル切り替えアニメーション

ソファのさまざまな部分を切り替えるときにより柔軟にするために、ここでは Tween.js ライブラリを使用して、視野角切り替えのアニメーションを実現しています。

  //设置相机视角+动画
const setCameraPosition=(newPosition,cameraPosition)=> {
    return new TWEEN.Tween(cameraPosition)
      .to(newPosition, 1000)
      .easing(TWEEN.Easing.Cubic.Out)
      .start();
  }

3.11 モデルローディングのローディング効果を高める

ここでは小さな読み込みコンポーネントを開発しています。モデルの読み込みはネットワーク環境の影響を受けるため、遅くなる可能性があります。ここでは、アニメーションを読み込み、ユーザーに良いエクスペリエンスを提供するためにデータを待ちます

3.12 コードを保存した後、組み込みブラウザでリアルタイムの変更効果を確認できます。

この時点で、3D 家具のカスタマイズアプリケーションは基本的に完成しました。

4. ウェアハウスを初期化する

4.1 左側の機能メニュー領域で「ソースコード管理」を見つけます。

4.2 送信する必要があるメッセージ情報を入力し、「コミット」をクリックしてウェアハウスを送信します。

4.3 コードがコーディングでホストされるように選択できます。ここでは、コードをコーディングウェアハウスに公開する方法のデモンストレーションを示します。[ブランチの公開] をクリックし、[コーディングに公開] を選択します。

4.4 コーディングチームのドメイン名プレフィックスを入力すると、後でリリースされるコードがこのチームプロジェクトに公開されます

4.5 対応するアカウントを選択し、プッシュするプロジェクトを選択します。そうでない場合は、新しいプロジェクトが作成されます。

4.7 送信が成功すると、コーディングプラットフォームにログインしてウェアハウスコードを表示できます。

コーディングワンストップ研究開発管理プラットフォーム

5. 開発スペース

5.1 使用中の開発スペースを表示する

使用するテンプレートは vue-js によって作成されたテンプレートに基づいていることがわかります。また、「最近削除された」スペースでロールバックすることもできます。

5.2 構成のアップグレード

「標準バージョン」が要件を満たしていないと思われる場合でも続行できますが、変更は次回の再起動後に有効になります。

5.3 プロジェクトの停止

5.4 プロジェクトを削除してワークスペースを破棄する

3. よくある質問

1. ワークスペースを開けないことがありますか?

同時に開いて実行できるワークスペースは 1 つだけであるため、他のワークスペースが開いているかどうかを確認してください。

2. 内蔵ブラウザを閉じた後に開く方法がわからない場合があります。

有効にするには、次のコマンドを使用します。

cd ./ && set port=5173 && export PORT=5173 && yarn && yarn run dev --host 0.0.0.0 --port=5173

4. まとめ

今回、Tencent Cloud Cloud Studio を利用して 3D 家具カスタマイズアプリケーションを開発してみて、Cloud Studio クラウド開発環境が開発作業にもたらす効率性と利便性を痛感しましたが、まとめると以下の点になります。

1. エディタをダウンロードせずにブラウザ上でコードの開発やプロジェクトのコードの表示ができるため、記事を書くのと同じくらい便利で、ローカルIDEに匹敵するスムーズなコーディング体験が可能です。

2. 各種開発環境をコンピュータにインストールする必要がないご存知のとおり、JAVA の開発には Java 環境の構築が必要であり、Python の開発には対応する Python 環境のインストールと、フロントエンドにはノード環境のインストールが必要です。さらに、Cloud Studio には Node.js、Java、Python などの共通環境が組み込まれているため、環境をインストールする手間が直接解消されます。

3. オンラインプレビューをサポートし、プレビューリンクをすばやく生成します。これは、他の人の表示プロジェクトの共有やオンラインデバッグに便利です。

4. 将来的にはAI開発アシスタントも統合され、AI機能を活用することで開発がさらに加速します。

全体として、今回は Tencent Cloud Cloud Studio によって非常に良い開発経験が得られました。今後は Cloud Studio のさらに多くの機能を検討して、仕事を強化することを検討します。

【Tencent Cloud Studio 実践トレーニングキャンプ】Cloud Studio を使って 3D 家具カスタマイズ アプリケーションを迅速に開発

序文：