hpg-r3f-model-scene
Version:
Pretty Footer react component used in ant.design
149 lines (148 loc) • 5.87 kB
JavaScript
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["prefixCls", "className", "style", "bottom", "maxColumnsPerRow", "backgroundColor", "columnLayout", "theme", "onChangeMaterial", "exportScene", "screenshot", "material", "onScreenShot", "modelStyle", "margin"];
import React, { Suspense, lazy, useEffect } from 'react';
import classNames from 'classnames';
import { Canvas, useThree } from '@react-three/fiber';
import { Bounds, OrbitControls, Environment } from '@react-three/drei';
import Loader from './components/Loader';
import ScreenShot from './components/ScreenShot';
import EnvironmentImp from './components/Environment';
import * as THREE1 from 'three';
import { debounce } from 'lodash';
export var THREE = THREE1;
var Earth = /*#__PURE__*/lazy(function () {
return import('./components/Earth');
});
var ExampleModel = /*#__PURE__*/lazy(function () {
return import('./components/ExampleModel');
});
function ResizeGL() {
var _useThree = useThree(),
gl = _useThree.gl;
useEffect(function () {
var handleResize = function handleResize() {
var width = window.innerWidth - 400;
var height = window.innerHeight - 50;
gl.setSize(width, height);
gl.setPixelRatio(window.devicePixelRatio);
// camera.updateProjectionMatrix();
};
window.addEventListener('resize', debounce(handleResize, 10));
return function () {
window.removeEventListener('resize', handleResize);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return /*#__PURE__*/React.createElement(React.Fragment, null);
}
var ModelScene = function ModelScene(props) {
var _props$prefixCls = props.prefixCls,
prefixCls = _props$prefixCls === void 0 ? 'model-scene' : _props$prefixCls,
className = props.className,
style = props.style,
bottom = props.bottom,
maxColumnsPerRow = props.maxColumnsPerRow,
backgroundColor = props.backgroundColor,
columnLayout = props.columnLayout,
_props$theme = props.theme,
theme = _props$theme === void 0 ? 'dark' : _props$theme,
onChangeMaterial = props.onChangeMaterial,
exportScene = props.exportScene,
_props$screenshot = props.screenshot,
screenshot = _props$screenshot === void 0 ? false : _props$screenshot,
material = props.material,
onScreenShot = props.onScreenShot,
_props$modelStyle = props.modelStyle,
modelStyle = _props$modelStyle === void 0 ? 'sphere' : _props$modelStyle,
_props$margin = props.margin,
margin = _props$margin === void 0 ? 2 : _props$margin,
restProps = _objectWithoutProperties(props, _excluded);
var footerClassName = classNames("".concat(prefixCls), className, _defineProperty({}, "".concat(prefixCls, "-").concat(theme), !!theme));
var shouldWrap = typeof maxColumnsPerRow === 'number' && maxColumnsPerRow > 0;
var lightFormerIntensity = 10;
// const [material] = useState<INodeMaterial>({
// color: '#ffffff',
// type: 'PBR',
// // map: {
// // url: 'https://hgp-public.oss-cn-hangzhou.aliyuncs.com/pbr/mapping/cf88b135c8684289a6f577aeeefbe8df.jpg',
// // // format: 1023,
// // // minFilter: 1008,
// // // magFilter: 1006,
// // // wrapS: 1000,
// // // wrapT: 1000,
// // // rotation: 0,
// // // offset: [0, 0],
// // // repeat: [1, 1],
// // userData: {
// // url: 'https://hgp-public.oss-cn-hangzhou.aliyuncs.com/pbr/mapping/cf88b135c8684289a6f577aeeefbe8df.jpg',
// // basis:
// // 'https://hgp-public-test.oss-cn-hangzhou.aliyuncs.com/texturize/df981eb0-f586-4b46-86af-0135f04be228.basis',
// // },
// // },
// });
var myCamera = {
position: [-80, 50, 100],
fov: 75,
near: 0.1,
far: 5000
};
return /*#__PURE__*/React.createElement("div", _objectSpread(_objectSpread({}, restProps), {}, {
className: footerClassName,
style: _objectSpread({}, style)
}), /*#__PURE__*/React.createElement(Canvas, {
gl: {
antialias: true,
powerPreference: 'high-performance',
precision: 'highp',
toneMapping: THREE1.LinearToneMapping
},
orthographic: true,
camera: {
position: [-80, 50, 100],
fov: 75,
near: 0.1,
far: 5000
}
}, !screenshot && /*#__PURE__*/React.createElement(ResizeGL, null), /*#__PURE__*/React.createElement(Environment
// background={false}
, {
// background={false}
files: "https://oss-sxt-dev.51ygp.com/tmp/Industrial_Room1.hdr"
}), /*#__PURE__*/React.createElement("ambientLight", {
intensity: 1.5,
color: '#cccccc'
}), !screenshot && /*#__PURE__*/React.createElement(EnvironmentImp, {
color: [0, 0, 0]
}), screenshot && /*#__PURE__*/React.createElement(ScreenShot, {
onScreenShot: onScreenShot
}), /*#__PURE__*/React.createElement(Suspense, {
fallback: /*#__PURE__*/React.createElement(Loader, null)
}, /*#__PURE__*/React.createElement(Bounds, {
fit: true,
clip: true,
observe: true,
damping: 6,
margin: screenshot ? margin || 0.72 : margin || 0.8
}, modelStyle == 'sphere' ? /*#__PURE__*/React.createElement(Earth, {
material: material || {},
materialChange: function materialChange(inode) {
if (onChangeMaterial) {
onChangeMaterial(inode);
}
},
exportScene: exportScene
}) : /*#__PURE__*/React.createElement(ExampleModel, {
material: material || {},
materialChange: function materialChange(inode) {
if (onChangeMaterial) {
onChangeMaterial(inode);
}
},
exportScene: exportScene
}))), /*#__PURE__*/React.createElement(OrbitControls, {
makeDefault: true
})));
};
export default ModelScene;