# <vgl-orthographic-camera>

This camera projects the objects into constant size regardless of the distance.

When more than 1 props of left, right, top or bottom are set, the camera frustum side planes will be at specified coordinates. Otherwise they will be automatically set to fit the canvas size.

# Example Usage

<template>
  <div>
    <vgl-renderer antialias>
      <template #scene>
        <vgl-scene>
          <vgl-mesh>
            <template #geometry>
              <vgl-box-geometry
                :width="7.5"
                :height="7.5"
                :depth="7.5"
              />
            </template>
            <template #material>
              <vgl-mesh-standard-material />
            </template>
          </vgl-mesh>
          <vgl-ambient-light
            color="#ffeecc"
            :intensity="0.4"
          />
          <vgl-directional-light
            :position-x="2"
            :position-y="1"
            :position-z="3"
            :intensity="0.8"
          />
        </vgl-scene>
      </template>
      <template #camera>
        <vgl-orthographic-camera
          position="spherical"
          rotation="lookAt"
          :position-radius="20"
          :position-phi="1"
          :position-theta="1"
          :zoom="zoom"
          :near="near"
          :far="far"
          :left="leftConst ? undefined : left"
          :right="rightConst ? undefined : right"
          :bottom="bottomConst ? undefined : bottom"
          :top="topConst ? undefined : top"
        />
      </template>
    </vgl-renderer>
    <aside>
      <label>Zoom<input
        v-model.number="zoom"
        type="range"
        min="1"
        max="25"
      ></label>
      <label>Near<input
        v-model.number="near"
        type="range"
        max="25"
        min="10"
      ></label>
      <label>Far<input
        v-model.number="far"
        type="range"
        max="25"
        min="10"
      ></label>
      <p>
        Left
        <label>Auto<input
          v-model="leftConst"
          type="checkbox"
        ></label>
        <label>
          Position
          <input
            v-model.number="left"
            :disabled="leftConst"
            type="range"
            min="-200"
            max="200"
          >
        </label>
      </p>
      <p>
        Right
        <label>Auto<input
          v-model="rightConst"
          type="checkbox"
        ></label>
        <label>
          Position
          <input
            v-model.number="right"
            :disabled="rightConst"
            type="range"
            min="-200"
            max="200"
          >
        </label>
      </p>
      <p>
        Top
        <label>Auto<input
          v-model="topConst"
          type="checkbox"
        ></label>
        <label>
          Position
          <input
            v-model.number="top"
            :disabled="topConst"
            type="range"
            min="-100"
            max="100"
          >
        </label>
      </p>
      <p>
        Bottom
        <label>Auto<input
          v-model="bottomConst"
          type="checkbox"
        ></label>
        <label>
          Position
          <input
            v-model.number="bottom"
            :disabled="bottomConst"
            type="range"
            min="-100"
            max="100"
          >
        </label>
      </p>
    </aside>
  </div>
</template>

<script>
import * as components from 'vue-gl';

export default {
  components,
  data: () => ({
    zoom: 10,
    near: 10,
    far: 25,
    leftConst: true,
    left: -150,
    rightConst: true,
    right: 150,
    topConst: true,
    top: 75,
    bottomConst: true,
    bottom: -75,
  }),
};
</script>

<style scoped>
  label {
    display: flex;
  }
  input {
    margin-left: 1ex;
  }
  p:first-line, :not(p) > label:first-line {
    font-weight: bold;
  }
</style>

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170

# 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.
zoom : number
The zoom factor.
Defaults to [object Object]
near : number
The camera frustum near plane.
Defaults to [object Object]
far : number
The camera frustum far plane.
Defaults to [object Object]
left : number
The camera frustum left edge.
right : number
The camera frustum right edge.
top : number
The camera frustum top edge.
bottom : number
The camera frustum bottom edge.

# Slots

default
Objects defined in the slot will be handled as decsendants.

← <vgl-camera> <vgl-perspective-camera> →