这节我们来做家具列表的功能：
之前的家具都是写死在 json 初始数据里的。
实际上家具应该是动态从左侧拖到场景里，然后编辑下位置、角度。
就像酷家乐这样：
我们也来实现下这个功能。
首先写下左侧的家具列表：
我们准备两个家具：
床、餐桌
餐桌就是之前那个，再找一个床的模型：
https://sketchfab.com/3d-models/bed-52da52f882e242aba646980e9757ef9f#download
先加载进来看下：
放到 public 目录下：
3D 场景里加载下看看：
const gltfLoader = new GLTFLoader();
gltfLoader.load('./bed.glb', (gltf) => {
scene.add(gltf.scene);
gltf.scene.scale.setScalar(800);
});
之前的餐桌大小刚刚好，我们没调整，但这个床的模型需要放大 800 倍才刚刚好。
我们在模型里也加上这个初始 scale 的数据：
modelScale?: number;不设置默认就是 1
改下数据：
{
id: "furniture222",
modelUrl: "./bed.glb",
modelScale: 800,
position: {
x: -647.4215938726065,
y: 0,
z: 7164.314346338078
},
rotation: {
x: 0,
y: 1.482366445885148,
z: 0
}
}在 2D 和 3D 家具渲染的时候，设置下这个 scale：
gltf.scene.scale.setScalar(furniture.modelScale || 1);点击切换户型，应用新数据，看下效果：
渲染出来了。
只是之前地板高度不大对，调一下：
这样就好了。
现在我们是在 json 里写死的数据，接下来把它改成动态添加的家具。
我们先准备两张家具图片：
从这个角度截两张图：
然后在百度随便搜一张图片，打开这个智能抠图工具：
点击上传，换成刚截的两张图，就可以得到背景透明的 png 图片了。
下载下来放到 public 目录：
然后来写家具列表：
<Card
hoverable
style={{ width: 200, margin: 20 }}
cover={<img
width={200}
src="./bed.png"
/>}
>
<Meta title="床" description="" />
</Card>
<Card
hoverable
style={{ width: 200, margin: 20 }}
cover={<img
width={200}
src="./table.png"
/>}
>
<Meta title="餐桌" description="" />
</Card>这里不用预览，所以直接用原生 img 标签。
这样，家具列表就完成了。
案例代码上传了小册仓库
总结
这节我们加载了床的模型，并且写了家具列表。
我们用百度的智能抠图工具做的 png 透明背景的抠图，其余用到透明背景图片的地方也可以这样。
家具因为是外部找的，有的需要设置下 scale 才能用，但设置好了就不允许用户调整 scale 了，因为家具大小是不能变的。
下节我们来做从家具列表拖拽家具到场景中的功能。