Skip to content
This repository has been archived by the owner on Apr 25, 2023. It is now read-only.

Commit

Permalink
feat: 3D tileset, model, rectangle primitive, more properties for mar…
Browse files Browse the repository at this point in the history 
…ker and scene (#63)
  • Loading branch information
@rot1024
rot1024 committed Aug 9, 2021
1 parent 1729390 commit a88600e
Show file tree
Hide file tree
Showing 44 changed files with 887 additions and 108 deletions.
3 changes: 1 addition & 2 deletions .gitignore
View file
Expand Up @@ -9,5 +9,4 @@ node_modules
__screenshots__
/cypress/videos
/cypress/screenshots
/.env
/.env.local
/.env*
Binary file added .storybook/public/BoxAnimated.glb
View file
Binary file not shown.
Binary file added .storybook/public/tileset/dragon_high.b3dm
View file
Binary file not shown.
Binary file added .storybook/public/tileset/dragon_low.b3dm
View file
Binary file not shown.
Binary file added .storybook/public/tileset/dragon_medium.b3dm
View file
Binary file not shown.
95 changes: 95 additions & 0 deletions .storybook/public/tileset/tileset.json
View file
@@ -0,0 +1,95 @@
{
"asset": {
"version": "1.0"
},
"geometricError": 500,
"root": {
"transform": [
96.86356343768793,
24.848542777253734,
0,
0,
-15.986465724980844,
62.317780594908875,
76.5566922962899,
0,
19.02322243409411,
-74.15554020821229,
64.3356267137516,
0,
1215107.7612304366,
-4736682.902037748,
4081926.095098698,
1
],
"boundingVolume": {
"box": [
0,
0,
0,
7.0955,
0,
0,
0,
3.1405,
0,
0,
0,
5.0375
]
},
"geometricError": 1,
"refine": "REPLACE",
"content": {
"uri": "dragon_low.b3dm"
},
"children": [
{
"boundingVolume": {
"box": [
0,
0,
0,
7.0955,
0,
0,
0,
3.1405,
0,
0,
0,
5.0375
]
},
"geometricError": 0.1,
"content": {
"uri": "dragon_medium.b3dm"
},
"children": [
{
"boundingVolume": {
"box": [
0,
0,
0,
7.0955,
0,
0,
0,
3.1405,
0,
0,
0,
5.0375
]
},
"geometricError": 0,
"content": {
"uri": "dragon_high.b3dm"
}
}
]
}
]
}
}
5 changes: 5 additions & 0 deletions src/components/atoms/Icon/Icons/primModel.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions src/components/atoms/Icon/Icons/primRect.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
29 changes: 29 additions & 0 deletions src/components/atoms/Icon/Icons/primTIleset.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
29 changes: 29 additions & 0 deletions src/components/atoms/Icon/Icons/primTileset.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions src/components/atoms/Icon/icons.ts
View file
Expand Up @@ -5,6 +5,9 @@ import PrimMarker from "./Icons/primMarkerIcon.svg";
import PrimPhotoOverlay from "./Icons/primPhotoIcon.svg";
import PrimResource from "./Icons/primResourceIcon.svg";
import PrimSphere from "./Icons/primSphereIcon.svg";
import PrimRect from "./Icons/primRect.svg";
import PrimModel from "./Icons/primModel.svg";
import PrimTileset from "./Icons/primTileset.svg";

// Built-in Widgets
import Widgets from "./Icons/widgetsIcon.svg";
Expand Down Expand Up @@ -125,6 +128,9 @@ export default {
photooverlay: PrimPhotoOverlay,
resource: PrimResource,
ellipsoid: PrimSphere,
rect: PrimRect,
model: PrimModel,
tileset: PrimTileset,
widget: Widgets,
menu: WidgetMenu,
storytelling: WidgetStory,
Expand Down
1 change: 0 additions & 1 deletion src/components/molecules/Common/AssetModal/index.stories.tsx
View file
Expand Up @@ -113,7 +113,6 @@ Selected.args = {

File.args = {
assets: assets,
fileType: "file",
};

Video.args = {
Expand Down
8 changes: 6 additions & 2 deletions src/components/molecules/Common/AssetModal/index.tsx
View file
Expand Up @@ -24,7 +24,7 @@ export type Props = {
onCreateAsset?: (files: FileList) => void;
onSelect?: (value: string | null) => void;
value?: string;
fileType?: "image" | "video" | "file";
fileType?: "image" | "video";
};

type Tabs = "assets" | "url";
Expand Down Expand Up @@ -92,7 +92,11 @@ const AssetModal: React.FC<Props> = ({
const filteredAssets = useMemo(() => {
if (!assets) return;
return assets
.filter(a => a.url.match(fileType === "file" ? /\.kml$/ : /\.(jpg|jpeg|png|gif)$/))
.filter(
a =>
!fileType ||
a.url.match(fileType === "image" ? /\.(jpg|jpeg|png|gif|webp)$/ : /\.(mp4|webm)$/),
)
.reverse(); // reversed to show newest at the top
}, [assets, fileType]);

Expand Down
8 changes: 4 additions & 4 deletions src/components/molecules/EarthEditor/PropertyPane/PropertyField/URLField/index.tsx
View file
Expand Up @@ -10,21 +10,21 @@ import AssetModal, { Asset as AssetType } from "@reearth/components/molecules/Co
export type Asset = AssetType;

export type Props = FieldProps<string> & {
onRemoveFile?: () => void;
fileType?: "image" | "video" | "file";
fileType?: "image" | "video";
assets?: Asset[];
onRemoveFile?: () => void;
onCreateAsset?: (files: FileList) => void;
};

const URLField: React.FC<Props> = ({
name,
value,
onChange,
linked,
overridden,
onCreateAsset,
fileType,
assets,
onChange,
onCreateAsset,
}) => {
const intl = useIntl();
const [isAssetModalOpen, setAssetModalOpen] = useState(false);
Expand Down
6 changes: 1 addition & 5 deletions src/components/molecules/EarthEditor/PropertyPane/PropertyField/index.tsx
View file
Expand Up @@ -216,11 +216,7 @@ const PropertyField: React.FC<Props> = ({
) : type === "url" ? (
<URLField
{...commonProps}
fileType={
schema.ui === "image" || schema.ui === "video" || schema.ui === "file"
? schema.ui
: undefined
}
fileType={schema.ui === "image" || schema.ui === "video" ? schema.ui : undefined}
assets={assets}
onCreateAsset={onCreateAsset}
/>
Expand Down
4 changes: 2 additions & 2 deletions src/components/molecules/EarthEditor/PropertyPane/PropertyItem/index.tsx
View file
Expand Up @@ -193,7 +193,7 @@ const PropertyItem: React.FC<Props> = ({
eventProps,
f =>
(...args: any[]) =>
f?.(item.schemaGroup, selectedItem.id, ...args),
f?.(item.schemaGroup, isList ? selectedItem.id : undefined, ...args),
);
const field = selectedItem?.fields.find(f2 => f2.id === f.id);
const condf = f.only && selectedItem?.fields.find(f2 => f2.id === f.only?.field);
Expand All @@ -211,7 +211,7 @@ const PropertyItem: React.FC<Props> = ({
};
})
: [],
[eventProps, item, selectedItem],
[eventProps, item, selectedItem, isList],
);

const handleItemMove = useCallback(
Expand Down
6 changes: 2 additions & 4 deletions src/components/molecules/Visualizer/Block/DataList/index.tsx
View file
@@ -1,6 +1,6 @@
import React, { Fragment, useCallback, useState } from "react";

import { styled, fonts } from "@reearth/theme";
import { styled } from "@reearth/theme";
import { Typography, typographyStyles } from "@reearth/util/value";
import Icon from "@reearth/components/atoms/Icon";

Expand Down Expand Up @@ -75,9 +75,7 @@ const Wrapper = styled(Border)<{
typography?: Typography;
}>`
margin: 0 8px;
font-size: ${fonts.sizes.s}px;
color: ${({ theme }) => theme.infoBox.mainText};
${({ typography }) => typographyStyles(typography)}
${({ typography }) => typographyStyles({ ...typography })}
min-height: 70px;
`;

Expand Down
23 changes: 17 additions & 6 deletions src/components/molecules/Visualizer/Engine/Cesium/Ellipsoid/index.tsx
View file
Expand Up @@ -6,21 +6,30 @@ import { Cartesian3 } from "cesium";
import { LatLng, toColor } from "@reearth/util/value";

import type { Props as PrimitiveProps } from "../../../Primitive";
import { heightReference, shadowMode } from "../common";

export type Props = PrimitiveProps<Property>;

export type Property = {
default?: {
position?: LatLng;
height?: number;
heightReference?: "none" | "clamp" | "relative";
shadows?: "disabled" | "enabled" | "cast_only" | "receive_only";
radius?: number;
fillColor?: string;
};
};

const Ellipsoid: React.FC<PrimitiveProps<Property>> = ({ primitive }) => {
const { id, isVisible, property } = primitive ?? {};
const { radius = 1000 } = property?.default ?? {};
const {
heightReference: hr,
shadows,
radius = 1000,
fillColor,
} = (property as Property | undefined)?.default ?? {};

const position = useMemo(() => {
const { position, height } = property?.default ?? {};
return position ? Cartesian3.fromDegrees(position.lng, position.lat, height ?? 0) : undefined;
Expand All @@ -34,14 +43,16 @@ const Ellipsoid: React.FC<PrimitiveProps<Property>> = ({ primitive }) => {
return new Cartesian3(radius, radius, radius);
}, [radius]);

const material = useMemo(
() => toColor(property?.default?.fillColor),
[property?.default?.fillColor],
);
const material = useMemo(() => toColor(fillColor), [fillColor]);

return !isVisible ? null : (
<Entity id={id} position={position}>
<EllipsoidGraphics radii={raddi} material={material} />
<EllipsoidGraphics
radii={raddi}
material={material}
heightReference={heightReference(hr)}
shadows={shadowMode(shadows)}
/>
</Entity>
);
};
Expand Down
21 changes: 21 additions & 0 deletions src/components/molecules/Visualizer/Engine/Cesium/Marker/index.stories.tsx
View file
Expand Up @@ -176,6 +176,27 @@ ImageWithCropAndShadow.args = {
},
};

export const ImageWithColor = Template.bind({});
ImageWithColor.args = {
...Template.args,
primitive: {
id: "",
isVisible: true,
property: {
default: {
location,
height: location.height,
style: "image",
image: `${process.env.PUBLIC_URL}/sample.png`,
imageCrop: "circle",
imageShadow: true,
extrude: true,
imageColor: "red",
},
},
},
};

export const ImageWithRightLabel = Template.bind({});
ImageWithRightLabel.args = {
...Template.args,
Expand Down

0 comments on commit a88600e

Please sign in to comment.