Three Vue3Three Vue3
Guide
  • English
  • 简体中文
GitHub
Guide
  • English
  • 简体中文
GitHub
    • Getting Started
    • Scene
    • SkyBox
      • Default Usage
      • Props
      • Methods
    • Model Loader

      • Component Loader
      • Function Loader
    • Popup
    • Movable Element
    • Animation
    • Mesh

      • Wave Circle Mesh
    • Effect

      • Bloom

type

Class

Default Usage

Click me to view the codes
<template>
  <tv-scene class="scene" @created="created"></tv-scene>
</template>

<script lang="ts" setup>
import { SkyBox } from 'three-vue3'

const skyBox = new SkyBox([
  '/images/examples/skybox/right.jpg',
  '/images/examples/skybox/left.jpg',
  '/images/examples/skybox/top.jpg',
  '/images/examples/skybox/bottom.jpg',
  '/images/examples/skybox/front.jpg',
  '/images/examples/skybox/back.jpg'
])

const created = (scene) => {
  scene.background = skyBox.scene
}
</script>

<style>
.scene {
  margin-top: 10px;
  width: 100%;
  height: 300px;
}
</style>

Props

NameTypeDescription
sceneTHREE.CubeTextureThe cube texture to use for THREE.Scene's background.

Methods

NameParametersDescription
constructor(images: string[]) => voidThe images include six images, which are the right, left, top, bottom, front, back of the cube.
Edit this page on GitHub
Last Updated:
Contributors: Shing, Shing Rui
Prev
Scene