Skip to content

Commit 111dddf

Browse files
infinite-systeminfinite-system
committed
v1.2.0-beta.1
1 parent 1e859d8 commit 111dddf

File tree

8 files changed

+308
-3
lines changed

8 files changed

+308
-3
lines changed

‎vue-dd/demo/App.vue‎

Lines changed: 224 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
1+
<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>
31+
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>
104+
</template>
105+
106+
<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();
213+
214+
const geoName = ref("plane");
215+
const instancedMesh = ref("");
216+
</script>
217+
218+
<style>
219+
.rendererParent {
220+
width: 100%;
221+
height: 580px;
222+
border: 1px solid black;
223+
}
224+
</style>

‎vue-dd/demo/main.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { createApp } from "vue";
2+
import { install } from "../src/index";
3+
import App from "./App.vue";
4+
5+
const app = createApp(App);
6+
7+
install(app);
8+
9+
app.mount("#app");

‎vue-dd/demo/vite.config.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { defineConfig } from "vite";
2+
import vue from "@vitejs/plugin-vue";
3+
4+
export const vueDocsPlugin = () => ({
5+
name: "vue-docs",
6+
transform(code: any, id: any) {
7+
if (!/vue&type=docs/.test(id)) return;
8+
return `export default ''`;
9+
},
10+
});
11+
12+
export default defineConfig({
13+
root: "./",
14+
// keep the same name as your github repos
15+
mode: "production",
16+
plugins: [vue(), vueDocsPlugin()],
17+
build: {
18+
outDir: "./dist-demo",
19+
},
20+
});

‎vue-dd/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>MyComponent</title>
8+
</head>
9+
10+
<body>
11+
<div id="app"></div>
12+
<script type="module" src="./demo/main.ts"></script>
13+
</body>
14+
</html>

‎vue-dd/package.json‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,22 @@
11
{
22
"name": "vue-dd",
3-
"version": "1.1.5",
3+
"version": "1.2.0-beta.1",
44
"description": "Vue.js component for displaying JavaScript objects with circular references, forked and ported to Vue 3",
5-
"main": "src/VueDd.vue",
5+
"exports": {
6+
".": {
7+
"require": "./dist/index.umd.js",
8+
"import": "./dist/index.es.js",
9+
"types": "./dist/src/index.d.ts"
10+
}
11+
},
12+
"main": "./dist/index.umd.js",
13+
"module": "./dist/index.es.js",
14+
"types": "./dist/src/index.d.ts",
615
"scripts": {
716
"test": "vitest",
817
"coverage": "vitest run --coverage",
9-
"cypress": "cypress"
18+
"cypress": "cypress",
19+
"build": "vite build"
1020
},
1121
"dependencies": {
1222
"vue": ">2.7.5"
@@ -20,6 +30,7 @@
2030
"cypress": "^12.3.0",
2131
"jsdom": "^21.0.0",
2232
"vite": "^4.0.4",
33+
"vite-plugin-dts": "^1.7.1",
2334
"vitest": "^0.27.1",
2435
"vue-router": "^4.1.6"
2536
},

‎vue-dd/src/index.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import VueDd from "./VueDd.vue";
2+
import XRay from "./XRay.vue";
3+
4+
function install(app) {
5+
// Base entities
6+
app.component("VueDd", VueDd);
7+
app.component("XRay", XRay);
8+
}
9+
10+
export {
11+
install,
12+
// Base entities
13+
VueDd,
14+
XRay
15+
};

‎vue-dd/src/shims-vue.d.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
declare module "*.vue" {
2+
import type { DefineComponent } from "vue";
3+
const component: DefineComponent<
4+
Record<string, unknown>,
5+
Record<string, unknown>,
6+
unknown
7+
>;
8+
export default component;
9+
}

‎vue-dd/src/types.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { Vector3 } from "three";
2+
3+
export type Vector3Like = Vector3 | [number, number, number] | { x: number; y: number; z: number };

0 commit comments

Comments
 (0)