<Render/>

Render 为实体添加 RenderComponent，显示三维资源或图元，type 选择形状。

演示

渲染基本形状 - 查看代码

代码

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>
    </>
  )
}

渲染资源

按 URL 加载模型后，type 设为 asset，将资源传入 asset prop，详见加载指南。

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>
}

详见 RenderComponent。

属性

名称	类型与说明	默认值
type	"asset" | "box" | "capsule" | "cone" | "cylinder" | "plane" | "sphere" | "torus" 要渲染的基本形状类型。	"box"
asset?	Asset<string> 要渲染的资源。	-
children?	ReactNode	-
isStatic?	boolean 将网格标为不可移动，用于优化。	-
renderStyle?	number 设置或获取组件网格实例的渲染样式：RENDERSTYLE_SOLID、RENDERSTYLE_WIREFRAME 或 RENDERSTYLE_POINTS，默认 RENDERSTYLE_SOLID。	-
customAabb?	BoundingBox | null 设置或获取附加网格实例用于可见性剔除的自定义对象空间包围盒。可为蒙皮角色指定较大包围盒，避免每帧根据骨骼位置重新计算。	-
meshInstances?	readonly MeshInstance[] 设置或获取组件包含的 meshInstances 数组。替换时使用 setter，不要直接修改返回的数组。	-
lightmapped?	boolean 设置或获取组件是否受运行时光照贴图生成器影响。true 时调用 lightmapper.bake() 后为网格生成光照贴图。	-
castShadows?	boolean 设置或获取附加网格是否为启用阴影投射的光源投射阴影。	-
shadowCascadeMask?	number 设置或获取网格对 LIGHTTYPE_DIRECTIONAL 阴影级联的贡献位掩码。组合 SHADOW_CASCADE_0 至 SHADOW_CASCADE_3，仅在 castShadows 启用时有效。默认 SHADOW_CASCADE_ALL，参与所有级联。此值只在渲染时按级联过滤，不从 Layer 阴影投射者列表移除网格；完全关闭请用 castShadows。	-
receiveShadows?	boolean 设置或获取附加网格是否接收阴影。	-
castShadowsLightmap?	boolean 设置或获取渲染光照贴图时网格实例是否投射阴影。	-
lightmapSizeMultiplier?	number 设置或获取光照贴图分辨率倍率。	-
layers?	readonly number[] 设置或获取网格实例所属图层 ID 数组（Layer#id）。不要直接 push、pop、splice 或修改，应赋入新数组。	-
batchGroupId?	number 设置或获取组件中网格实例的批处理组（BatchGroup），默认 -1，即无分组。	-
material?	Material 设置或获取组件渲染使用的 Material。type 为 asset 时忽略此材质；instantiateRenderEntity 创建的实体均属于 asset，因此该 setter 对容器加载的模型无效。此时应分别设置 RenderComponent#meshInstances 中各项的 material。	-
materialAssets?	Asset<string>[] | number[] 设置或获取组件渲染使用的材质资源，每个材质对应相应网格实例。	-
rootBone?	Entity | null 设置渲染组件的根骨骼实体或实体 GUID；获取时返回根骨骼实体。	-
materialAsset?	any	-
system?	ComponentSystem 创建此组件的 ComponentSystem。	-
entity?	Entity 此组件挂载的 Entity。	-
enabled?	boolean 设置或获取组件的启用状态。	-