<Render/>

<Render/> コンポーネントは <Entity/> が 3D Asset またはプリミティブ形状を表示できるようにします。<Render/> コンポーネントを <Entity/> に追加すると、Entity に RenderComponent が追加されます。type Prop でレンダリングするプリミティブ形状を選択できます。

Demo

Render a primitive shape - View Code

Code

render-box.jsx

import { Entity } from '@playcanvas/react'
import { Render } from '@playcanvas/react/components'
import { useState } from 'react';

export const RenderBox = () => {

  const [shape, setShape] = useState('box');

  const onSphereClick = () => setShape('sphere');
  const onBoxClick = () => setShape('box');

  return (<>
    <Entity position={[0, 0, 0]}>
      <Render type={shape} />
    </Entity>
    <div className="overlay">
      <button data-selected={shape === 'sphere'} onClick={onSphereClick}>Sphere</button>
      <button data-selected={shape === 'box'} onClick={onBoxClick}>Box</button>
    </div>
    </>
  )
}

Asset のレンダリング

URL からロードした 3D モデルをレンダリングするには、asset タイプを使用して asset Prop に直接 Asset を渡します。Asset のロードについての詳細は Asset ロードガイド を参照してください。

import { Render } from '@playcanvas/react/components'
import { useModel } from '@playcanvas/react/hooks'

const RenderModel = () => {
  const { asset } = useModel('model.glb')

  if (!asset) return null

  return <Entity>
    <Render type="asset" asset={asset} />
  </Entity>
}

PlayCanvas ドキュメントの Render Component で詳細を確認できます。

プロパティ

Name	Type	Default
type	"asset" | "box" | "capsule" | "cone" | "cylinder" | "plane" | "sphere" | "torus" The type of primitive shape to render.	"box"
asset?	Asset The asset to render.	-
children?	ReactNode	-
isStatic?	boolean Mark meshes as non-movable (optimization).	-
renderStyle?	number Sets the render style of this component's MeshInstances. Can be: - RENDERSTYLE_SOLID - RENDERSTYLE_WIREFRAME - RENDERSTYLE_POINTS Defaults to RENDERSTYLE_SOLID. Gets the render style of this component's MeshInstances.	-
customAabb?	BoundingBox | null Sets the custom object space bounding box that is used for visibility culling of attached mesh instances. This is an optimization, allowing an oversized bounding box to be specified for skinned characters in order to avoid per frame bounding box computations based on bone positions. Gets the custom object space bounding box that is used for visibility culling of attached mesh instances.	-
meshInstances?	MeshInstance[] Sets the array of meshInstances contained in the component. Gets the array of meshInstances contained in the component.	-
lightmapped?	boolean Sets whether the component is affected by the runtime lightmapper. If true, the meshes will be lightmapped after using lightmapper.bake(). Gets whether the component is affected by the runtime lightmapper.	-
castShadows?	boolean Sets whether attached meshes will cast shadows for lights that have shadow casting enabled. Gets whether attached meshes will cast shadows for lights that have shadow casting enabled.	-
receiveShadows?	boolean Sets whether shadows will be cast on attached meshes. Gets whether shadows will be cast on attached meshes.	-
castShadowsLightmap?	boolean Sets whether meshes instances will cast shadows when rendering lightmaps. Gets whether meshes instances will cast shadows when rendering lightmaps.	-
lightmapSizeMultiplier?	number Sets the lightmap resolution multiplier. Gets the lightmap resolution multiplier.	-
layers?	number[] Sets the array of layer IDs (Layer#id ) to which the mesh instances belong. Don't push, pop, splice or modify this array. If you want to change it, set a new one instead. Gets the array of layer IDs (Layer#id ) to which the mesh instances belong.	-
batchGroupId?	number Sets the batch group for the mesh instances in this component (see BatchGroup). Default is -1 (no group). Gets the batch group for the mesh instances in this component (see BatchGroup).	-
material?	Material Sets the material Material that will be used to render the component. The material is ignored for renders of type 'asset'. Gets the material Material that will be used to render the component.	-
materialAssets?	number[] | Asset[] Sets the material assets that will be used to render the component. Each material corresponds to the respective mesh instance. Gets the material assets that will be used to render the component.	-
rootBone?	Entity | null Sets the root bone entity (or entity guid) for the render component. Gets the root bone entity for the render component.	-
materialAsset?	any	-
system?	ComponentSystem The ComponentSystem used to create this Component.	-
entity?	Entity The Entity that this Component is attached to.	-
enabled?	boolean Sets the enabled state of the component. Gets the enabled state of the component.	-