1.0.0-alpha.1 • Published 6 months ago
@babyuewjs/core v1.0.0-alpha.1
BabyuewJS
English | 日本語
About
BabyuewJSはBabylon.jsとVue3を使ってWeb 3Dアプリケーションを開発するためのライブラリです。 Babylon.jsが備える3Dシーン構築・レンダリングのための機能と、Vue3が備えるSFCやリアクティビティといった強力な機能とをかけ合わせることで、より良い開発体験を提供します。
Enviroment
- Babylon.js 6.x
- Vue3
- TypeScript
- Vite 4.x
Install
# npm
npm install -D @babyuewjs/core
# yarn
yarn add -D @babyuewjs/core
# pnpm
pnpm add -D @babyuewjs/core
Usage
既存のVue3を使用したプロジェクトにおいて、BabyuewScene
コンポーネントを配置することでBabylon.jsのシーンをレンダリングするためのcanvasが配置され、
そのslots
にBabylon.jsのオブジェクト用コンポーネントを配置していきます。
<script setup lang="ts">
import {
BabyuewScene,
ArcRotateCamera,
DirectionalLight,
Box,
} from "@babyuewjs/core";
</script>
<template>
<BabyuewScene antialias>
<ArcRotateCamera
name="camera"
:alpha="Math.PI / 3"
:beta="Math.PI / 3"
:radius="0.5"
:target="[0, 0.05, 0]"
>
</ArcRotateCamera>
<DirectionalLight
name="light"
:direction="[0.25, -1, -0.6]"
:intensity="1"
></DirectionalLight>
<Box name="my-box" :position="[0, 0.05, 0]" :size="0.1"> </Box>
</BabyuewScene>
</template>
Author
1.0.0-alpha.1
6 months ago
1.0.0-alpha.0
6 months ago