@hrgdavor This is the best idea. Treat jscad as a modeling library, and the model can work on other rendering engines.
I recently tried to add the function of dimensioning to the two-dimensional model. After encapsulating the function, I can input the starting point, the end point and the type of the label to draw the label.
This is the input parameter of the dimension marker.
It works fine, but i cannot select points with the mouse
@danmarshall I also want to change the rendering of the model from regl-renderer to threejs. Using regl-renderer is too painful! Especially threejs is more convenient in terms of interaction.
I use camera-unproject to do coordinate mapping, but the obtained coordinates are obviously wrong.
code:
const regl = this.$el
const handleMouseDown = (e) => {
const x = 1 - (e.offsetX / regl.clientWidth) * 2
const y = (e.offsetY / regl.clientHeight) * 2 - 1
const point = vec3.fromValues(x, y, 0.5)
const { projection, view, viewport } = this.camera
const combinedProjView = mat4.multiply([], projection, view)
const invProjView = mat4.invert([], combinedProjView)
const result = unproject([], point, viewport, invProjView)
console.log('convasSize: ', [regl.clientWidth, regl.clientHeight])
console.log('viewport: ', viewport)
console.log('clickPoint: ', [x, y])
console.log('unproject result:', result)
}
this.$el.addEventListener('mousedown', handleMouseDown.bind(this))
Could it be that I did something wrong?
@gilboonet
Hello, I watched this video. There is a point selection function in the video, I only need to do a two-dimensional dimensioning function. What I want to know is how the click function in the video maps the click position of the mouse to the coordinates in the coordinate system? I did not succeed in mapping.
Because when the canvas moves, the origin of the coordinate system and the origin of the canvas are not the same.
can you help me? Maybe I need some knowledge of graphics.
Hi, all! How to get the coordinates in the coordinate system through the mouse?
When the mouse clicks here, get the clicked coordinates (1, 0).
Maybe a method similar to Vector3 requires unproject() to complete?
In Threejs：
unproject( camera ) {
return this.applyMatrix4( camera.projectionMatrixInverse ).applyMatrix4( camera.matrixWorld );
}
@hrgdavor
This feature is cool and very useful. I tried to map the mouse coordinates to the canvas coordinates, but without success. Do you have the realization of this function?
@z3dev
Ok, I have submitted an issue on github.
https://github.com/jscad/OpenJSCAD.org/issues/916
@z3dev
When I use project() to try to project the .stl model onto a 2d plane, the console prompts:
But the 3d model can be displayed normally.
This problem does not appear in all .stl models, only complex .stl models will appear in this problem.
I debugged and found that the cause of this problem was that poly3.toPoints() returned an empty array.
Should the empty array be filtered before calling poly3.toPoints()？
@jscad/dxf-deserialize This library ignores the text in the dxf file when converting the dxf file into js.
@z3dev OK! If you render multiple models at the same time, you can only select the model from the list and edit the model parameters. This is the solution I thought of, although it is not perfect.
Interesting question, how to select the rendered model with the mouse, and then edit the parameters of the selected model?
I did not find the relevant content in the user manual！
@z3dev Have you implemented related functions?
Hi! If I want to adjust the imported dxf model by mouse or form in jscad. what do I do? It is found that the js code converted by @jscad/dxf-deserializer is not readable code. Does this mean that the imported model cannot be adjusted with the mouse?
@z3dev
// Produced by JSCAD IO Library : DXF Deserializer (2.3.2)
const { colors, geometries, maths, primitives, transforms } = require("@jscad/modeling");
const { colorize, hexToRgb } = colors;
const main = () => {
let layers = [];
return layers.concat(layer0(),layer1(),layer2(),[])
};
function createPolygon(listofpoints, color) {
let polygon = geometries.poly3.fromPoints(listofpoints);
if (color) polygon.color = color;
return polygon;
}
function layer0() {
const jscad2_polygons = [
createPolygon(
[
[-7.477781319009107, 0, 4.999988321182407],
[-7.477781319009107, 0, 0],
[-7.571599135852652, -0.0100263315710659, 0],
],
null
),
createPolygon(
[
[-7.477781319009107, 0, 4.999988321182407],
[-7.571599135852652, -0.0100263315710659, 0],
[-7.571599135852652, -0.0100263315710659, 4.999988321182407],
],
null
),
createPolygon(
[
[-7.571599135852652, -0.0100263315710659, 4.999988321182407],
[-7.571599135852652, -0.0100263315710659, 0],
[-7.845747687667226, -0.07906478610326254, 0],
],
null
),
...
];
let jscad2 = geometries.geom3.create(jscad2_polygons);
return [jscad2];
}
function layer1() {
return [];
}
function layer2() {
return [];
}
module.exports = { main };
@z3dev said in Use jscad in vue:
@jess-yan Welcome!
The WEB UI is based on a different reactive framework called 'most'. I would not recommend using this.
You might be interested in the small VUE components that I created to show how to use JSCAD within the VUE framework.
https://github.com/z3dev/vue-components
It's still in progress so let me know if you have any issues.
For vue-components, I removed vuex related content, which I think is cleaner and easier to use.
@z3dev Thank you for your help, good news! I successfully built a model display system using vue+JSCAD. It can directly display .dxf files. But I was frustrated to find that my system cannot display 2D graphics.
When did I have a problem because the system has no abnormal information. 2D files can also be successfully compiled, that is, there is no display on the canvas.
My key is to be consistent with the key code in vue-components. I didn't use vue-components directly, and I can also key code on the basis of vue.
export default {
name: 'cad-viewer',
props: {
solids: {
type: Array,
},
grid: {
type: Object,
},
axis: {
type: Object,
},
cameraPosition: {
type: Array,
default: () => [150, -180, 233],
},
},
data() {
return {
render: () => {},
updateView: true,
rotateDelta: [0, 0],
panDelta: [0, 0],
zoomDelta: 0,
zoom2Fit: false,
// state to track mouse
mouse: {
buttons: 0,
shiftKey: false,
isOrbiting: false,
lastClick: 0, // ms
lastZoom: 0,
},
controls: orbitControls.defaults,
camera: {
...perspectiveCamera.defaults,
position: this.cameraPosition,
},
}
},
computed: {
gridOptions() {
const {
show = false,
color = [0, 0, 0, 1],
subColor = [0, 0, 1, 0.5],
fadeOut = false,
transparent = false,
size = [200, 200],
ticks = [50, 5],
} = this.grid
return {
visuals: {
drawCmd: 'drawGrid',
show,
color,
subColor,
fadeOut,
transparent,
},
size,
ticks,
}
},
axisOptions() {
const { show = true } = this.axis
return {
visuals: {
drawCmd: 'drawAxis',
show,
},
}
},
content() {
return {
// define the visual content
camera: this.camera,
drawCommands: {
drawGrid: drawCommands.drawGrid,
drawAxis: drawCommands.drawAxis,
drawMesh: drawCommands.drawMesh,
},
entities: [this.gridOptions, this.axisOptions, ...this.solids],
}
},
},
watch: {
solids() {
this.updateView = true
},
grid() {
this.updateView = true
},
cameraPosition(position) {
this.camera.position = position
this.updateView = true
},
},
created() {
numberOfInstances++
this.id = numberOfInstances
},
mounted() {
this.initializeRenderer()
},
methods: {
initializeRenderer() {
this.$el.id = `viewer${this.id}`
const width = this.$el.clientWidth
const height = this.$el.clientHeight
perspectiveCamera.setProjection(this.camera, this.camera, {
width,
height,
})
perspectiveCamera.update(this.camera, this.camera)
// prepare the renderer
const setupOptions = {
glOptions: { container: this.$el },
}
this.renderer = prepareRender(setupOptions)
window.addEventListener('resize', () => {
this.updateView = true
})
// 告诉浏览器希望执行一次动画，并在下次重绘制前执行回调函数
window.requestAnimationFrame(this.updateAndRender)
},
updateAndRender() {
// 处理相机和轨道
this.doRotatePanZoom()
if (this.updateView) {
const updates = orbitControls.update({
controls: this.controls,
camera: this.camera,
})
this.controls = { ...this.controls, ...updates.controls }
this.updateView = this.controls.changed
this.camera.position = updates.camera.position
perspectiveCamera.update(this.camera)
this.resize()
const { content } = this
// TODO 这里的处理不知道是否合适
content.entities = content.entities
.reduce((pre, cur) => {
if (!cur.visuals) {
pre.push(...entitiesFromSolids({}, cur))
}
pre.push(cur)
return pre
}, [])
.filter((item) => item.visuals)
this.renderer(content)
}
window.requestAnimationFrame(this.updateAndRender)
},
doRotatePanZoom() {
let {
rotateDelta,
panDelta,
zoomDelta,
zoom2Fit,
controls,
camera,
content,
} = this
// 旋转增量存在
if (rotateDelta[0] || rotateDelta[1]) {
const updated = orbitControls.rotate(
{ controls, camera, speed: rotateSpeed },
rotateDelta
)
this.controls = { ...controls, ...updated.controls }
this.rotateDelta = [0, 0]
this.updateView = true
}
// 平移增量存在
if (panDelta[0] || panDelta[1]) {
const updated = orbitControls.pan(
{ controls, camera, speed: panSpeed },
panDelta
)
this.camera.position = updated.camera.position
this.camera.target = updated.camera.target
this.panDelta = [0, 0]
this.updateView = true
}
// 缩放增量存在
if (zoomDelta) {
const updated = orbitControls.zoom(
{ controls, camera, speed: zoomSpeed },
zoomDelta
)
this.controls = { ...controls, ...updated.controls }
this.zoomDelta = 0
this.updateView = true
}
// 缩放到合适比例
if (zoom2Fit) {
// 缩放到缩放比为2
controls.zoomToFit.tightness = 2
const updated = orbitControls.zoomToFit({
controls,
camera,
entities: content.entities.filter((entity) => entity.geometry),
})
this.controls = { ...controls, ...updated.controls }
this.zoom2Fit = false
this.updateView = true
}
},
resize() {
// 像素比例
const pixelRatio = window.devicePixelRatio || 1
// 获取元素大小和相对于视口位置
const bounds = this.$el.getBoundingClientRect()
// 计算元素边界尺寸
const width = (bounds.right - bounds.left) * pixelRatio
const height = (bounds.bottom - bounds.top) * pixelRatio
// 获取元素真实尺寸
const prevWidth = this.$el.width
const prevHeight = this.$el.height
// 如果尺寸发生变化
if (prevWidth !== width || prevHeight !== height) {
// 更新元素的尺寸
this.$el.width = width
this.$el.height = height
// 设置相机投影
perspectiveCamera.setProjection(this.camera, this.camera, {
width,
height,
})
// 更新相机
perspectiveCamera.update(this.camera, this.camera)
this.updateView = true
}
},
// mouse event handling
onMouseDown(event) {
const { mouse } = this
mouse.buttons = event.buttons
mouse.shiftKey = event.shiftKey
mouse.isOrbiting = true
},
onMouseUp() {
const now = Date.now()
const { mouse } = this
if (mouse.lastClick) {
const ms = now - mouse.lastClick
if (ms < doubleClickSpeed) {
if (mouse.isOrbiting) {
this.zoom2Fit = true
}
}
}
mouse.lastClick = now
mouse.buttons = 0
mouse.shiftKey = false
mouse.isOrbiting = false
},
onMouseMove(event) {
const { mouse, panDelta, rotateDelta } = this
if (mouse.isOrbiting) {
if (mouse.shiftKey) {
panDelta[0] -= event.movementX
panDelta[1] += event.movementY
} else {
rotateDelta[0] += event.movementX
rotateDelta[1] -= event.movementY
}
}
},
onScroll(event) {
event.preventDefault()
this.zoomDelta = event.deltaY
},
},
}
@z3dev I want to develop a web system that displays CAD models based on jscad and can adjust the models through simple parameter configuration. The scene code is converted to vue, the scene can be displayed normally, but how to add the model to the scene smoothly? I can't find related content in jscad-web.
