hpg-r3f-model-scene
Version:
Pretty Footer react component used in ant.design
165 lines (163 loc) • 8.02 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.THREE = void 0;
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _fiber = require("@react-three/fiber");
var _drei = require("@react-three/drei");
var _Loader = _interopRequireDefault(require("./components/Loader"));
var _ScreenShot = _interopRequireDefault(require("./components/ScreenShot"));
var _Environment = _interopRequireDefault(require("./components/Environment"));
var THREE1 = _interopRequireWildcard(require("three"));
var _lodash = require("lodash");
var _excluded = ["prefixCls", "className", "style", "bottom", "maxColumnsPerRow", "backgroundColor", "columnLayout", "theme", "onChangeMaterial", "exportScene", "screenshot", "material", "onScreenShot", "modelStyle", "margin"];
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || (0, _typeof2.default)(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var THREE = THREE1;
exports.THREE = THREE;
var Earth = /*#__PURE__*/(0, _react.lazy)(function () {
return Promise.resolve().then(function () {
return _interopRequireWildcard(require('./components/Earth'));
});
});
var ExampleModel = /*#__PURE__*/(0, _react.lazy)(function () {
return Promise.resolve().then(function () {
return _interopRequireWildcard(require('./components/ExampleModel'));
});
});
function ResizeGL() {
var _useThree = (0, _fiber.useThree)(),
gl = _useThree.gl;
(0, _react.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', (0, _lodash.debounce)(handleResize, 10));
return function () {
window.removeEventListener('resize', handleResize);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return /*#__PURE__*/_react.default.createElement(_react.default.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 = (0, _objectWithoutProperties2.default)(props, _excluded);
var footerClassName = (0, _classnames.default)("".concat(prefixCls), className, (0, _defineProperty2.default)({}, "".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.default.createElement("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, restProps), {}, {
className: footerClassName,
style: (0, _objectSpread2.default)({}, style)
}), /*#__PURE__*/_react.default.createElement(_fiber.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.default.createElement(ResizeGL, null), /*#__PURE__*/_react.default.createElement(_drei.Environment
// background={false}
, {
// background={false}
files: "https://oss-sxt-dev.51ygp.com/tmp/Industrial_Room1.hdr"
}), /*#__PURE__*/_react.default.createElement("ambientLight", {
intensity: 1.5,
color: '#cccccc'
}), !screenshot && /*#__PURE__*/_react.default.createElement(_Environment.default, {
color: [0, 0, 0]
}), screenshot && /*#__PURE__*/_react.default.createElement(_ScreenShot.default, {
onScreenShot: onScreenShot
}), /*#__PURE__*/_react.default.createElement(_react.Suspense, {
fallback: /*#__PURE__*/_react.default.createElement(_Loader.default, null)
}, /*#__PURE__*/_react.default.createElement(_drei.Bounds, {
fit: true,
clip: true,
observe: true,
damping: 6,
margin: screenshot ? margin || 0.72 : margin || 0.8
}, modelStyle == 'sphere' ? /*#__PURE__*/_react.default.createElement(Earth, {
material: material || {},
materialChange: function materialChange(inode) {
if (onChangeMaterial) {
onChangeMaterial(inode);
}
},
exportScene: exportScene
}) : /*#__PURE__*/_react.default.createElement(ExampleModel, {
material: material || {},
materialChange: function materialChange(inode) {
if (onChangeMaterial) {
onChangeMaterial(inode);
}
},
exportScene: exportScene
}))), /*#__PURE__*/_react.default.createElement(_drei.OrbitControls, {
makeDefault: true
})));
};
var _default = ModelScene;
exports.default = _default;