7. Examples

All elements that creates 3D objects must be wrapped in <ThreeCanvas />. The following code shows the <DemoExamples /> created by users wrapped in <ThreeCanvas />. Note that <ThreeCanvas /> corresponds to the context provider that stores and manages all 3D content with the threefy engine.

import React from "react";
import { ThreeCanvas } from "threefy";
import { DemoExamples } from "./DemoExamples";

const App = () => {
  const example = 1; // example: 1 ~ 70

  return (
      <ThreeCanvas>
        <scene>
          <perspectiveCamera />
          <threePointLighting />
          <DemoExamples example={example} />
        </scene>
      </ThreeCanvas>
  );
};

export default App;

In the above code, <scene /> is a key element that stores all created 3D objects as children. A user can create the <scene /> element inside the <ThreeCanvas />, but it can also be skipped. If skipped, threefy automatically inserts the <scene /> element. And the camera <perspectiveCamera>, which is a child element of <scene />, can also be skipped. If skipped, the following camera is inserted as a default.

<perspectiveCamera args={[ 60, width / height, 0.1, 5000 ]} position={[0,0,50]} />

where width = window.innerWidth, height = window.innerHeight. The light element that illuminates the entire <scene /> can be skipped in some cases. If you need a light element but have no special requirements, we recommend using <threePointLighting /> provided by threefy.

<DemoExamples /> in DemoExamples.jsx is a 3D custom element created by users and can be written as in the following example.

const DemoExamples = () => {
    return <box
        position={[0,0,0]}
        scale={[15,6,12]}
        type={'phong'}
        color={'skyblue'}
    />
}

The above example is a simple code that creates a box. The position of the created box is [0,0,0] and the size is [15,6,12]. When rendering, the ‘phong’ material is used, and the color of the material is ‘skyblue’.

Renderers, controls, and those not introduced above use the default values ​​preset by threefy. The default values ​​for renderer and controls are as follows.

const renderer = new WebGLRenderer({ canvas, antialias: true });
renderer.setPixelRatio( Math.min( window.devicePixelRatio, 2 ) );
renderer.shadowMap.enabled = true;
renderer.shadowMap.needsUpdate = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.toneMapping = THREE.LinearToneMapping;
renderer.toneMappingExposure = 1;

const controls = new OrbitControls( camera, renderer.domElement );
controls.enableDamping = true;
controls.dampingFactor = 0.075;

All example codes in this chapter are run inside <DemoExamples />. The example codes are listed by topic, with the more complex examples placed at the end. If you have any bugs or questions about the code at any time, please contact us at the following address.

Please contact us at [e-mail] for any questions or suggestions.

• Website: https://www.nova-graphix.com

• LinkedIn: https://www.linkedin.com/company/novagraphix/

• Facebook: https://www.facebook.com/NovaGraphixCo

• YouTube: https://www.youtube.com/@3D-novagraphix