Skip to content

Commit

Permalink
Merge pull request #66 from yushiang-demo/dev
Browse files Browse the repository at this point in the history
v1.4.1
  • Loading branch information
tsengyushiang authored Nov 14, 2023
2 parents 6e00c61 + cfdc830 commit 85bf454
Show file tree
Hide file tree
Showing 18 changed files with 148 additions and 81 deletions.
19 changes: 18 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,22 @@ The format is based on [Keep a Changelog](https://github.com/olivierlacan/keep-a

### Removed

## [1.4.1] - 2023-11-14

### Added

### Changed

- Enhance performance of `PanoramaTextureMesh`. (https://github.com/yushiang-demo/pano-to-mesh/pull/62)

### Fixed

- Fix sonarqube bug and code smells. (https://github.com/yushiang-demo/pano-to-mesh/pull/65) (https://github.com/yushiang-demo/pano-to-mesh/pull/67)
- Fix model normalization and upgrade to `three^0.158`. (https://github.com/yushiang-demo/pano-to-mesh/pull/64)
- Fix size error and animation not found issue when changing mesh. (https://github.com/yushiang-demo/pano-to-mesh/pull/63)

### Removed

## [1.4.0] - 2023-10-28

### Added
Expand Down Expand Up @@ -155,7 +171,8 @@ Codes without pull requests won't be recorded.

### Removed

[unreleased]: https://github.com/yushiang-demo/PanoToMesh/compare/v1.4.0...HEAD
[unreleased]: https://github.com/yushiang-demo/PanoToMesh/compare/v1.4.1...HEAD
[1.4.1]: https://github.com/yushiang-demo/PanoToMesh/compare/v1.4.0...v1.4.1
[1.4.0]: https://github.com/yushiang-demo/PanoToMesh/compare/v1.3.0...v1.4.0
[1.3.0]: https://github.com/yushiang-demo/PanoToMesh/compare/v1.2.0...v1.3.0
[1.2.0]: https://github.com/yushiang-demo/PanoToMesh/compare/v1.1.1...v1.2.0
Expand Down
8 changes: 5 additions & 3 deletions Dockerfile
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
FROM node:18-alpine AS base

# Stage 1: Build the application
FROM node:18-alpine as builder
FROM base AS builder

# Set the working directory
WORKDIR /app
Expand All @@ -8,13 +10,13 @@ WORKDIR /app
ENV NODE_ENV production

# Copy source code
COPY ./ ./
COPY . .

# Install and build
RUN yarn && yarn build

# Stage 2: Create the final image
FROM node:18-alpine
FROM base AS runner

# Set the working directory
WORKDIR /app
Expand Down
4 changes: 2 additions & 2 deletions apps/editors/decoration/ModeSwitch/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ const ModeSwitch = ({ mode, setMode, data }) => {
const changeMode = (mode) => () => setMode(mode);
return (
<Toolbar>
{data.map(({ Component, targetMode }, index) => (
{data.map(({ Component, targetMode }) => (
<Component
key={index}
key={targetMode}
$highlight={mode === targetMode}
onClick={changeMode(targetMode)}
/>
Expand Down
2 changes: 2 additions & 0 deletions apps/editors/decoration/media.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import { v4 as uuid } from "uuid";
import { DEFAULT_PROPS } from "../../../components/MediaManager/types";

export const getNewMedia = (type, transformation) => {
if (!transformation) return null;

const baseProps = {
id: uuid(),
transformation,
type,
readonly: false,
Expand Down
4 changes: 2 additions & 2 deletions components/MediaManager/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,8 @@ const MediaManager = ({ three, data, readonly: globalReadonly }) => {
}
};

return data.map((prop, index) => (
<React.Fragment key={index}>{getMediaByType(prop)}</React.Fragment>
return data.map((prop) => (
<React.Fragment key={prop.id}>{getMediaByType(prop)}</React.Fragment>
));
};

Expand Down
2 changes: 1 addition & 1 deletion components/ObjectSelector/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const ObjectSelector = ({ media, mouse, ...props }, ref) => {
const Component = data.type === MEDIA_3D.MODEL ? Model : Basic;
return (
<Component
key={index}
key={data.id}
type={data.type}
data={data.data}
transformation={data.transformation}
Expand Down
4 changes: 2 additions & 2 deletions components/RouteSwitch/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ const RouterSwitch = ({ data }) => {

return (
<FloatDiv>
{data.map(({ link, Icon }, index) => (
<Item key={index} onClick={redirectTo(link)}>
{data.map(({ link, Icon }) => (
<Item key={link} onClick={redirectTo(link)}>
<Icon $highlight={needsHighlight(link)} />
</Item>
))}
Expand Down
4 changes: 2 additions & 2 deletions components/Select/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@ const Select = ({ candidates, current, onChange }) => {
<Wrapper>
<Current tabIndex={0}>{current}</Current>
<Menu tabIndex={1}>
{candidates.map((candidate,index) => {
{candidates.map((candidate) => {
const Component =
candidate === current ? HighlightMenuItem : MenuItem;
return (
<Component
key={index}
key={candidate}
onClick={() => {
onChange(candidate);
}}
Expand Down
4 changes: 2 additions & 2 deletions packages/three/components/Light/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@ const Light = ({ three }) => {
useEffect(() => {
const { scene } = three;

const light = new THREE.AmbientLight(0x404040); // soft white light
const light = new THREE.AmbientLight(0xffffff, 0.5); // soft white light
scene.add(light);

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
const directionalLight = new THREE.DirectionalLight(0xffffff);
scene.add(directionalLight);

return () => {
Expand Down
5 changes: 4 additions & 1 deletion packages/three/components/MeshIndexMap/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,10 @@ const MeshIndexMap = ({ three, meshes, mouse }, ref) => {
if (child.material) {
child.material.dispose();
child.material = new THREE.MeshBasicMaterial({
color: colors[index],
color: new THREE.Color().setHex(
colors[index],
THREE.LinearSRGBColorSpace
),
});
}
});
Expand Down
15 changes: 14 additions & 1 deletion packages/three/components/PanoramaTextureMesh/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,20 @@ const PanoramaTextureMesh = (
dispose: disposeTexturePostEffect,
material: dilationMaterial,
} = TexturePostEffect(texture, Shaders.fragmentShaders.dilation);
const stopTexturePostEffect = addBeforeRenderEvent(renderDilatedTexture);

const renderOnce = (render) => {
let rendered = false;
return (props) => {
if (rendered) return;

rendered = true;
return render(props);
};
};

const stopTexturePostEffect = addBeforeRenderEvent(
renderOnce(renderDilatedTexture)
);
Shaders.setUniforms.dilation(dilationMaterial, {
kernel: 5,
});
Expand Down
128 changes: 77 additions & 51 deletions packages/three/components/TransformControls/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,73 @@ export const TRANSFORM_CONTROLS_MODE = {
const TransformControls = (() => {
const object = new THREE.Mesh();

const initControls = ({ three, setTransformControls }) => {
const { scene, cameraControls } = three;

const control = new Controls(
cameraControls.getCamera(),
cameraControls.domElement
);
setTransformControls(control);
control.setSpace("local");
object.frustumCulled = false;
scene.add(object);

control.attach(object);
scene.add(control);

return () => {
scene.remove(object);
scene.remove(control);
control.dispose();
};
};

const bindChangedEvents = ({
three,
transformControls,
onChange,
onDraggingChanged,
}) => {
if (!transformControls) return;

const { cameraControls } = three;
const { onBeforeRender } = object;
const draggingChanged = (event) => {
const dragging = event.value;
onDraggingChanged(dragging);
cameraControls.setEnable(!dragging);
object.onBeforeRender = dragging
? () => {
onChange({
position: object.position.toArray(),
scale: object.scale.toArray(),
quaternion: object.quaternion.toArray(),
});
}
: onBeforeRender;
};
transformControls.addEventListener("dragging-changed", draggingChanged);

return () => {
transformControls.removeEventListener(
"dragging-changed",
draggingChanged
);
};
};

const changeControlsMode = ({ mode, transformControls }) => {
if (!transformControls) return;
transformControls.setMode(mode);
};

const setControlsTransform = ({ position, scale, quaternion }) => {
if (position) object.position.fromArray(position);
if (quaternion) object.quaternion.fromArray(quaternion);
if (scale) object.scale.fromArray(scale);
};

return ({
three,
position,
Expand All @@ -23,65 +90,24 @@ const TransformControls = (() => {
const [transformControls, setTransformControls] = useState(null);

useEffect(() => {
const { scene, cameraControls } = three;

const control = new Controls(
cameraControls.getCamera(),
cameraControls.domElement
);
setTransformControls(control);
control.setSpace("local");
object.frustumCulled = false;
scene.add(object);

control.attach(object);
scene.add(control);

return () => {
scene.remove(object);
scene.remove(control);
control.dispose();
};
return initControls({ three, setTransformControls });
}, [three]);

useEffect(() => {
if (!transformControls) return;

const { cameraControls } = three;
const { onBeforeRender } = object;
const draggingChanged = (event) => {
const dragging = event.value;
onDraggingChanged(dragging);
cameraControls.setEnable(!dragging);
object.onBeforeRender = dragging
? () => {
onChange({
position: object.position.toArray(),
scale: object.scale.toArray(),
quaternion: object.quaternion.toArray(),
});
}
: onBeforeRender;
};
transformControls.addEventListener("dragging-changed", draggingChanged);

return () => {
transformControls.removeEventListener(
"dragging-changed",
draggingChanged
);
};
return bindChangedEvents({
three,
transformControls,
onChange,
onDraggingChanged,
});
}, [three, transformControls, onChange, onDraggingChanged]);

useEffect(() => {
if (!transformControls) return;
transformControls.setMode(mode);
}, [three, mode, transformControls]);
changeControlsMode({ mode, transformControls });
}, [mode, transformControls]);

useEffect(() => {
if (position) object.position.fromArray(position);
if (quaternion) object.quaternion.fromArray(quaternion);
if (scale) object.scale.fromArray(scale);
setControlsTransform({ position, scale, quaternion });
}, [position, scale, quaternion]);

return null;
Expand Down
12 changes: 7 additions & 5 deletions packages/three/helpers/MediaLoader.js
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@ const loadAnimations = (gltf) => {
};

const setTime = (normalizedTime) => {
if (!current) return;
const time = current.duration * normalizedTime;
mixer.setTime(time);
};
Expand All @@ -100,24 +101,25 @@ export const getModal = async ({ src }) => {
normalizeGroup.rotateX(Math.PI / 2);

const mesh = gltf.scene;
normalizeGroup.add(mesh);

const boundingBox = new THREE.Box3();

mesh.traverse((object) => {
object.updateMatrixWorld(true);

if (object.isMesh) {
boundingBox.expandByObject(object);
object.frustumCulled = false;
object.castShadow = true;
}
});

const boundingBox = new THREE.Box3();
boundingBox.setFromObject(mesh, true);
const size = new THREE.Vector3();
boundingBox.getSize(size);
const normalizeScale = Math.min(1 / size.x, 1 / size.y, 1 / size.z);
normalizeGroup.scale.set(normalizeScale, normalizeScale, normalizeScale);
normalizeGroup.scale.setScalar(normalizeScale);

const object = new THREE.Group();
normalizeGroup.add(mesh);
object.add(normalizeGroup);

const dispose = () => {
Expand Down
2 changes: 1 addition & 1 deletion packages/three/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@
"dependencies": {
"react": "18.2.0",
"react-dom": "18.2.0",
"three": "^0.149.0"
"three": "^0.158.0"
}
}
3 changes: 1 addition & 2 deletions pages/_document.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import Document from "next/document";
import { Html, Head, Main, NextScript } from "next/document";
import Document, { Html, Head, Main, NextScript } from "next/document";
import { ServerStyleSheet } from "styled-components";

export default class MyDocument extends Document {
Expand Down
Binary file added public/resources/Soldier.glb
Binary file not shown.
5 changes: 4 additions & 1 deletion public/resources/media.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>Pano-to-mesh</title>
</head>
<body>
<h1>Pano-to-mesh</h1>
</body>
Expand Down
Loading

1 comment on commit 85bf454

@vercel
Copy link

@vercel vercel bot commented on 85bf454 Nov 14, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

pano-to-mesh – ./

pano-to-mesh.vercel.app
pano-to-mesh-git-main-yushiang.vercel.app
pano-to-mesh-yushiang.vercel.app

Please sign in to comment.