# <vgl-camera-helper>
A basic object representation.
# Example Usage
<template>
<div>
<vgl-renderer antialias>
<template #scene>
<vgl-scene>
<vgl-camera-helper>
<template #camera>
<vgl-perspective-camera
:far="far"
:fov="fov"
:near="near"
:aspect="aspect"
/>
</template>
</vgl-camera-helper>
</vgl-scene>
</template>
<template #camera>
<vgl-perspective-camera
position="spherical"
:position-radius="0.8"
:position-phi="1"
:position-theta="1"
rotation="lookAt"
:look-at-z="-0.3"
/>
</template>
</vgl-renderer>
<aside class="control-panel">
<label>Fov<input
v-model.number="fov"
type="range"
max="90"
></label>
<label>Far<input
v-model.number="far"
type="range"
max="1"
step="0.01"
></label>
<label>Near<input
v-model.number="near"
type="range"
max="0.1"
step="0.001"
></label>
<label>Aspect<input
v-model.number="aspect"
type="range"
min="0.1"
max="3"
step="0.1"
></label>
</aside>
</div>
</template>
<script>
import * as components from 'vue-gl';
export default {
components,
data: () => ({
fov: 50,
near: 0.05,
far: 0.5,
aspect: 1,
}),
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
# Props
position: 'rectangular' | 'spherical'
The coodinate system to determine the object position.
Defaults to [object Object]positionX: number
The x coordinate of the object's local position.
Defaults to [object Object]positionY: number
The y coordinate of the object's local position.
Defaults to [object Object]positionZ: number
The z coordinate of the object's local position.
Defaults to [object Object]positionRadius: number
The Euclidian distance from the origin to the object's local position.
Defaults to [object Object]positionPhi: number
The polar angle from y axis to the object's local position.
Defaults to [object Object]positionTheta: number
The equator angle around y axis to the object's local position.
Defaults to [object Object]rotation: 'euler' | 'quaternion' | 'lookAt'
The rotation representing method.
Defaults to [object Object]rotationX: number
The x coordinate of the object's local rotation.
Defaults to [object Object]rotationY: number
The y coordinate of the object's local rotation.
Defaults to [object Object]rotationZ: number
The z coordinate of the object's local rotation.
Defaults to [object Object]rotationW: number
The w coordinate of the object's local rotation.
Defaults to [object Object]rotationOrder: string
The rotation order of the object's local rotation.
Defaults to [object Object]lookAtX: number
The global x coodinate of a point the object to face.
Defaults to [object Object]lookAtY: number
The global y coodinate of a point the object to face.
Defaults to [object Object]lookAtZ: number
The global z coodinate of a point the object to face.
Defaults to [object Object]scaleX: number
The x coordinate of the object's local scale.
Defaults to [object Object]scaleY: number
The y coordinate of the object's local scale.
Defaults to [object Object]scaleZ: number
The z coordinate of the object's local scale.
Defaults to [object Object]castShadow: boolean
Whether the object gets rendered into the shadow map.receiveShadow: boolean
Whether the material receives shadows.name: string
An arbitrary name of the instance.
Defaults to [object Object]hidden: boolean
The object visibility.
# Slots
default
Objects defined in the slot will be handled as decsendants.