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