As a programmer who has been deeply involved in front-end development for many years, the "code editor" and "coding" I deal with the most every day. A good code editor can improve the efficiency of development work with twice the result with half the effort. The most commonly used front-end development editors for bloggers' current development projects are:

(1) vscode: an editor developed by Microsoft that supports front-end and back-end multi-languages, such as Vue, JavaScript, Python, React, C/C++, etc.; provides an integrated terminal for debugging code; integrates Git version control tools. Disadvantages: You need to install a development environment to run some plug-ins and functions; it does not support small program development; some projects consume a lot of memory when running.

(2) HBuilderX: A domestic editor, it supports uni-app, Vue.js and other frameworks well, and can quickly develop cross-platform mobile applications and small programs, favored by many front-end developers. Disadvantages: Other languages and frameworks are unfriendly, such as React and python; version control tools such as Git are not supported, which is inconvenient for team collaboration.

(3) WebStorm: A front-end development tool developed by JetBrains, which focuses on JavaScript and front-end development, provides powerful code analysis and debugging functions, and also supports other languages and frameworks, such as TypeScript, React, etc. The disadvantage is that it takes up a lot of memory and the cost of genuine copies is high.

Recently, I have been doing some technical research and knowledge reserves in 3D in my free time. While viewing official documents, I will also write some scripts to check the actual effect. Therefore, there will be some script demos developed by me in the home computer environment and the company environment. , Using version control tools + switching back and forth will always feel a little inconvenient. So when developing the application this time, the blogger gave up using the traditional editor and tried to use [ Tencent Cloud Studio Cloud Editor ] for development . Opening the browser can write code, and the cloud development experience is the same as the native IDE. It allows bloggers to develop across spaces, and the work efficiency is naturally improved a lot. Here is also a look at the results of bloggers' works developed using the cloud editor:

So after this personal experience of application development, what are the advantages and conveniences of Tencent Cloud Editor Cloud Studio compared with traditional editors , and how I use Cloud Studio to develop 3D furniture personalized customization applications Well , let’s listen to what the blogger will tell you next~~~

1. Introduction to Tencent Cloud Cloud Studio:

Cloud Studio is a cloud-based development environment, project experience address: Cloud Studio official website . It allows programmers to write and run programs in the cloud. Compared with traditional local IDEs, Cloud Studio has the following advantages. First of all, because Cloud Studio is based on the cloud, as long as the network connection is normal, you can write and run various memory-consuming programs even with a computer with low configuration, because it uses cloud resources and has nothing to do with the performance of the local computer . Secondly, Cloud Studio provides an online preview function, which allows you to easily view the effect and running results of the code without frequently switching windows or starting the local server; the integrated AI assistant can directly invoke the AI code assistant in Cloud Studio, allowing you to have a professional R & D partners, together with you to complete the coding work with higher quality, get twice the result with half the effort. Cloud Studio provides a convenient cloud development environment, which can solve the pain points faced by some traditional IDEs, and has some unique advantages:

1. Close to the development experience of the local IDE

It can write codes by opening a browser, without downloading and installing, and can write codes anytime, anywhere by opening a browser. It supports code highlighting, auto-completion, full-featured terminals, real-time saving and other functions. Have the same smooth editing experience as a local IDE.

2. Multiple environments are optional, or connect to the cloud host

Common environments such as Node.js, Java, and Python are built in, which saves you complicated configuration work and directly enters the development state. Or you can also connect it to your own cloud host to manage the resources in the cloud host.

3. Share the preview effect at any time

It is very convenient to quickly generate a preview link in Cloud Studio, whether it is to share with others to show the project, or to use it as a debugging interface.

4. Compatible with VSCode plug-ins

The default configuration can not meet the demand? You can also install VSCode plugins online to enhance your experience. Currently Cloud Studio is compatible with most VSCode plugins.

5. AI code assistant

Awaken the AI code assistant directly in Cloud Studio, so that you have a professional R&D partner to complete the coding work with you with higher quality, and get twice the result with half the effort.

Cloud Studio is so powerful that you don’t need to install various environments, it’s easy to use, and you can get started right out of the box, so how do we use it from 0 to 1 to experience the advantages brought to us by the cloud IDE, and then the blogger will use a [3D furniture personality] The actual development case of customized application] to bring you a common experience~~

2. Tencent Cloud Cloud Studio project practice (3D furniture personalized customization application)

1. Register and log in Cloud Studio

The registration and login steps are relatively simple. The Cloud Studio online programming platform supports three login methods: Coding account, GitHub account, and WeChat authorization. Here the blogger uses the WeChat scan code to authorize the login, and the login is successful, which means the registration is successful;

2. Enter the Vue preset development environment

2.1 Log in successfully and enter the main page of Cloud Studio

The following space templates are ready to use out of the box, which can quickly set up an environment for code development. At the same time, Cloud Studio also provides 3000 minutes of free working space per month to all new and old users.

2.2. Click the Vue.js template card to quickly and automatically generate a vue3.0 project

2.3 After waiting for less than 30s (different from the difference in bandwidth and network speed), the development environment will be initialized and configured

2.4 Cloud Studio helps us initialize the development Vue environment, and there is a small demo by default

2.5 At this point, the basic Vue project has been built

Moreover, the operation interface of the Cloud Studio cloud editor is basically very similar to the VS Code we usually use, and then we start to prepare for application development.

3. Project development

3.1 Introduction to project function points

Three.js is a 3D engine that runs in the browser. After integration, we can use the powerful webgl graphics functions it provides to build 【3D furniture customization application】. It includes the following functions: 3D scene creation, sofa model import, sofa model 3D display, light and shadow effect construction in the scene, material color switching of sofa parts, animation of viewing angle switching, etc.

3.2 Installation dependencies

We often use three.js to develop web3d, here we use npm to integrate it into the project, and execute the following command in the console:

npm i three -S

After the installation is complete, let's see if there is three in package.json, which means it is installed

3.3 3D scene creation

First build a canvas element in html, and the entire 3D experience will be rendered into this element

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

Create a scene with a background color and add some fog of the same color in the distance, this will help hide the edges of the floor after adding


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);

Create a renderer, and pass in our canvas element, set anti-aliasing, which will create smoother edges around the 3D model.

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

The next thing we need to do is an update loop. This function is executed 60 times per second by default, so that we can see our 3D scene and update in real time. The update function is animate()


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

We need to add a camera to the space so we can see the scene

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

3.4 Loading the model

Here we use the model in glft format. GLB is the binary file format representation of the GLTF model. The advantage of the model in this format is that it already contains all the information about the model structure, mesh, material, animation, etc.

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

Use GLTFLoader to import the model and convert it into a data format that the browser can display

The first parameter of the method is the file path of the model, the second parameter is a function to run after the resource is loaded, the third parameter is currently undefined, but can be used for the second function to run when the resource is loaded, and the last parameter for error handling

 // 初始化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)
});

At this point, you should see that a black sofa has been added to the scene.

3.5 Setting Light and Shadow Effects

Here, add hemispherical lights and directional lights to the scene. And set the spatial position and intensity.

  // 设置场景灯光
  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);

Here the scene is much brighter and you can see the original color and material of the sofa.

3.6 Adding floors

In order to make the effect in the scene better, a floor is added to the scene

  // 给场景加个地板
  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 Get sofa model parts

After using the loader to load the model, use the traverse function to traverse each child node of the model. Here we can get the name of each model child node and use it as a unique identifier

    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 Replace the material or switch the color for the model

What color is the model, whether it is metal or wood, whether it is new or old, the appearance of these models is determined by the texture and color.

Through the previous step, we can define the sub-nodes of the model and their logos, paving the way for switching colors in this step. Here we first define the model sub-node objects and define the switching color method:

  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. Generate color card menu

        <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 Angle switching animation

In order to make it more flexible when switching different parts of the sofa, the Tween.js library is used here to realize the animation of viewing angle switching

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

3.11 Increase the loading effect of model loading

A small loding component is developed here. Because the loading of the model is affected by the network environment, it may be slow. Here, waiting for the data to give the user a good experience by loading animation

3.12 After saving the code, you can see the real-time modified effect in the built-in browser:

At this point, our 3D furniture customization application is basically completed

4. Initialize the warehouse

4.1 Find "Source Code Management" in the function menu area on the left.

4.2 Enter the message information that needs to be submitted, and then click "Commit" to submit the warehouse.

4.3 You can choose that the code is now hosted on Coding. Here is a demonstration of how to publish it to the Coding warehouse. Click "Publish Branch" -> select "Publish to CODING"

4.4 Enter the domain name prefix of the Coding team, and the code released later will be published to this team project

4.5 Select the corresponding account and select the project to push, if not, a new project will be created.

4.7 After the submission is successful, you can log in to the Coding platform to view the warehouse code.

Coding One-stop R&D Management Platform

5. Development space

5.1 View the development space in use

You can see that the template we use is based on the template created by vue-js, and it can also be rolled back in the "recently deleted" space.

5.2 Configuration upgrade

If you feel that the "standard version" does not meet the requirements, you can still proceed, but the modification will take effect after the next restart.

5.3 Stopping the project

5.4 Delete the project to destroy the workspace

3. Frequently asked questions

1. Sometimes the workspace cannot be opened?

Check whether other workspaces are open, because only one workspace can be opened and run at the same time.

2. Sometimes I don’t know how to open the built-in browser after closing it?

Use the following command to enable

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

Four. Summary

Through the use of Tencent Cloud Cloud Studio for the development of 3D furniture customization applications this time, I deeply felt the efficiency and convenience brought by the Cloud Studio cloud development environment to the development work. In summary, there are the following points:

1. You can develop code or view project code in the browser without downloading an editor, which is as convenient and convenient as writing an article, and has a smooth coding experience comparable to a local IDE.

2. There is no need to install various development environments on the computer. As we all know, the development of JAVA requires the establishment of a java environment, the development of python requires the installation of the corresponding python environment, and the development of the front end requires the installation of a node environment. Moreover, Cloud Studio has built-in common environments such as Node.js, Java, and Python, which directly eliminates the trouble of installing the environment.

3. Support online preview to quickly generate a preview link, which is convenient for sharing other people's display projects or online debugging

4. In the future, an AI development assistant will be integrated. With the help of AI functions, the development will take off even faster.

All in all, Tencent Cloud Cloud Studio gave me a very good development experience this time, and I will consider exploring more functions of Cloud Studio in the future to empower my work!

[Tencent Cloud Studio Practical Training Camp] Use Cloud Studio to quickly develop a 3D furniture customization application

Foreword: