working extrude
howard
parent
5d56145221
commit
1e9067f482
151
src/index.js
151
src/index.js
|
|
@ -1,62 +1,30 @@
|
|||
// class MinMaxGUIHelper {
|
||||
// constructor(obj, minProp, maxProp, minDif) {
|
||||
// this.obj = obj;
|
||||
// this.minProp = minProp;
|
||||
// this.maxProp = maxProp;
|
||||
// this.minDif = minDif;
|
||||
// }
|
||||
// get min() {
|
||||
// return this.obj[this.minProp];
|
||||
// }
|
||||
// set min(v) {
|
||||
// this.obj[this.minProp] = v;
|
||||
// this.obj[this.maxProp] = Math.max(this.obj[this.maxProp], v + this.minDif);
|
||||
// }
|
||||
// get max() {
|
||||
// return this.obj[this.maxProp];
|
||||
// }
|
||||
// set max(v) {
|
||||
// this.obj[this.maxProp] = v;
|
||||
// this.min = this.min; // this will call the min setter
|
||||
// }
|
||||
// }
|
||||
|
||||
// const gui = new GUI();
|
||||
// gui.add(camera, 'zoom', 0.01, 1, 0.01).listen();
|
||||
// const minMaxGUIHelper = new MinMaxGUIHelper(camera, 'near', 'far', 0.1);
|
||||
// gui.add(minMaxGUIHelper, 'min', 0.1, 50, 0.1).name('near');
|
||||
// gui.add(minMaxGUIHelper, 'max', 0.1, 50, 0.1).name('far');
|
||||
|
||||
import * as THREE from '../node_modules/three/src/Three';
|
||||
import { OrbitControls } from './OrbitControls'
|
||||
import { TrackballControls } from './trackball'
|
||||
import { Sketcher } from './sketcher/Sketcher'
|
||||
import GUI from '../node_modules/dat.gui/src/dat/gui/GUI.js'
|
||||
import Stats from '../node_modules/three/examples/jsm/libs/stats.module.js';
|
||||
|
||||
import { KeyboardController } from './utils'
|
||||
|
||||
|
||||
|
||||
function main() {
|
||||
|
||||
|
||||
var stats = new Stats();
|
||||
stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
|
||||
document.body.appendChild(stats.dom);
|
||||
|
||||
const canvas = document.querySelector('#c');
|
||||
const view1Elem = document.querySelector('#view1');
|
||||
// const view2Elem = document.querySelector('#view2');
|
||||
const renderer = new THREE.WebGLRenderer({ canvas });
|
||||
|
||||
const scene = new THREE.Scene();
|
||||
window.scene = scene;
|
||||
scene.background = new THREE.Color('pink');
|
||||
scene.background = new THREE.Color(0xb0b0b0);
|
||||
|
||||
const helpersGroup = new THREE.Group();
|
||||
scene.add(helpersGroup);
|
||||
|
||||
const axesHelper = new THREE.AxesHelper(5);
|
||||
helpersGroup.add(axesHelper);
|
||||
|
||||
const size = 1;
|
||||
const near = 5;
|
||||
|
|
@ -64,65 +32,32 @@ function main() {
|
|||
const camera = new THREE.OrthographicCamera(-size, size, size, -size, near, far);
|
||||
camera.zoom = 0.1;
|
||||
camera.position.set(0, 0, 20);
|
||||
const controls = new OrbitControls(camera, view1Elem);
|
||||
// const controls = new TrackballControls(camera, view1Elem);
|
||||
|
||||
// const controls = new OrbitControls(camera, view1Elem);
|
||||
const controls = new TrackballControls(camera, canvas);
|
||||
controls.target.set(0, 0, 0);
|
||||
controls.update()
|
||||
// const cameraHelper = new THREE.CameraHelper(camera);
|
||||
// helpersGroup.add(cameraHelper);
|
||||
|
||||
|
||||
// const camera2 = new THREE.PerspectiveCamera(
|
||||
// 60, // fov
|
||||
// 2, // aspect
|
||||
// 0.1, // near
|
||||
// 500, // far
|
||||
// );
|
||||
|
||||
// const c2size = 10;
|
||||
// const c2near = 5;
|
||||
// const c2far = 200;
|
||||
// const camera2 = new THREE.OrthographicCamera(-c2size, c2size, c2size, -c2size, c2near, c2far);
|
||||
// camera2.zoom = 0.5
|
||||
|
||||
// camera2.position.set(16, 28, 40);
|
||||
// camera2.lookAt(0, 5, 0);
|
||||
// const controls2 = new OrbitControls(camera2, view2Elem);
|
||||
// controls2.target.set(0, 5, 0);
|
||||
// controls2.update();
|
||||
|
||||
|
||||
|
||||
const axesHelper = new THREE.AxesHelper(5);
|
||||
helpersGroup.add(axesHelper);
|
||||
|
||||
const sketchPlane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
|
||||
const sketcher = new Sketcher(camera, view1Elem, sketchPlane)
|
||||
window.sketcher = sketcher
|
||||
scene.add(sketcher)
|
||||
|
||||
|
||||
const color = 0xFFFFFF;
|
||||
const intensity = 1;
|
||||
|
||||
const light1 = new THREE.DirectionalLight(color, intensity);
|
||||
light1.position.set(10, 10, 10);
|
||||
scene.add(light1);
|
||||
// const lightHelper = new THREE.DirectionalLightHelper(light1, 5);
|
||||
// helpersGroup.add(lightHelper);
|
||||
|
||||
const light2 = new THREE.DirectionalLight(color, intensity);
|
||||
light2.position.set(-10, -10, -5);
|
||||
scene.add(light2);
|
||||
// const lightHelper2 = new THREE.DirectionalLightHelper(light2, 5);
|
||||
// helpersGroup.add(lightHelper2);
|
||||
|
||||
{
|
||||
const color = 0xFFFFFF;
|
||||
const intensity = 1;
|
||||
const light = new THREE.AmbientLight(color, intensity);
|
||||
scene.add(light);
|
||||
}
|
||||
const ambient = new THREE.AmbientLight(color, intensity);
|
||||
scene.add(ambient);
|
||||
|
||||
|
||||
const sketchPlane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
|
||||
const sketcher = new Sketcher(camera, canvas, sketchPlane)
|
||||
window.sketcher = sketcher
|
||||
scene.add(sketcher)
|
||||
|
||||
|
||||
function resizeRendererToDisplaySize(renderer) {
|
||||
|
|
@ -136,67 +71,19 @@ function main() {
|
|||
return needResize;
|
||||
}
|
||||
|
||||
function setScissorForElement(elem) {
|
||||
const canvasRect = canvas.getBoundingClientRect();
|
||||
const elemRect = elem.getBoundingClientRect();
|
||||
|
||||
// compute a canvas relative rectangle
|
||||
const right = Math.min(elemRect.right, canvasRect.right) - canvasRect.left;
|
||||
const left = Math.max(0, elemRect.left - canvasRect.left);
|
||||
const bottom = Math.min(elemRect.bottom, canvasRect.bottom) - canvasRect.top;
|
||||
const top = Math.max(0, elemRect.top - canvasRect.top);
|
||||
|
||||
const width = Math.min(canvasRect.width, right - left);
|
||||
const height = Math.min(canvasRect.height, bottom - top);
|
||||
|
||||
// setup the scissor to only render to that part of the canvas
|
||||
const positiveYUpBottom = canvasRect.height - bottom;
|
||||
renderer.setScissor(left, positiveYUpBottom, width, height);
|
||||
renderer.setViewport(left, positiveYUpBottom, width, height);
|
||||
|
||||
// return the aspect
|
||||
return width / height;
|
||||
}
|
||||
|
||||
function render() {
|
||||
stats.begin();
|
||||
resizeRendererToDisplaySize(renderer);
|
||||
|
||||
renderer.setScissorTest(true);
|
||||
{
|
||||
const aspect = setScissorForElement(view1Elem);
|
||||
camera.left = -aspect;
|
||||
camera.right = aspect;
|
||||
if (resizeRendererToDisplaySize(renderer)) {
|
||||
const canvas = renderer.domElement;
|
||||
camera.left = -canvas.clientWidth / canvas.clientHeight;
|
||||
camera.right = canvas.clientWidth / canvas.clientHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
// cameraHelper.update();
|
||||
// cameraHelper.visible = false;
|
||||
// lightHelper.visible = false;
|
||||
// lightHelper2.visible = false;
|
||||
|
||||
scene.background.set(0xb0b0b0);
|
||||
}
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
// {
|
||||
// const aspect = setScissorForElement(view2Elem);
|
||||
// camera2.aspect = aspect;
|
||||
// camera2.updateProjectionMatrix();
|
||||
// cameraHelper.visible = true;
|
||||
// lightHelper.visible = true;
|
||||
// lightHelper2.visible = true;
|
||||
// scene.background.set(0x000040);
|
||||
// renderer.render(scene, camera2);
|
||||
// }
|
||||
|
||||
stats.end();
|
||||
|
||||
// requestAnimationFrame(render);
|
||||
}
|
||||
// requestAnimationFrame(render);
|
||||
|
||||
|
||||
controls.addEventListener('change', render);
|
||||
controls.addEventListener('start', render);
|
||||
// controls2.addEventListener('change', render);
|
||||
sketcher.addEventListener('change', render);
|
||||
window.addEventListener('resize', render);
|
||||
render();
|
||||
|
|
|
|||
|
|
@ -0,0 +1,101 @@
|
|||
import * as THREE from 'three/src/Three'
|
||||
|
||||
export function onHover(e) {
|
||||
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(
|
||||
new THREE.Vector2(
|
||||
(e.clientX / window.innerWidth) * 2 - 1,
|
||||
- (e.clientY / window.innerHeight) * 2 + 1
|
||||
),
|
||||
this.camera
|
||||
);
|
||||
|
||||
const hoverPts = this.raycaster.intersectObjects(this.children)
|
||||
|
||||
// console.log(hoverPts)
|
||||
if (hoverPts.length) {
|
||||
let minDist = Infinity;
|
||||
let idx = []
|
||||
for (let i = 0; i < hoverPts.length; i++) {
|
||||
if (!hoverPts[i].distanceToRay) continue;
|
||||
if (hoverPts[i].distanceToRay < minDist) {
|
||||
minDist = hoverPts[i].distanceToRay
|
||||
idx = [i]
|
||||
} else if (hoverPts[i].distanceToRay == minDist) {
|
||||
idx.push(i)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// if (!idx.length) idx.push(0)
|
||||
|
||||
for (let i of idx) {
|
||||
hoverPts[i].object.material.color.set(0x00ff00)
|
||||
// hoverPts[i].object.material.color.set(0xff0000)
|
||||
this.hovered.push(hoverPts[i].object)
|
||||
}
|
||||
this.dispatchEvent({ type: 'change' })
|
||||
return
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
export function onPick(e) {
|
||||
if (this.mode || e.buttons != 1) return
|
||||
|
||||
if (this.hovered.length) {
|
||||
|
||||
for (let h of this.hovered) {
|
||||
this.selected.add(h)
|
||||
}
|
||||
|
||||
if (this.hovered[0].type == "Points") {
|
||||
this.domElement.addEventListener('pointermove', this.onDrag);
|
||||
this.domElement.addEventListener('pointerup', this.onRelease)
|
||||
}
|
||||
} else {
|
||||
for (let obj of this.selected) {
|
||||
obj.material.color.set(0x555555)
|
||||
}
|
||||
this.dispatchEvent({ type: 'change' })
|
||||
this.selected.clear()
|
||||
}
|
||||
}
|
||||
|
||||
export function onDrag(e) {
|
||||
const mouseLoc = this.getLocation(e);
|
||||
|
||||
for (let h of this.hovered) {
|
||||
this.ptsBuf.set(
|
||||
mouseLoc,
|
||||
this.objIdx.get(h.id) * 3
|
||||
)
|
||||
}
|
||||
|
||||
this.solve()
|
||||
this.dispatchEvent({ type: 'change' })
|
||||
}
|
||||
|
||||
|
||||
export function onRelease() {
|
||||
this.domElement.removeEventListener('pointermove', this.onDrag)
|
||||
this.domElement.removeEventListener('pointerup', this.onRelease)
|
||||
|
||||
for (let ii of this.hovered) {
|
||||
ii.geometry.computeBoundingSphere()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -10,7 +10,7 @@ export function onHover(e) {
|
|||
}
|
||||
}
|
||||
this.hovered = []
|
||||
this.dispatchEvent({ type: 'change' })
|
||||
// this.dispatchEvent({ type: 'change' })
|
||||
}
|
||||
|
||||
this.raycaster.setFromCamera(
|
||||
|
|
|
|||
Loading…
Reference in New Issue