Skip to content

Commit fdbcb32

Browse files
infinite-systeminfinite-system
committed
Removed vue 2 support as not worth it in the long run. v1.1.6 still supports Vue >2.7.5
1 parent d3a02d0 commit fdbcb32

37 files changed

+4452
-795
lines changed

‎README.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
## vue-dd — object viewer     [![npm](https://img.shields.io/npm/v/vue-dd.svg)](https://www.npmjs.com/package/vue-dd) [![build status](https://github.com/infinite-system/vue-dd/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/infinite-system/vue-dd/actions/workflows/ci.yml)
22

3-
> **vue-dd** is a Vue 3 & 2 object viewer for displaying complex JavaScript objects, Vue reactive and ref objects, functions, maps, sets, symbols and primitives in order to monitor their changes **live** with full reactivity. Inspired by the Laravel's **dd()** function.
3+
> **vue-dd** is a Vue 3 object viewer for displaying complex JavaScript objects, Vue reactive and ref objects, functions, maps, sets, symbols and primitives in order to monitor their changes **live** with full reactivity. Inspired by the Laravel's **dd()** function.
44
55
https://user-images.githubusercontent.com/150185/213549880-e6b645bd-11f0-461a-b1a9-29c70c52f2ad.mov
66

77
https://user-images.githubusercontent.com/150185/213549905-360698e2-0c6b-4fd1-8023-803e22b68e27.mov
88

99
Video example code in Vue 3 `<script setup>` style:
1010
```js
11-
import VueDd from 'vue-dd'
11+
import { VueDd } from 'vue-dd'
1212
import { getCurrentInstance } from 'vue'
1313

1414
// get Vue instance
@@ -34,7 +34,7 @@ yarn add vue-dd
3434

3535
Add globally in `main.js`:
3636
```js
37-
import VueDd from 'vue-dd'
37+
import { VueDd } from 'vue-dd'
3838
// create app
3939
const app = createApp(App)
4040
// register component
@@ -78,7 +78,7 @@ Use `:model-value` instead of `v-model`
7878
- highlight.js is built in to retain 0 dependecy architecture
7979

8080
## Zero dependencies
81-
This component does not depend on any other package, except Vue 3, >2.7.5
81+
This component does not depend on any other package, except Vue 3
8282

8383
## Props
8484

‎vue-dd/demo/App.vue

-209
Original file line numberDiff line numberDiff line change
@@ -1,218 +1,9 @@
11
<template>
2-
<select v-model="camera" class="my-5">
3-
<option value="cam1">PerspectiveCamera</option>
4-
<option value="cam2">OrthographicCamera</option>
5-
</select>
6-
<select v-model="geoName" class="my-5">
7-
<option value="plane">Plane</option>
8-
<option value="test">Cube</option>
9-
<option value="custom">Custom</option>
10-
<option value="sphere">Sphere</option>
11-
</select>
12-
<input v-model.number="count" type="number" />
13-
<div style="display: flex; flex-direction: row">
14-
<div style="width: 300px">
15-
<pre>{{ renderer?.three.info }}</pre>
16-
</div>
17-
<div class="rendererParent">
18-
<Renderer
19-
ref="renderer"
20-
:on-before-render="onBeforeRender"
21-
:camera="camera"
22-
:antialias="true"
23-
:shadow-map-enabled="false"
24-
>
25-
<PerspectiveCamera name="cam1" :position="[5, 5, 5]" :up="[0, 0, 1]">
26-
<OrbitControls />
27-
</PerspectiveCamera>
28-
<OrthographicCamera name="cam2" :position="[5, 5, 5]">
29-
<OrbitControls />
30-
</OrthographicCamera>
312

32-
<BufferGeometry name="reusedGeo" :vertices="[0, 0, 0, 1, 0, 0, 1, 1, 0]" :faces="[0, 1, 2]" />
33-
<MeshBasicMaterial name="reusedMat" color="#aaa" />
34-
35-
<BoxGeometry name="reusedGeo2" />
36-
<MeshBasicMaterial name="reusedMat2" color="#770000" />
37-
38-
<Scene background="white">
39-
<Mesh :position="[0, 0, -3]" :receive-shadow="true">
40-
<MeshLambertMaterial color="#cccccc" :side="DoubleSide" />
41-
<PlaneGeometry name="plane" :width="20" :height="20" />
42-
</Mesh>
43-
<PointLight :position="[0, 0, 10]" :intensity="0.25" :cast-shadow="true" />
44-
<AmbientLight :color="0xffffff" />
45-
<Points :position="posV" :scale="[s, s, s]">
46-
<PointsMaterial :color="color" :size-attenuation="false" :size="4" />
47-
<SphereGeometry name="sphere" :radius="radius" :width-segments="12" :height-segments="12" />
48-
</Points>
49-
<Mesh :position="posBoxHelper">
50-
<MeshBasicMaterial color="black" />
51-
<BoxGeometry :width="0.1" :height="0.1" :depth="0.1" />
52-
</Mesh>
53-
<Group
54-
:enable-raycasting="false"
55-
@click="onClick"
56-
@mousemove="onMouseEnter"
57-
@mouseenter="onMouseEnter"
58-
@mouseleave="onMouseLeave"
59-
>
60-
<Mesh :position="pos" :rotation="rot" :cast-shadow="true">
61-
<MeshLambertMaterial transparent :opacity="opacity">
62-
<TextureLoader url="https://threejs.org/examples/textures/crate.gif" />
63-
</MeshLambertMaterial>
64-
<BoxGeometry name="test" :width="w + 1" :height="w * 2 + 1" />
65-
</Mesh>
66-
<Mesh :position="[-5, 0, 0]" :scale="[s, 1, 1]" :cast-shadow="true">
67-
<MeshLambertMaterial :color="color2" :side="DoubleSide" />
68-
<BufferGeometry name="custom" :vertices="vertices" />
69-
</Mesh>
70-
71-
<OBJLoader
72-
:position="[3, 0, 0]"
73-
:scale="[20, 20, 20]"
74-
url="https://raw.githubusercontent.com/alecjacobson/common-3d-test-models/master/data/stanford-bunny.obj"
75-
@load="onLoad"
76-
>
77-
<MeshBasicMaterial :color="color3" :side="DoubleSide" />
78-
</OBJLoader>
79-
<OBJLoader
80-
:position="[-2, 2, 0]"
81-
:rotation="[Math.PI / 2, 0, 0]"
82-
:scale="[10, 10, 10]"
83-
url="https://raw.githubusercontent.com/alecjacobson/common-3d-test-models/master/data/stanford-bunny.obj"
84-
@load="onLoad"
85-
>
86-
<MeshNormalMaterial :side="DoubleSide" transparent :opacity="0.5" />
87-
</OBJLoader>
88-
<Mesh v-for="i in count" :key="i" geometry="reusedGeo" material="reusedMat" :position="[i * 1.5, 0, 0]">
89-
</Mesh>
90-
91-
<InstancedMesh ref="instancedMesh" geometry="reusedGeo2" material="reusedMat2" :count="step * step" />
92-
</Group>
93-
<LineSegments :position="pos" :rotation="rot">
94-
<EdgesGeometry geometry="test" />
95-
</LineSegments>
96-
<LineSegments>
97-
<WireframeGeometry :geometry="geoName" />
98-
</LineSegments>
99-
<AxesHelper :size="3" />
100-
</Scene>
101-
</Renderer>
102-
</div>
103-
</div>
1043
</template>
1054

1065
<script setup lang="ts">
107-
import { ref, onMounted, reactive } from "vue";
108-
import { Object3D } from "three";
109-
import {
110-
DoubleSide,
111-
Mesh as TMesh,
112-
Vector3,
113-
Vector2,
114-
MeshBasicMaterial as TMeshBasicMaterial,
115-
BufferGeometry as TBufferGeometry,
116-
Intersection,
117-
Color,
118-
} from "three";
119-
120-
const step = 20;
121-
const count = ref(100);
122-
const pos = ref<[number, number, number]>([0, 0, 0]);
123-
const rot = ref<[number, number, number]>([0, 0, 0]);
124-
const vertices = reactive<number[]>([]);
125-
126-
const w = ref(1);
127-
const s = ref(1);
128-
const radius = ref(1);
129-
130-
const opacity = ref(1);
131-
132-
const posV = new Vector3(5, -1, 0);
133-
const posBoxHelper = ref<[number, number, number]>([0, 0, 0]);
134-
const color = ref("rgb(255,0,0)");
135-
const color2 = ref("rgb(255,0,0)");
136-
const color3 = ref("rgb(255,0,0)");
137-
138-
onMounted(() => {
139-
let segs = 24;
140-
let r1 = 2;
141-
let r2 = 1;
142-
143-
for (let i = 0; i < segs; i++) {
144-
const x1 = r1 * Math.cos(((2 * Math.PI) / segs) * i);
145-
const y1 = r2 * Math.sin(((2 * Math.PI) / segs) * i);
146-
const x2 = r1 * Math.cos(((2 * Math.PI) / segs) * (i + 1));
147-
const y2 = r2 * Math.sin(((2 * Math.PI) / segs) * (i + 1));
148-
149-
vertices.push(x1, y1, 0);
150-
vertices.push(x2, y2, 0);
151-
vertices.push(0, 0, 0);
152-
}
153-
154-
// Now set position
155-
var dummy = new Object3D();
156-
for (var i = 0; i < step; i++) {
157-
for (var j = 0; j < step; j++) {
158-
// Iterate and offset x pos
159-
160-
dummy.position.copy(new Vector3(i * 2, j * 2, 0));
161-
dummy.updateMatrix();
162-
instancedMesh.value.three.setMatrixAt(i * step + j, dummy.matrix);
163-
instancedMesh.value.three.instanceMatrix.needsUpdate = true;
164-
}
165-
}
166-
});
167-
168-
const onBeforeRender = () => {
169-
return;
170-
const angle = Date.now() / 1000;
171-
172-
opacity.value = Math.sin(2 * angle) * 0.45 + 0.5;
173-
174-
color.value = `rgb(${Math.round(Math.cos(angle) * 50 + 100)}, ${Math.round(
175-
((Math.sin(angle) + 1) / 2) * 200 + 50,
176-
)}, 100)`;
177-
178-
color2.value = `rgb(${Math.round(Math.cos(angle) * 50 + 200)}, ${Math.round(Math.sin(angle) * 50 + 100)}, 50)`;
179-
color3.value = `rgb(${Math.round(Math.cos(angle * 2) * 100 + 100)}, 50, ${Math.round(Math.sin(angle) * 50 + 100)})`;
180-
radius.value = Math.cos(angle) + 2;
181-
s.value = Math.sin(angle * 5) * 0.5 + 1;
182-
183-
w.value = Math.sin(angle) + 1;
184-
pos.value = [Math.cos(angle), Math.sin(angle), Math.sin(angle)];
185-
rot.value = [Math.cos(angle) * Math.PI, 0, 0];
186-
};
187-
188-
const onLoad = () => {
189-
console.log("obj load event");
190-
};
191-
192-
const onClick = (m: Intersection<TMesh<TBufferGeometry, TMeshBasicMaterial>>[], p: Vector2) => {
193-
console.log("click");
194-
//console.log(m);
195-
};
196-
197-
const onMouseEnter = (m: Intersection<TMesh<TBufferGeometry, TMeshBasicMaterial>>[], p: Vector2) => {
198-
m[0].object.material.color = new Color("red");
199-
const pt = m[0].point;
200-
posBoxHelper.value = [pt.x, pt.y, pt.z];
201-
console.log("enter");
202-
//console.log({ m, p });
203-
};
204-
205-
const onMouseLeave = (m: Intersection<TMesh<TBufferGeometry, TMeshBasicMaterial>>[], p: Vector2) => {
206-
m[0].object.material.color = new Color("#aaa");
207-
console.log("leave");
208-
//console.log({ m, p });
209-
};
210-
211-
const camera = ref("cam1");
212-
const renderer = ref();
2136
214-
const geoName = ref("plane");
215-
const instancedMesh = ref("");
2167
</script>
2178

2189
<style>

‎vue-dd/dist/index.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)