【腾讯云 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