TvT.js
目录
主题颜色

第一个场景

这章节，咱们来快速创建一个属于自己得三维场景,像下面一样。

创建它需要什么

同 three.js 一样，我们需要以下几个对象：场景（scene）、相机（camera）、渲染器（renderer）、灯光（Light）、物体（Objects）

场景（scene）

<script lang="ts" setup>
import { TresCanvas } from '@tresjs/core'
</script>
<template>
  <TresCanvas window-size>
    <!-- 场景里需要的内容挂这里 -->
  </TresCanvas>
</template>

INFO

TresCanvas 会自动在 dom 对应的位置创建一个 Canvas，你可以挂 class 或者直接设置样式。通常可视化全屏应用，我们可以加window-size字段，它将自动匹配窗口的大小。 具体详情请见 跳转章节

相机（camera）

<template>
  <TresCanvas>
    <TresPerspectiveCamera />
  </TresCanvas>
</template>

INFO

TresPerspectiveCamera只是我们举个常用的例子，Tres + OrthographicCamera、StereoCamera、CubeCamera、ArrayCamera都是支持的。 具体详情请见 跳转章节

渲染器（renderer）

渲染器这里暂时不提，因为我们会自动创建出来。具体详情请见 跳转章节

灯光（Light）

<template>
  <TresCanvas>
    <TresPerspectiveCamera />
    <TresAmbientLight />
  </TresCanvas>
</template>

INFO

TresAmbientLight只是我们举个常用的例子，Tres + DirectionalLight、HemisphereLight、LightProbe、PointLight、RectAreaLight、SpotLight都是支持的。

物体（Objects）

<template>
  <TresCanvas>
    <TresPerspectiveCamera />
    <TresAmbientLight />
    <!--  这里挂载了一个物体 start-->

    <TresMesh>
      <!--  它的形状是一个🍩 -->
      <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
      <!--  它是基本型材质：颜色橙 -->
      <TresMeshBasicMaterial color="orange" />
    </TresMesh>

    <!--  这里挂载了一个物体 end -->
  </TresCanvas>
</template>

INFO

如同ThreeJS，我们需要创建一个Mesh对象，并将一个Geometry和一个Material挂到它上面。具体各种物体、各种形状、各种材质，在接下来的文档中，将详细介绍到。

本页目录