kitchen-color-studio
Version:
an open-source color editor for designing color system
72 lines • 2.69 kB
JavaScript
import { Environment, OrbitControls, Stage } from '@react-three/drei';
import { Canvas } from '@react-three/fiber';
import { useThemeMode } from 'antd-style';
import { Suspense, memo, useRef } from 'react';
import { GenColor3D } from "../..";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var cube = ['https://gw.alipayobjects.com/zos/antfincdn/A2UP6WYMLw/px.png', 'https://gw.alipayobjects.com/zos/antfincdn/YrnP3LArEC/nx.png', 'https://gw.alipayobjects.com/zos/antfincdn/TFxGCynnr3/py.png', 'https://gw.alipayobjects.com/zos/antfincdn/0xv2XBW3oq/ny.png', 'https://gw.alipayobjects.com/zos/antfincdn/wbdSuRHSRo/pz.png', 'https://gw.alipayobjects.com/zos/antfincdn/pzB8izsxKd/nz.png'];
var ThreeView = /*#__PURE__*/memo(function (_ref) {
var config = _ref.config,
data = _ref.data;
var _useThemeMode = useThemeMode(),
isDarkMode = _useThemeMode.isDarkMode;
var ref = useRef();
var colorType = config.colorType,
threeZoom = config.threeZoom,
autoRotate = config.autoRotate,
showFloor = config.showFloor,
hueZoom = config.hueZoom;
// @ts-ignore
return /*#__PURE__*/_jsxs(Canvas, {
camera: {
position: [0, 0, 0],
fov: 55
},
gl: {
preserveDrawingBuffer: true
},
shadows: true,
style: {
width: '100%',
height: '100%',
background: isDarkMode ? '#222' : '#f1f1f1'
},
children: [/*#__PURE__*/_jsx(Suspense, {
fallback: null,
children: /*#__PURE__*/_jsxs(Stage, {
adjustCamera: true
// @ts-ignore
,
controls: ref,
environment: undefined,
shadows: true,
children: [/*#__PURE__*/_jsx(Environment, {
files: cube
}), data.map(function (item) {
return /*#__PURE__*/_jsx(GenColor3D, {
colorType: colorType,
hueZoom: hueZoom,
name: item.name,
scale: isDarkMode ? item.scales.dark : item.scales.light,
zoom: threeZoom
}, item.name);
})]
})
}), showFloor && /*#__PURE__*/_jsx("gridHelper", {
/* eslint-disable-next-line react/no-unknown-property */
args: [1000, 50, isDarkMode ? '#444' : '#ccc', isDarkMode ? '#333' : '#ddd']
/* eslint-disable-next-line react/no-unknown-property */,
castShadow: false
/* eslint-disable-next-line react/no-unknown-property */,
position: [0, -1, 0]
/* eslint-disable-next-line react/no-unknown-property */,
receiveShadow: false
}), /*#__PURE__*/_jsx(OrbitControls, {
autoRotate: autoRotate,
makeDefault: true,
ref: ref
})]
});
});
export default ThreeView;