bx-1379-redesign #15
|
@ -66,18 +66,18 @@ onMounted(async () => {
|
||||||
.selectAll("path")
|
.selectAll("path")
|
||||||
.data(circles)
|
.data(circles)
|
||||||
.join("path")
|
.join("path")
|
||||||
.attr("d", (d, i) => voronoi.renderCell(i))
|
.attr("d", (_, i) => voronoi.renderCell(i))
|
||||||
.attr('fill', (d, i) => i < (range - 2) ? `url(#img${i})` : 'none')
|
.attr('fill', (_, i) => i < (range - 2) ? `url(#img${i})` : 'none')
|
||||||
.call(d3.drag()
|
.call(d3.drag()
|
||||||
.on("start", (event, d) => circle.filter(p => p === d).raise().attr("stroke", "black"))
|
.on("start", (_, d) => circle.filter(p => p === d).raise().attr("stroke", "black"))
|
||||||
.on("drag", (event, d: any) => (d.x = event.x, d.y = event.y))
|
.on("drag", (event, d: any) => (d.x = event.x, d.y = event.y))
|
||||||
.on("end", (event, d) => circle.filter(p => p === d).attr("stroke", null))
|
.on("end", (_, d) => circle.filter(p => p === d).attr("stroke", null))
|
||||||
.on("start.update drag.update end.update", update) as any)
|
.on("start.update drag.update end.update", update) as any)
|
||||||
|
|
||||||
function update() {
|
function update() {
|
||||||
voronoi = d3.Delaunay.from(circles, d => d.x, d => d.y).voronoi([0, 0, width, height]);
|
voronoi = d3.Delaunay.from(circles, d => d.x, d => d.y).voronoi([0, 0, width, height]);
|
||||||
circle.attr("cx", d => d.x).attr("cy", d => d.y);
|
circle.attr("cx", d => d.x).attr("cy", d => d.y);
|
||||||
cell.attr("d", (d, i) => voronoi.renderCell(i));
|
cell.attr("d", (_, i) => voronoi.renderCell(i));
|
||||||
mesh.attr("d", voronoi.render());
|
mesh.attr("d", voronoi.render());
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,11 +1,11 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
import { useLoop, useTresContext } from '@tresjs/core';
|
import { useLoop, useTresContext } from '@tresjs/core';
|
||||||
|
// @ts-ignore
|
||||||
import { useGLTF } from '@tresjs/cientos';
|
import { useGLTF } from '@tresjs/cientos';
|
||||||
import { OrbitControlsProps } from '@tresjs/cientos/dist/core/controls/OrbitControls.vue.js';
|
import { OrbitControlsProps } from '@tresjs/cientos/dist/core/controls/OrbitControls.vue.js';
|
||||||
import { useRawData } from '../../stores/raw_data';
|
import { useRawData } from '../../stores/raw_data';
|
||||||
import { IMAGE_URL } from '../../constants';
|
import { IMAGE_URL } from '../../constants';
|
||||||
import { Euler, Vector3 } from 'three';
|
|
||||||
|
|
||||||
const { controls, camera } = useTresContext()
|
const { controls, camera } = useTresContext()
|
||||||
const raw_dataStore = useRawData()
|
const raw_dataStore = useRawData()
|
||||||
|
|
|
@ -5,7 +5,7 @@ import { useRoute } from 'vue-router';
|
||||||
|
|
||||||
import { Vector3 } from 'three';
|
import { Vector3 } from 'three';
|
||||||
import { TresCanvas } from '@tresjs/core';
|
import { TresCanvas } from '@tresjs/core';
|
||||||
import { OrbitControls, Stats } from '@tresjs/cientos'
|
import { OrbitControls } from '@tresjs/cientos'
|
||||||
import '@tresjs/leches/styles'
|
import '@tresjs/leches/styles'
|
||||||
|
|
||||||
import LoadModels from './load_models.vue'
|
import LoadModels from './load_models.vue'
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onMounted, onUnmounted, onUpdated, reactive, Ref, ref, watch } from 'vue';
|
import { onMounted, onUnmounted, reactive, Ref, ref, watch } from 'vue';
|
||||||
import {
|
import {
|
||||||
Box3, Color, DoubleSide, Group, Mesh, PlaneGeometry,
|
Box3, Color, DoubleSide, Group, Mesh, PlaneGeometry,
|
||||||
MeshStandardMaterial, MeshStandardMaterialParameters,
|
MeshStandardMaterial, MeshStandardMaterialParameters,
|
||||||
|
@ -9,6 +9,7 @@ import {
|
||||||
} from 'three';
|
} from 'three';
|
||||||
|
|
||||||
import { useTresContext, useSeek, useTexture, useLoop } from '@tresjs/core';
|
import { useTresContext, useSeek, useTexture, useLoop } from '@tresjs/core';
|
||||||
|
// @ts-ignore
|
||||||
import { useGLTF } from '@tresjs/cientos'
|
import { useGLTF } from '@tresjs/cientos'
|
||||||
|
|
||||||
import Env from './env.vue'
|
import Env from './env.vue'
|
||||||
|
|
Loading…
Reference in New Issue