hover hightlight

master
howard 2021-03-26 02:25:28 -07:00
parent 642e730029
commit 69ee6e881f
9 changed files with 1718 additions and 31 deletions

1448
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -6,8 +6,13 @@
"deploy": "gh-pages -d dist -t true" "deploy": "gh-pages -d dist -t true"
}, },
"devDependencies": { "devDependencies": {
"@babel/preset-react": "^7.12.13",
"babel-loader": "^8.2.2",
"css-loader": "^5.1.3", "css-loader": "^5.1.3",
"gh-pages": "^3.1.0", "gh-pages": "^3.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.3",
"redux": "^4.0.5", "redux": "^4.0.5",
"sass": "^1.32.8", "sass": "^1.32.8",
"sass-loader": "^11.0.1", "sass-loader": "^11.0.1",

11
src/app.jsx Normal file
View File

@ -0,0 +1,11 @@
import React from 'react';
import { Provider } from 'react-redux';
export const App = ({ store }) => (
<Provider store={store}>
<div>hellodddddd</div>
</Provider>
);

View File

@ -4,16 +4,19 @@ import * as THREE from '../node_modules/three/src/Three';
import { OrbitControls } from './OrbitControls' import { OrbitControls } from './OrbitControls'
import { TrackballControls } from './trackball' import { TrackballControls } from './trackball'
import { Sketcher } from './sketcher/Sketcher' import { Sketcher } from './sketcher/Sketcher'
import Stats from '../node_modules/three/examples/jsm/libs/stats.module.js'; import Stats from './stats.module.js';
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux'
import { App } from './app.jsx'
function main(store) {
function main() {
var stats = new Stats(); var stats = new Stats();
stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
document.body.appendChild(stats.dom); document.getElementById('stats').appendChild(stats.dom);
const canvas = document.querySelector('#c'); const canvas = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({ canvas }); const renderer = new THREE.WebGLRenderer({ canvas });
@ -31,7 +34,7 @@ function main() {
const far = 50; const far = 50;
const camera = new THREE.OrthographicCamera(-size, size, size, -size, near, far); const camera = new THREE.OrthographicCamera(-size, size, size, -size, near, far);
camera.zoom = 0.1; camera.zoom = 0.1;
camera.position.set(0, 0, 20); camera.position.set(0, 0, 30);
// const controls = new OrbitControls(camera, view1Elem); // const controls = new OrbitControls(camera, view1Elem);
const controls = new TrackballControls(camera, canvas); const controls = new TrackballControls(camera, canvas);
@ -89,4 +92,35 @@ function main() {
render(); render();
} }
function todos(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
return state.concat([action.text])
default:
return state
}
}
const store = createStore(todos, ['Use Redux'])
store.dispatch({
type: 'ADD_TODO',
text: 'Read the docs'
})
console.log(store.getState())
// main(store);
main(); main();
// document.addEventListener('DOMContentLoaded', () => {
// const root = document.getElementById('react');
// ReactDOM.render(
// React.createElement(App, { store: store }, null)
// , root
// );
// });

View File

@ -37,8 +37,8 @@ class Sketcher extends THREE.Group {
this.add(this.sketch); this.add(this.sketch);
this.raycaster = new THREE.Raycaster(); this.raycaster = new THREE.Raycaster();
this.raycaster.params.Line.threshold = 0.4; this.raycaster.params.Line.threshold = 0.8;
this.raycaster.params.Points.threshold = 2; this.raycaster.params.Points.threshold = 1.5;
// [0]:x, [1]:y, [2]:z // [0]:x, [1]:y, [2]:z
this.objIdx = new Map() this.objIdx = new Map()

View File

@ -57,7 +57,7 @@ export function extrude() {
const shape = new THREE.Shape(v2s); const shape = new THREE.Shape(v2s);
const extrudeSettings = { amount: 8, bevelEnabled: false}; const extrudeSettings = { depth: 8, bevelEnabled: false};
const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings); const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);

View File

@ -3,16 +3,6 @@ import * as THREE from 'three/src/Three'
export function onHover(e) { export function onHover(e) {
if (this.mode || e.buttons) return if (this.mode || e.buttons) return
if (this.hovered.length) {
for (let ob of this.hovered) {
if (ob && !this.selected.has(ob)) {
ob.material.color.set(0x555555)
}
}
this.hovered = []
// this.dispatchEvent({ type: 'change' })
}
this.raycaster.setFromCamera( this.raycaster.setFromCamera(
new THREE.Vector2( new THREE.Vector2(
(e.clientX / window.innerWidth) * 2 - 1, (e.clientX / window.innerWidth) * 2 - 1,
@ -23,10 +13,9 @@ export function onHover(e) {
const hoverPts = this.raycaster.intersectObjects(this.sketch.children) const hoverPts = this.raycaster.intersectObjects(this.sketch.children)
// console.log(hoverPts) let idx = []
if (hoverPts.length) { if (hoverPts.length) {
let minDist = Infinity; let minDist = Infinity;
let idx = []
for (let i = 0; i < hoverPts.length; i++) { for (let i = 0; i < hoverPts.length; i++) {
if (!hoverPts[i].distanceToRay) continue; if (!hoverPts[i].distanceToRay) continue;
if (hoverPts[i].distanceToRay < minDist) { if (hoverPts[i].distanceToRay < minDist) {
@ -36,19 +25,38 @@ export function onHover(e) {
idx.push(i) idx.push(i)
} }
} }
if (!idx.length) idx.push(0)
}
if (idx.length) {
if (hoverPts[idx[0]].object != this.hovered[0]) {
// if (!idx.length) idx.push(0) for (let ob of this.hovered) {
if (ob && !this.selected.has(ob)) {
ob.material.color.set(0x555555)
}
}
this.hovered = []
for (let i of idx) { for (let i of idx) {
hoverPts[i].object.material.color.set(0x00ff00) hoverPts[i].object.material.color.set(0x00ff00)
// hoverPts[i].object.material.color.set(0xff0000)
this.hovered.push(hoverPts[i].object) this.hovered.push(hoverPts[i].object)
} }
// console.log('render1')
this.dispatchEvent({ type: 'change' }) this.dispatchEvent({ type: 'change' })
return
} }
} else {
if (this.hovered.length) {
for (let ob of this.hovered) {
if (ob && !this.selected.has(ob)) {
ob.material.color.set(0x555555)
}
}
this.hovered = []
// console.log('render2')
this.dispatchEvent({ type: 'change' })
}
}
} }

168
src/stats.module.js Normal file
View File

@ -0,0 +1,168 @@
var Stats = function () {
var mode = 0;
var container = document.createElement('div');
container.style.cssText =
'position:fixed;bottom:0;left:0;cursor:pointer;opacity:0.9;z-index:10000';
container.addEventListener('click', function (event) {
event.preventDefault();
showPanel(++mode % container.children.length);
}, false);
//
function addPanel(panel) {
container.appendChild(panel.dom);
return panel;
}
function showPanel(id) {
for (var i = 0; i < container.children.length; i++) {
container.children[i].style.display = i === id ? 'block' : 'none';
}
mode = id;
}
//
var beginTime = (performance || Date).now(), prevTime = beginTime, frames = 0;
var fpsPanel = addPanel(new Stats.Panel('FPS', '#0ff', '#002'));
var msPanel = addPanel(new Stats.Panel('MS', '#0f0', '#020'));
if (self.performance && self.performance.memory) {
var memPanel = addPanel(new Stats.Panel('MB', '#f08', '#201'));
}
showPanel(0);
return {
REVISION: 16,
dom: container,
addPanel: addPanel,
showPanel: showPanel,
begin: function () {
beginTime = (performance || Date).now();
},
end: function () {
frames++;
var time = (performance || Date).now();
msPanel.update(time - beginTime, 200);
if (time >= prevTime + 1000) {
fpsPanel.update((frames * 1000) / (time - prevTime), 100);
prevTime = time;
frames = 0;
if (memPanel) {
var memory = performance.memory;
memPanel.update(memory.usedJSHeapSize / 1048576, memory.jsHeapSizeLimit / 1048576);
}
}
return time;
},
update: function () {
beginTime = this.end();
},
// Backwards Compatibility
domElement: container,
setMode: showPanel
};
};
Stats.Panel = function (name, fg, bg) {
var min = Infinity, max = 0, round = Math.round;
var PR = round(window.devicePixelRatio || 1);
var WIDTH = 80 * PR, HEIGHT = 48 * PR,
TEXT_X = 3 * PR, TEXT_Y = 2 * PR,
GRAPH_X = 3 * PR, GRAPH_Y = 15 * PR,
GRAPH_WIDTH = 74 * PR, GRAPH_HEIGHT = 30 * PR;
var canvas = document.createElement('canvas');
canvas.width = WIDTH;
canvas.height = HEIGHT;
canvas.style.cssText = 'width:80px;height:48px';
var context = canvas.getContext('2d');
context.font = 'bold ' + (9 * PR) + 'px Helvetica,Arial,sans-serif';
context.textBaseline = 'top';
context.fillStyle = bg;
context.fillRect(0, 0, WIDTH, HEIGHT);
context.fillStyle = fg;
context.fillText(name, TEXT_X, TEXT_Y);
context.fillRect(GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT);
context.fillStyle = bg;
context.globalAlpha = 0.9;
context.fillRect(GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT);
return {
dom: canvas,
update: function (value, maxValue) {
min = Math.min(min, value);
max = Math.max(max, value);
context.fillStyle = bg;
context.globalAlpha = 1;
context.fillRect(0, 0, WIDTH, GRAPH_Y);
context.fillStyle = fg;
context.fillText(round(value) + ' ' + name + ' (' + round(min) + '-' + round(max) + ')', TEXT_X, TEXT_Y);
context.drawImage(canvas, GRAPH_X + PR, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT, GRAPH_X, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT);
context.fillRect(GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, GRAPH_HEIGHT);
context.fillStyle = bg;
context.globalAlpha = 0.9;
context.fillRect(GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, round((1 - (value / maxValue)) * GRAPH_HEIGHT));
}
};
};
export default Stats;

View File

@ -24,8 +24,21 @@ module.exports = {
"sass-loader", "sass-loader",
], ],
}, },
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ["@babel/preset-react"]
}
}
},
], ],
}, },
resolve: {
extensions: ['.js', '.jsx', '*']
}
}; };