【腾讯云Cloud Studio实战训练营】使用Cloud Studio迅捷开发一个3D家具个性化定制应用

npm i three -s

     <!-- 三维场景 -->
<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);

  // 初始化 renderer
  const canvas = document.queryselector("#canvasdom");
  const renderer = new three.webglrenderer({ canvas, antialias: true });
  renderer.shadowmap.enabled = true;
  renderer.setpixelratio(window.devicepixelratio);

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

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

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

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

  // 给场景加个地板
  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);

    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; // 设置一个属性来标识此对象
        }
      }
    });
  }

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

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

  //设置相机视角+动画
const setcameraposition=(newposition,cameraposition)=> {
    return new tween.tween(cameraposition)
      .to(newposition, 1000)
      .easing(tween.easing.cubic.out)
      .start();
  }

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