WireframeGeometry
This component can be used as a helper object to view a geometry as a wireframe.
<WireframeGeometry>
should be passed into the <LineSegments>
.
The required property geometry
specifies a name of any geometry in the scene. It is recalculated whenever the target geometry changes.
Example
Click me to view the example code
vue
<template>
<div style="width: 100vh; height: 100vh;">
<Renderer :antialias="true">
<PerspectiveCamera :position="[5, 5, 5]" :up="[0, 0, 1]">
<OrbitControls />
</PerspectiveCamera>
<Scene background="#f9f9f9">
<Mesh :rotation="rot">
<BoxGeometry name="box" :width="6" :height="4" :depth="2" />
<MeshNormalMaterial :transparent="true" :opacity="0.5" />
</Mesh>
<LineSegments :rotation="rot">
<WireframeGeometry geometry="box" />
<LineBasicMaterial color="black" />
</LineSegments>
</Scene>
</Renderer>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { Renderer, Scene } from "@janvorisek/drie";
import { PerspectiveCamera, OrbitControls } from "@janvorisek/drie";
import { Mesh, PlaneGeometry, MeshNormalMaterial } from "@janvorisek/drie";
import { WireframeGeometry, LineBasicMaterial, LineSegments } from "@janvorisek/drie";
const rot = ref<[number, number, number]>([0, 0, 0]);
window.setInterval(() => {
const angle = Date.now() / 1000;
rot.value = [Math.cos(angle), 0, 0];
}, 10);
</script>
Props
Prop name | Description | Type | Default |
---|---|---|---|
geometry | Target geometry name | string |
Expose
three
You can access the managed
THREE.BufferGeometry
instance using the exposedthree
property.
Example code
template
<WireframeGeometry ref="geometry" />
ts
const geometry = ref(null);
onMounted(() => {
// Do something with the THREE.BufferGeometry instance
const threeGeometry = geometry.value.three;
});