From 1314d7cc1a307f554ac472ede984610719ee44f8 Mon Sep 17 00:00:00 2001 From: howard Date: Thu, 8 Apr 2021 00:33:18 -0700 Subject: [PATCH] clean up axes presentation --- dist/app.css | 55 +++++++++++++++++++++++++------------------ src/Scene.js | 20 ++++++++-------- src/Sketch.js | 6 +++-- src/axes.js | 59 ++++++++++++++++++++++++++++------------------- src/patch.js | 20 +++++++++++++--- src/shared.js | 2 +- src/sketchAxes.js | 5 +++- 7 files changed, 103 insertions(+), 64 deletions(-) diff --git a/dist/app.css b/dist/app.css index 66159fa..fd60947 100644 --- a/dist/app.css +++ b/dist/app.css @@ -21,10 +21,6 @@ align-items: center; } -.justify-start { - justify-content: flex-start; -} - .justify-center { justify-content: center; } @@ -33,21 +29,12 @@ justify-content: space-between; } -.h-6 { - height: 1.5rem; +.h-full { + height: 100%; } -.text-lg { - font-size: 1.125rem; - line-height: 1.75rem; -} - -.ml-2 { - margin-left: 0.5rem; -} - -.p-1 { - padding: 0.25rem; +.p-2 { + padding: 0.5rem; } * { @@ -67,8 +54,8 @@ visibility: visible; } -.w-6 { - width: 1.5rem; +.w-auto { + width: auto; } .w-full { @@ -106,14 +93,18 @@ } } -/* html, */ +* { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + box-sizing: border-box; +} body { margin: 0; height: 100%; font-family: sans-serif; overflow: hidden; - --topNavH: 36px; + --topNavH: 48px; --sideNavW: 200px; } @@ -168,6 +159,27 @@ body { color: rgba(4, 120, 87, var(--tw-text-opacity)); } +.tooltip { + position: fixed; + display: block; + background-color: black; + color: #fff; + text-align: center; + border-radius: 4px; + padding: 4px; + visibility: hidden; +} + +.arrow { + position: absolute; + bottom: 100%; + left: 50%; + margin-left: -6px; + border: solid 6px transparent; + border-bottom-color: black; + border-top: none; +} + @media (min-width: 640px) { } @@ -182,4 +194,3 @@ body { @media (min-width: 1536px) { } - diff --git a/src/Scene.js b/src/Scene.js index e21d596..d20a48e 100644 --- a/src/Scene.js +++ b/src/Scene.js @@ -11,8 +11,8 @@ import { extrude } from './extrude' import { onHover, onPick } from './mouseEvents'; import { _vec2, _vec3, color, awaitPts } from './shared' -import { AxesHelper } from './axes' -import { Patch } from './patch' +import {AxesHelper} from './axes' + import CSG from "./three-csg.js" @@ -64,12 +64,11 @@ export class Scene { helpersGroup.name = "helpersGroup"; this.obj3d.add(helpersGroup); - // const axesHelper = new AxesHelper(0.4); - // helpersGroup.add(axesHelper); + this.axes = new AxesHelper(this.camera.zoom) + this.axes.visible = false - const patch = new Patch(0.5); - helpersGroup.add(patch); + helpersGroup.add(this.axes); @@ -223,16 +222,18 @@ function render() { Object.assign(this.rect, this.canvas.getBoundingClientRect().toJSON()) } + + + this.axes.resize(this.camera.zoom) + this.renderer.render(this.obj3d, this.camera); - // const sketch = this.store. if (this.activeSketch) { dims = this.activeSketch.obj3d.children[1].children matrix = this.activeSketch.obj3d.matrix for (idx = 1; idx < dims.length; idx += 2) { ele = dims[idx] - // if (!ele.label) continue; pos = _vec3.set( ...ele.geometry.attributes.position.array @@ -241,10 +242,7 @@ function render() { x = (pos.x * .5 + .5) * this.canvas.clientWidth + 10; y = (pos.y * -.5 + .5) * this.canvas.clientHeight; - // console.log(i, ele) - // ele.label.style.transform = `translate(-50%, -50%) translate(${x+20}px,${y}px)`; ele.label.style.transform = `translate(0%, -50%) translate(${x}px,${y}px)`; - } } diff --git a/src/Sketch.js b/src/Sketch.js index 1a04494..f91eb25 100644 --- a/src/Sketch.js +++ b/src/Sketch.js @@ -49,7 +49,7 @@ class Sketch { this.constraints = new Map() this.c_id = 1; - this.obj3d.add(new THREE.Group().add(new AxesHelper(1))); + this.obj3d.add(new THREE.Group()); this.obj3d.add(new THREE.Group()); this.obj3d.add(new THREE.Group()); @@ -150,9 +150,11 @@ class Sketch { this.canvas.addEventListener('pointermove', this.onHover) this.store.dispatch({ type: 'set-active-sketch', sketch: this.obj3d.name }) - this.setDimLines() + this.scene.axes.matrix = this.obj3d.matrix + this.scene.axes.visible = true + window.sketcher = this } diff --git a/src/axes.js b/src/axes.js index fe1bc15..039b5ae 100644 --- a/src/axes.js +++ b/src/axes.js @@ -1,37 +1,48 @@ -// import { LineSegments } from '../objects/LineSegments.js'; -// import { LineBasicMaterial } from '../materials/LineBasicMaterial.js'; -// import { Float32BufferAttribute } from '../core/BufferAttribute.js'; -// import { BufferGeometry } from '../core/BufferGeometry.js'; -import {LineSegments, LineBasicMaterial, Float32BufferAttribute, BufferGeometry} from 'three/src/Three' -class AxesHelper extends LineSegments { +import * as THREE from "../node_modules/three/src/Three" - constructor( size = 1 ) { - const vertices = [ - 0, 0, 0, size, 0, 0, - 0, 0, 0, 0, size, 0, - 0, 0, 0, 0, 0, size - ]; +class AxesHelper extends THREE.Object3D { - const colors = [ - 1, 0, 0, 1, 0.6, 0, - 0, 1, 0, 0.6, 1, 0, - 0, 0, 1, 0, 0.6, 1 - ]; + constructor(initialZoom = 1) { + super() + this.matrixAutoUpdate = false + this.initialZoom = initialZoom + this.length = [0.55, 1] + this.headLength = 0.25 + this.headWidth = 0.12 - const geometry = new BufferGeometry(); - geometry.setAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) ); - geometry.setAttribute( 'color', new Float32BufferAttribute( colors, 3 ) ); + this.dirs = [ + [1, 0, 0], + [0, 1, 0] + ] - const material = new LineBasicMaterial( { vertexColors: true, toneMapped: false } ); + this.add(...this.dirs.map( + (dir, i) => new THREE.ArrowHelper( + new THREE.Vector3(...dir), // dir + new THREE.Vector3(0, 0, 0), // origin + this.length[i], //length + 0x0000ff, + this.headLength, + this.headWidth + ) + )) - super( geometry, material ); + return this + } - // this.type = 'AxesHelper'; + resize(zoom) { + const scale = this.initialZoom / zoom - } + for (let i = 0; i < this.children.length; i++) { + this.children[i].setLength( + this.length[i] * scale, + this.headLength * scale, + this.headWidth * scale + ) + } + } } diff --git a/src/patch.js b/src/patch.js index 68b149a..c890b85 100644 --- a/src/patch.js +++ b/src/patch.js @@ -3,13 +3,23 @@ // import { Float32BufferAttribute } from '../core/BufferAttribute.js'; // import { BufferGeometry } from '../core/BufferGeometry.js'; -import { LineSegments, MeshBasicMaterial, Float32BufferAttribute, BufferGeometry, Mesh, DoubleSide } from '../node_modules/three/src/Three' import * as THREE from '../node_modules/three/src/Three'; +import {ArrowHelper} from './ArrowHelper' + + + + + + + + + class Patch extends THREE.Mesh { + constructor(s = 1) { @@ -17,8 +27,12 @@ class Patch extends THREE.Mesh { const positions = [ 0.5, 0, - 0.3, 0.08, - 0.3, -0.08, + 0.3, 0.06, + 0.3, 0.01, + 0.0, 0.01, + 0.0, -0.01, + 0.3, -0.01, + 0.3, -0.06, ]; const shape = new THREE.Shape() diff --git a/src/shared.js b/src/shared.js index 1603783..1fb429a 100644 --- a/src/shared.js +++ b/src/shared.js @@ -37,7 +37,7 @@ const hoverColor = { const lineMaterial = new THREE.LineBasicMaterial({ - linewidth: 2, + linewidth: 1, color: color.line, }) diff --git a/src/sketchAxes.js b/src/sketchAxes.js index d9d983b..338b2ab 100644 --- a/src/sketchAxes.js +++ b/src/sketchAxes.js @@ -5,6 +5,9 @@ import { LineSegments, LineBasicMaterial, Float32BufferAttribute, BufferGeometry } from '../node_modules/three/src/Three' +import {} from '../node_modules/three/examples/jsm/lines/LineGeometry' +import {} from '../node_modules/three/examples/jsm/lines/LineMaterial' + class AxesHelper extends LineSegments { constructor(s = 1) { @@ -20,7 +23,7 @@ class AxesHelper extends LineSegments { const geometry = new BufferGeometry(); geometry.setAttribute('position', new Float32BufferAttribute(vertices, 3)); - const material = new LineBasicMaterial({ color: 0xff0000, toneMapped: false, linewidth:2 }); + const material = new LineBasicMaterial({ color: 0xff0000, toneMapped: false, linewidth:5 }); super(geometry, material);