Skip to main content

添加物体

Five 基于 Three.js 实现,你可以利用 Three.js 生态中所有的能力。 比如,在三维空间中添加三维坐标辅助对象AxesHelper:

const axesHelper = new THREE.AxesHelper(5);
five.scene.add(axesHelper);

这样可以看到三维空间中坐标轴和原点位置。

添加 THREE 中的 Mesh

Five 实例保留 five.scene 对象引用,你可以在三维空间中添加任意由 Three.js 体系中构建的 Mesh 物体。

比如,在三维空间中添加个 网格球

// 等模型加载完成
five.once("modelLoaded", () => {
const geometry = new THREE.SphereGeometry(3, 32, 16);
const material = new THREE.MeshBasicMaterial({ color: 0x0000ff, wireframe: true });
const sphere = new THREE.Mesh(geometry, material);
// 添加球
five.scene.add(sphere);
// 切换到 三维模型模态,更方便地看到球
five.setState({ mode: "Floorplan" });
});

添加 glTF 模型

glTF 模型文件是三维领域的 .png/.jpegFive 内置 GLTFLoader ,你可以很方便地载入 glTF 模型。

如下示例,我们在餐厅空白位置处载入一个 glTF 汽车模型:

const baseURL =
"//vrlab-public.ljcdn.com/release/static/image/release/five/demo/gltf/";
const gltfLoader = new GLTFLoader();

// 等模型加载完再载入其他 glTF 模型
five.once("modelLoaded", () => {
// 载入 glTF 模型
gltfLoader.load(baseURL + "pony_cartoon/scene.gltf", ({ scene }) => {
// 加入到 Five 三维空间场景中
five.scene.add(scene);
// 设置好大小和空间位置
scene.scale.set(1, 1, 1);
scene.position.set(-2.8741698071921214, 0.220446049250313, -4.631508324407246);
// 切换到空间总览模态:更方便看到 glTF 模型
five.setState({ mode: Five.Mode.Floorplan });
});
});

最终效果如下: