Add object

Five is based on Three.js , youcan use Three.js all ecological competencies. For example, add 3-D assistive objectsAxesHelper in three-dimensional space:

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

This allows for the position of axes and origin in the three-dimensional space.

Add Mesh in THREE

Five Instances are reserved five.scene object, you can add any objects built by Three.js in the system Mosh

For example, add a grid ball in three-dimensional space：

//The model loading completes
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);
  // Add ball
  five.scene.add(sphere);
  // Switch to 3D model to make it easier to see the ball
  five.setState({ mode: "Floorplan" });
});

Add GTTF Model

glTF Model file is a three-dimensional field .png/.jpeg,Five Built-in-built GLTFLoader you can easily load glTF model.

As an example, we load a glTF car model at a blank place in the restaurant：

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

// etc models loaded and loaded into other GlF models
five.once("modelLoaded", () => {
  // loading glTF model
  gltfLoader.load(baseURL + "pony_cartoon/scene.gltf", ({ scene }) => {
    // Add to Five 3D space scenarios
    five.scene.add(scene);
    // Set good size and space location
    scene.scale.set(1, 1, 1);
    scene.position.set(
      -2.8741698071921214,
      0.220446049250313,
      -4.631508324407246
    );
    // Switch to General Space Overview model：more easily accessible glTF model
    five.setState({ mode: Five.Mode.Floorplan });
  });
});

Final effect is below：