Is there any way to define shape in 3d like
var x = 0, y = 0, z=0 ;
var heartShape = new THREE.Shape();
heartShape.moveTo( x + 25, y + 25,z );
heartShape.bezierCurveTo( x + 25, y + 25, z,x + 20, y,z, x, y,z );
heartShape.bezierCurveTo( x - 30, y,z, x - 30, y + 35, ,z,x - 30,y + 35,z-30 );
....
you can go through this example for various shape creation....
http://threejs.org/examples/#webgl_geometry_shapes
Related
I'm trying to create a 2D square with curved/round edges. As I understand it using planes is the way to go. I'm struggling to figure out how exactly to do this though. It seems like it should be simple. Can't seem to find any straightforward answers online either so I would really appreciate the help.
// Create plane
let geometry = new THREE.PlaneGeometry(1, 1)
// Round the edges somehow?
this.mesh = new THREE.Mesh(geometry, material)
this.mesh.rotation.x = -Math.PI / 2
this.container.add(this.mesh)
Managed to get it working based off #prisoner849 suggestion to use THREE.Shape() and THREE.ShapeBufferGeometry(). Posting my answer but its mostly the same as the found here here
let x = 1; let y = 1; let width = 50; let height = 50; let radius = 20
let shape = new THREE.Shape();
shape.moveTo( x, y + radius );
shape.lineTo( x, y + height - radius );
shape.quadraticCurveTo( x, y + height, x + radius, y + height );
shape.lineTo( x + width - radius, y + height );
shape.quadraticCurveTo( x + width, y + height, x + width, y + height - radius );
shape.lineTo( x + width, y + radius );
shape.quadraticCurveTo( x + width, y, x + width - radius, y );
shape.lineTo( x + radius, y );
shape.quadraticCurveTo( x, y, x, y + radius );
let geometry = new THREE.ShapeBufferGeometry( shape );
this.mesh = new THREE.Mesh(geometry, material)
this.mesh.rotation.x = -Math.PI / 2
this.container.add(this.mesh)
I'm using three.js to generate a 3D model and export it as GLB or GLTF using THREE.GLTFExporter. Goal is to make it viewable on our site using google AR.
https://kaboomlaser.com/pages/ar-test (link to files)
The model looks perfectly fine when I view it in https://sandbox.babylonjs.com/ or other GLTF/glb viewers.
See here: https://gltf-viewer.donmccurdy.com/#model=https://cdn.shopify.com/s/files/1/0290/5459/9273/files/test.glb
but when I open it in Googles AR scene previewer https://vr.google.com/scene-viewer-preview , it ends up empty.
Other models I tried did show up in scene previewer, but with the meshes all spiky and weird.
Below the code I used to reproduce the issue with a simple model. (This outputs the models in the link above).
What am I missing?
var x = 0, y = 0;
var heartShape = new THREE.Shape();
heartShape.moveTo(x + 5, y + 5);
heartShape.bezierCurveTo(x + 5, y + 5, x + 4, y, x, y);
heartShape.bezierCurveTo(x - 6, y, x - 6, y + 7, x - 6, y + 7);
heartShape.bezierCurveTo(x - 6, y + 11, x - 3, y + 15.4, x + 5, y + 19);
heartShape.bezierCurveTo(x + 12, y + 15.4, x + 16, y + 11, x + 16, y + 7);
heartShape.bezierCurveTo(x + 16, y + 7, x + 16, y, x + 10, y);
heartShape.bezierCurveTo(x + 7, y, x + 5, y + 5, x + 5, y + 5);
var geometry = new THREE.ExtrudeBufferGeometry(heartShape, {
depth: 4, bevelEnabled: false,
bevelThickness: 0.4,
bevelSize: 0.4,
steps: 2,
BevelSegments: 2,
curveSegments: 10
});
var material = new THREE.MeshLambertMaterial({ color: 0xa00A0A });
var mesh = new THREE.Mesh(geometry, material);
var scene = new THREE.Scene();
scene.add(mesh);
const options = {
binary: true,
forceIndices: true
};
var exporter = new GLTFExporter();
exporter.parse(scene, function (data) {
if (options.binary) {
savetoFile(data, 'test.glb', 'model/gltf-binary');
}
else {
savetoFile(JSON.stringify(data), 'test.gltf', 'text/plain');
}
},
options);
I had the same issue with some of the models I got from Poly.
Try to Import the model in Blender and Export again. I tried with your model and it works fine
I have a raster image with dimensions (in pixels) 16384-by-12288 which is successfully rendered in leaflet. I am using a my own CRS and I am placing point (0,0) at the bottomleft corner of the image point (16384, 12288) at its topright using the option: transformation: new L.Transformation(1 / 64, 0, -1 / 64, 256).
The axes of my image, however, have range x:[6150, 1370] and y:[12987, 18457]
How can I tell leaflet to use my range as a system of coordinates please? Hence a marker at location (6150, 12987) will correspond and show up at the bottomleft corner: (0,0). I have done this manually using the function below:
var grid = {x0: 6150, // range of plot in Matlab
x1: 13751,
y0: 12987,
y1: 18457};
var img = [16384,
12288];
function project(p, img, grid) {
var x = p[0],
y = p[1];
xx = img[0] / (grid.x1 - grid.x0) * (x - grid.x0);
yy = img[1] / (grid.y1 - grid.y0) * (y - grid.y0);
return [xx, yy]
}
I was wondering however that there must a more streamlined and better way to do this. My code is:
var yx = L.latLng;
var xy = function(x, y) {
if (L.Util.isArray(x)) { // When doing xy([x, y]);
return yx(x[1], x[0]);
}
return yx(y, x); // When doing xy(x, y);
};
var img = [
16384, // original width of image
12288 // original height of image
];
L.CRS.MySimple = L.extend({}, L.CRS.Simple, {
transformation: new L.Transformation(1 / 64, 0, -1 / 64, 256),
});
var bounds = L.latLngBounds([
xy(0, 0),
xy(img)
]);
var map = L.map('map', {
crs: L.CRS.MySimple,
maxBounds: bounds.pad(.5),
}).setView([img[1] / 2, img[0] / 2], 0);
L.tileLayer('myImage/{z}/{x}/{y}.png', {
bounds: bounds,
minZoom: 1,
maxZoom: 6
}).addTo(map);
L.marker([0, 0]).addTo(map).bindPopup("Zero");
L.marker([img[1] / 2, img[0] / 2]).addTo(map).bindPopup("[img[1] / 2, img[0] / 2]");
L.marker([img[1], img[0]]).addTo(map).bindPopup("img");
I think I did some progress. In case someone faces something similar in the future, here is my code: (comments more than welcome)
var yx = L.latLng;
var xy = function(x, y) {
if (L.Util.isArray(x)) { // When doing xy([x, y]);
return yx(x[1], x[0]);
}
return yx(y, x); // When doing xy(x, y);
};
var img = [
16384, // original width of image
12288 // original height of image
];
var mapSW = [0, 16384],
mapNE = [12288, 0];
var roi = { //range of interest
x0: 6150,
x1: 13751,
y0: 12987,
y1: 18457
};
a = img[0] / (roi.x1 - roi.x0)
b = -img[0] / (roi.x1 - roi.x0) * roi.x0
c = img[1] / (roi.y1 - roi.y0)
d = -img[1] / (roi.y1 - roi.y0) * roi.y0
// This transformation maps a point in pixel dimensions to our user defined roi
var t = new L.Transformation(a, b, c, d);
// The transformation in this CRS maps the the bottom right corner to (0,0) and the topleft to (256, 256)
L.CRS.MySimple = L.extend({}, L.CRS.Simple, {
transformation: new L.Transformation(1 / 64, 0, -1 / 64, 256),
});
var bounds = L.latLngBounds([
xy(0, 0),
xy(img)
]);
var map = L.map('map', {
crs: L.CRS.MySimple,
maxBounds: bounds.pad(.5),
}).setView([img[1] / 2, img[0] / 2], 0);
L.tileLayer('map/{z}/{x}/{y}.png', {
bounds: bounds,
minZoom: 1,
maxZoom: 6,
}).addTo(map);
// map.setMaxBounds(new L.LatLngBounds(
// map.unproject(mapSW, map.getMaxZoom()),
// map.unproject(mapNE, map.getMaxZoom()),
// ));
L.marker([0, 0]).addTo(map).bindPopup("Zero");
L.marker([img[1] / 2, img[0] / 2]).addTo(map).bindPopup("[img[1] / 2, img[0] / 2]");
L.marker([img[1], img[0]]).addTo(map).bindPopup("img");
var marker = L.marker(xy([10000, 0]), {
draggable: true
}).addTo(map);
marker.bindPopup("");
marker.on("dragend", function(e) {
m = marker.getLatLng();
proj = map.project(m, map.getMaxZoom());
marker.getPopup().setContent('Clicked ' +m.toString() + '<br />' +
'Pixels ' + proj.toString())
.openOn(map);
})
L.control.scale({
imperial: false
}).addTo(map);
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(map);
}
map.on('click', onMapClick);
var p = t.transform(L.point(roi.x1, roi.y1));
L.circleMarker(xy([p.x, p.y])).addTo(map);
p = t.transform(L.point(10000, 12987));
L.circleMarker(xy([p.x, p.y])).addTo(map);
p = t.transform(L.point(13000, 12987));
L.circleMarker(xy([p.x, p.y])).addTo(map);
p = t.transform(L.point(6150, 18000));
L.circleMarker(xy([p.x, p.y])).addTo(map);
I have a 3x3 Convolution Function defined like this
conv(x, y) = 0;
conv(x, y) += kernel(r.x, r.y) * in(x + r.x - 1, y + r.y - 1);
Size of the input buffer is 16 x 16
If I want to execute it with padding I can directly do
in = Halide::BoundaryConditions::constant_exterior(in_buffer, 0, 0, 16, 0, 16)
But I have to execute without padding and so I am trying to manually set the bounds on the function like this
conv.bound(x, 1, 14);
conv.bound(y, 1, 14);
This returns an error message
Error:
Bounds given for convolution in y (from 1 to 14) do not cover required region (from 0 to 15)
What should I do to set bounds on a Var in Func?
I think you need not to manually set the bounds using the *.bound function. Try this one:
Halide::Func conv("conv"), kernelF("kernel"), in("in");
Halide::Var x("x"), y("y");
Halide::RDom r(0, 3, 0, 3,"r");
in = Halide::BoundaryConditions::constant_exterior(in_buffer, 0,
0, 16, 0, 16);
kernelF = Halide::BoundaryConditions::constant_exterior(kernel_buffer, 0,
0, 3, 0, 3);
conv(x, y) = 0.0f;
conv(x, y) += kernelF(r.x, r.y) * in(x + r.x, y + r.y);
//conv.print_loop_nest();
Halide::Buffer<float_t> outputBuf = conv.realize(14, 14);
Look, we can set the bounds directly in *.realize() arguments, i.e. 14=16-3+1; Also, note that the convolution anchors are at the top-left of kernels.
I load a model with vertex and vertex nromal,
for (var i = 0, vindex = 0; i < triangle.length; i++, vindex += 3) {
x = parseFloat(triangle[i].attributes.getNamedItem('x1').value);
y = parseFloat(triangle[i].attributes.getNamedItem('y1').value);
z = parseFloat(triangle[i].attributes.getNamedItem('z1').value);
this.geometry.vertices.push(new THREE.Vector3(x * scale + this.translateVector.x, y * scale + this.translateVector.y, z * scale + this.translateVector.z));
x = parseFloat(triangle[i].attributes.getNamedItem('x2').value);
y = parseFloat(triangle[i].attributes.getNamedItem('y2').value);
z = parseFloat(triangle[i].attributes.getNamedItem('z2').value);
this.geometry.vertices.push(new THREE.Vector3(x * scale + this.translateVector.x, y * scale + this.translateVector.y, z * scale + this.translateVector.z));
x = parseFloat(triangle[i].attributes.getNamedItem('x3').value);
y = parseFloat(triangle[i].attributes.getNamedItem('y3').value);
z = parseFloat(triangle[i].attributes.getNamedItem('z3').value);
this.geometry.vertices.push(new THREE.Vector3(x * scale + this.translateVector.x, y * scale + this.translateVector.y, z * scale + this.translateVector.z));
var face = new THREE.Face3(vindex, vindex + 1, vindex + 2);
face.color.setHex(this.faceColor || this.defaultcolor);
face.vertexNormals = [];
nx = parseFloat(triangle[i].attributes.getNamedItem('nx1').value);
ny = parseFloat(triangle[i].attributes.getNamedItem('ny1').value);
nz = parseFloat(triangle[i].attributes.getNamedItem('nz1').value);
face.vertexNormals.push(new THREE.Vector3(-nx, -ny, -nz));
nx1 = parseFloat(triangle[i].attributes.getNamedItem('nx2').value);
ny1 = parseFloat(triangle[i].attributes.getNamedItem('ny2').value);
nz1 = parseFloat(triangle[i].attributes.getNamedItem('nz2').value);
face.vertexNormals.push(new THREE.Vector3(-nx1, -ny1, -nz1));
nx2 = parseFloat(triangle[i].attributes.getNamedItem('nx3').value);
ny2 = parseFloat(triangle[i].attributes.getNamedItem('ny3').value);
nz2 = parseFloat(triangle[i].attributes.getNamedItem('nz3').value);
face.vertexNormals.push(new THREE.Vector3(-nx2, -ny2, -nz2));
face.normal.set((nx + nx1 + nx2) / 3, (ny + ny1 + ny2) / 3,(nz + nz1 + nz2) / 3);
this.geometry.faces.push(face);
}
this.material = new THREE.MeshBasicMaterial({ vertexColors: THREE.FaceColors, overdraw: true , opacity: 1, transparent: 0 });
this.mesh = new THREE.Mesh(this.geometry, this.material);
this.mesh.name = this.id;
this.mesh.updateMatrix();
this.mesh.matrixAutoUpdate = false;
scene.add(this.mesh);
the house below, front face is invisible, so front wall and left wall is invisible, we can see through the inside of house, but I want it to show all walls and not see through, could anyone help me?
after I change to Lambert material it still show house inside, I've tried, cw,ccw, or invert index of vertex, invert normal. could any body help?
it is possible there is something wrong with the face UV's. try making the material applied doublesided.
seems find the answer.
that's because part of the house model position.z < 0, and camera's near < 0, maybe three.js z-buffer clear negative = 0, z-buffer determines the sheltery relation.