Skip to content

Commit

Permalink
add camera vertical/horizontal rotation
Browse files Browse the repository at this point in the history
  • Loading branch information
Tony Tao committed Sep 12, 2023
1 parent 2cf528c commit 3875e59
Show file tree
Hide file tree
Showing 8 changed files with 954 additions and 346 deletions.
6 changes: 3 additions & 3 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
"dependencies": {
"@types/three": "^0.143.0",
"three": "^0.143.0",
"vue": "^3.2.25"
"vue": "^3.2.28"
},
"devDependencies": {
"@vitejs/plugin-vue": "^2.3.3",
Expand Down
24 changes: 24 additions & 0 deletions readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -597,6 +597,30 @@ Use tags in your components`<vue3dLoader></vue3dLoader>`
The damping inertia used if enableDamping is set to true. [dampingFactor](https://threejs.org/docs/index.html#examples/zh/controls/OrbitControls.dampingFactor)
</td>
</tr>
<tr>
<td>
verticalCtrl
</td>
<td>boolean | object</td>
<td>false</td>
<td>-</td>
<td>

true,only enable vertical rotation of the camera
</td>
</tr>
<tr>
<td>
horizontalCtrl
</td>
<td>boolean | object</td>
<td>false</td>
<td>-</td>
<td>

true,only enable horizontal rotation of the camera
</td>
</tr>
</table>

### Events
Expand Down
24 changes: 24 additions & 0 deletions readme_CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -597,6 +597,30 @@ import { vue3dLoader } from "vue-3d-loader"; // 注意 vue3dLoader 写在 {...}
enableDamping必须为true,此选项才有效。[dampingFactor](https://threejs.org/docs/index.html#examples/zh/controls/OrbitControls.dampingFactor)用于设置阻尼惯性大小。
</td>
</tr>
<tr>
<td>
verticalCtrl
</td>
<td>boolean | object</td>
<td>false</td>
<td>-</td>
<td>

为true,仅能垂直旋转相机。
</td>
</tr>
<tr>
<td>
horizontalCtrl
</td>
<td>boolean | object</td>
<td>false</td>
<td>-</td>
<td>

为true,仅能水平旋转相机。
</td>
</tr>
</table>

### 事件
Expand Down
65 changes: 56 additions & 9 deletions src/3dLoader/vue3dLoader.vue
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,12 @@ export interface coordinates {
y: number;
z: number;
}
export interface controlsValue {
min: number;
max: number;
}
type encode = "linear" | "sRGB";
interface Props {
filePath: string | string[];
Expand Down Expand Up @@ -82,6 +88,8 @@ interface Props {
intersectRecursive?: boolean;
enableDamping?: boolean;
dampingFactor?: number;
verticalCtrl?: boolean | controlsValue;
horizontalCtrl?: boolean | controlsValue;
}
const props = withDefaults(defineProps<Props>(), {
Expand Down Expand Up @@ -126,6 +134,8 @@ const props = withDefaults(defineProps<Props>(), {
autoPlay: true,
enableDraco: false,
intersectRecursive: false,
verticalCtrl: false,
horizontalCtrl: false,
});
// Non responsive variable
Expand Down Expand Up @@ -153,7 +163,14 @@ const isMultipleModels = ref(false);
const containerElement = ref(null);
const canvasElement = ref(null);
// no deep watch
onMounted(() => {
init();
});
onBeforeUnmount(() => {
destroyScene();
});
watch(
[
() => props.filePath,
Expand Down Expand Up @@ -199,6 +216,7 @@ watch(
},
{ deep: true }
);
watch(
[() => size],
() => {
Expand All @@ -207,20 +225,23 @@ watch(
},
{ deep: true }
);
watch(
[() => props.controlsOptions],
() => {
updateControls();
},
{ deep: true }
);
watch(
[() => props.cameraRotation, () => props.cameraPosition],
() => {
updateCamera();
},
{ deep: true }
);
watch(
[() => props.labels],
() => {
Expand All @@ -229,15 +250,18 @@ watch(
},
{ deep: true }
);
watch([() => props.autoPlay], () => {
playAnimations();
});
watch([() => props.width, () => props.height], () => {
size.value = {
width: props.width || 0,
height: props.height || 0,
};
});
// emit
const emit = defineEmits([
"mousedown",
Expand All @@ -250,14 +274,6 @@ const emit = defineEmits([
"error",
]);
onMounted(() => {
init();
});
onBeforeUnmount(() => {
destroyScene();
});
// Dynamic reload filePath
function resetScene() {
destroyScene();
Expand Down Expand Up @@ -332,6 +348,7 @@ function init() {
}
}
}
setVerticalHorizontalControls();
wrapper = new Object3D();
scene.add(wrapper);
Expand Down Expand Up @@ -715,6 +732,9 @@ function animate() {
m.update(delta);
});
}
if (controls) {
controls.update();
}
render();
}
function render() {
Expand Down Expand Up @@ -972,6 +992,33 @@ function playMultipleModels(obj: Object3D) {
}
});
}
// set vertical horizontal controls
function setVerticalHorizontalControls() {
if (!controls) {
return;
}
const { verticalCtrl, horizontalCtrl } = props;
// set vertical
if (verticalCtrl && typeof verticalCtrl === "boolean") {
controls.minAzimuthAngle = -2 * Math.PI;
controls.maxAzimuthAngle = -2 * Math.PI;
}
if (verticalCtrl && typeof verticalCtrl === "object") {
// min/max azimuth angle value range [-2 * Math.PI,2 * Math.PI]
controls.minAzimuthAngle = verticalCtrl.min;
controls.maxAzimuthAngle = verticalCtrl.max;
}
// set horizontal
if (horizontalCtrl && typeof horizontalCtrl === "boolean") {
controls.minPolarAngle = 1;
controls.maxPolarAngle = 1;
}
if (horizontalCtrl && typeof horizontalCtrl === "object") {
// min/max azimuth angle value range [0,Math.PI]
controls.minPolarAngle = horizontalCtrl.min;
controls.maxPolarAngle = horizontalCtrl.max;
}
}
</script>
<style scoped>
.viewer-container {
Expand Down
3 changes: 3 additions & 0 deletions src/examples/exampleIndex.vue
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
<disableAnimationsVue v-if="currentMenuId === 16" />
<loaderDracoModelVue v-if="currentMenuId === 17" :lang="lang" />
<enableDampingVue v-if="currentMenuId === 18" />
<setVerticalHorizontal v-if="currentMenuId === 19" />
</div>
</template>
<script setup lang="ts">
Expand All @@ -51,6 +52,7 @@ import loadJsonModelVue from "./load-json-model.vue";
import disableAnimationsVue from "./disable-animations.vue";
import loaderDracoModelVue from "./loader-draco-model.vue";
import enableDampingVue from "./enable-damping.vue";
import setVerticalHorizontal from "./set-vertical-horizontal.vue";
import { ref } from "vue";
const menu = ref();
const lang = ref();
Expand All @@ -73,6 +75,7 @@ menu.value = [
{ id: 16, name_CN: "播放/停止动画", name_EN: "Play/Stop animations" },
{ id: 17, name_CN: "加载Draco压缩模型", name_EN: "Loader draco model" },
{ id: 18, name_CN: "开启阻尼", name_EN: "Enable damping" },
{ id: 19, name_CN: "垂直/水平旋转相机", name_EN: "Set camera rotation"}
];
const currentMenuId = ref(1);
Expand Down
88 changes: 88 additions & 0 deletions src/examples/set-vertical-horizontal.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<template>
<div class="controls">
<div class="buttons">
<!-- 开启水平旋转 -->
<button @click="setHorizontal()">
Only {{ horizontalCtrl ? "disable" : "enable" }} horizontal
</button>
<!-- 开启垂直旋转 -->
<button @click="setVertical()">
Only {{ verticalCtrl ? "disable" : "enable" }} vertical
</button>
<!-- 设置水平旋转最大/小角度 -->
<button @click="setHorizontal('range')">
set horizontal rotation value range
</button>
<!-- 设置垂直旋转最大/小角度 -->
<button @click="setVertical('range')">
set vertical rotation value range
</button>
</div>
<vue3dLoader
v-if="!refersh"
filePath="/models/collada/stormtrooper/stormtrooper.dae"
:scale="{ x: 0.1, y: 0.1, z: 0.1 }"
:verticalCtrl="verticalCtrl"
:horizontalCtrl="horizontalCtrl"
/>
</div>
</template>
<script lang="ts" setup>
import { nextTick, ref } from "vue";
const verticalCtrl: any = ref(false);
const horizontalCtrl: any = ref(false);
const refersh = ref(false);
function setVertical(type?: string) {
horizontalCtrl.value = false;
if (type === "range") {
// set vertical angle range
verticalCtrl.value = { min: 0, max: 1 };
} else {
verticalCtrl.value = true;
// horizontalCtrl.value = { min: 0, max: Math.PI };
}
refersh3d();
}
function setHorizontal(type?: string) {
verticalCtrl.value = false;
if (type === "range") {
// set horizontal angle range
horizontalCtrl.value = { min: 1, max: 2 };
} else {
horizontalCtrl.value = true;
// verticalCtrl.value = { min: -Math.PI, max: Math.PI };
}
refersh3d();
}
function refersh3d() {
refersh.value = true;
nextTick(() => {
refersh.value = false;
});
}
</script>
<style scoped>
.controls {
height: 600px;
}
.buttons {
padding: 10px;
text-align: center;
}
button {
margin: 0 5px;
background-color: rgb(12, 54, 240);
outline: none;
border: none;
color: white;
padding: 5px 8px;
border-radius: 4px;
}
button:hover {
background-color: #ccc;
color: rgb(12, 54, 240);
}
</style>
Loading

0 comments on commit 3875e59

Please sign in to comment.