Three.js - Extra faces created when exporting model from Blender - three.js
Three.js version: 71
Blender version: 2.75a
I want to export wireframe models from blender and have them appear in my Three.js scene exactly how they appear in Blender. This is so I can use them as outline borders for my models. For example, here is the wireframe model of the default cube that is there when you start up blender:
Here is the JSON for this model after I exported it:
{
"uvs": [],
"name": "CubeGeometry.1",
"materials": [{
"wireframe": true,
"DbgName": "Material",
"depthWrite": true,
"transparent": false,
"depthTest": true,
"specularCoef": 50,
"colorAmbient": [0.64,0.64,0.64],
"opacity": 1,
"vertexColors": false,
"DbgIndex": 0,
"DbgColor": 15658734,
"shading": "phong",
"visible": true,
"colorEmissive": [0,0,0],
"blending": "NormalBlending",
"colorSpecular": [0.5,0.5,0.5]
}],
"faces": [35,0,1,2,3,0,0,1,2,3,35,4,7,6,5,0,4,5,6,7,35,0,4,5,1,0,0,4,7,1,35,1,5,6,2,0,1,7,6,2,35,2,6,7,3,0,2,6,5,3,35,4,0,3,7,0,4,0,3,5],
"vertices": [1,-1,-1,1,-1,1,-1,-1,1,-1,-1,-1,1,1,-1,0.999999,1,1,-1,1,1,-1,1,-1],
"metadata": {
"uvs": 0,
"materials": 1,
"generator": "io_three",
"vertices": 8,
"faces": 6,
"normals": 8,
"type": "Geometry",
"version": 3,
"colors": 0
},
"normals": [0.577349,-0.577349,-0.577349,0.577349,-0.577349,0.577349,-0.577349,-0.577349,0.577349,-0.577349,-0.577349,-0.577349,0.577349,0.577349,-0.577349,-0.577349,0.577349,-0.577349,-0.577349,0.577349,0.577349,0.577349,0.577349,0.577349],
"colors": []
}
Notice how there are 6 faces. I want it to appear exactly like this in my Three.js scene. However, extra faces get drawn. It's usually because for some reason Three.js is connecting corner vertices that weren't connected in Blender. Here is how it looks after I load it into my scene:
You want to render a cube or box in wireframe mode but without diagonals.
One way to do that is with EdgesHelper, like so:
var helper = new THREE.EdgesHelper( mesh, 0xff0000 );
helper.material.linewidth = 2;
scene.add( helper );
You can also see this related answer.
three.js r.71
Related
Open Layer + GeoJson: place label in polygon
I try for a while to put Labels in my Open Layers map. <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.1.1/build/ol.js"> I managed to make a map with polygons filled in red. And when you hover over a polygon with your mouse; that polygon turns green. Now I want that it also displayes the name of the area as a Text label to feature. Just in the center of that polygon is fine. what I tried: I found this example (https://openlayers.org/en/latest/examples/vector-labels.html) but it is too complicated for me. I don't understand where in this example they make the connection to the file with the names related to the polygon. And I believe that this solution is outdated: open layer: display a label from properties in geojson file Below is the hoverStyle which makes the area turn green when you hover over it: in index.html under <script> var hoverStyle = new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(0, 255, 0, 0.6)' // green }), stroke: new ol.style.Stroke({ width: 3, color: 'rgba(0, 0, 0, 1)' // black }), //Something with the Labels here? : text: new ol.style.Text({ text: feature.get('Area_Name'), *//I believe I have to make the connection to the Feature Area_Name here* align: 'center', weight: 'normal', placement: 'line', overflow: 'false', color: 'rgba(0, 0, 0, 1)' // black }) Below are the first lines of my json file with the Features and Geometry: in the file: PS2019.json { "type": "FeatureCollection", "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::28992" } }, "features": [ { "type": "Feature", "properties": { "Area_Name": "Amsterdam", /* more attributes of the Polygon and the polygon geometry */ }, I have no clue anymore. I hope one of you can give me a step in the right direction.
If your hoverstyle is shared by all the polygons you will need a style function to set the text value In this example https://openlayers.org/en/latest/examples/vector-layer.html where you see style: function(feature) { style.getText().setText(feature.get('name')); return style; } and style: function(feature) { highlightStyle.getText().setText(feature.get('name')); return highlightStyle; } you would need style: function(feature) { hoverStyle.getText().setText(feature.get('Area_Name')); return hoverStyle; }
An image into three.js scene is blurred on some screen resolutions
I try to create some object that a user could able by mouse rotate use Three.js and webgl. It's displaying fine when a screen has a full HD resolution (1960x1080) but when a user screen had resolution roughly 1366x768 object is ugly (blurred). Most notably text on the image. Originally image has the resolution 1024x748 and the scene has a size roughly 530x270. Clear - https://ibb.co/0s7W2hk Blurred - https://ibb.co/tzCkq6W (in some cases blur corruption have more influence) I connect the model to the scene by next code // ... scene.add({ genotype: VOLUMETRIC_OBJECT, phenotype: MODELLED_MESH, data: { model: 'assets/FBX 2013/model.FBX', position: { x: 0, y: isMobile ? 0.05 : 0.375, z: 0, }, scale: isMobile ? { x: 70e-3, y: 70e-3, z: 70e-3, } : { x: 75e-3, y: 75e-3, z: 75e-3, }, name: 'model', material: { hb_03_label1Model: { map: 'assets/mm1.jpg', alphaMap: 'assets/mam1.jpg', color: 0xffffff, specular: new Color(0xffffff), shininess: 5, transparent: true, opacity: 1, needsUpdate: true, }, body_hb_03Model: { normalMap: 'assets/mnm2.jpg', color: 0xaaaaaa, specular: new Color(0xFFFFFF), opacity: 0.35, shininess: 100, transparent: true, needsUpdate: true, normalScale: { x: 1, y: 1, }, }, hb_03_leqidoModel: { type: MATERIAL__SHADER, map: 'assets/mm3.jpg', thicknessMap: 'assets/mtm3.jpg', specularMap: 'assets/msm3.jpg', normalMap: 'assets/mnm3.jpg', repeat: [10, 10], color: 0xffffff, refractionRatio: 0.985, reflectivity: 0.15, diffuse: new Vector3(1, 0.3, 0.3), thicknessColor: new Vector3(0.11, 0.11, 0.11), needsUpdate: true, uniformsNeedUpdate: true, }, hb_03_cappaModel: { color: 0x00AD16, needsUpdate: true, }, }, }, }, (model) => { // ... }, ) Update 1: In my case when I change mag and min filters to Linear, I have strong sharpness and text not readable, again. I think, for the best result, I need to use mag filter as Linear and min filter as LinearMipMapLinearFilter with the generated by myself mipmap. But, currently, generate custom mipmap so strong for me. I did increase anisotropy for texture, and text is displayed acceptable
AmCharts Adding Background Color to valueAxes guides label
How can I add background color to valueAxes guides label? Seems like there is no options that we can set or I just really dont know what it is. This is current setup that I have in amcharts $chart = AmCharts.makeChart( "chartdiv", { "type": "serial", "theme": "light", "dataProvider": $data_trade, "valueAxes": [ { "position": "right", "guides": [ { "value": $tickValue, "label": $tickValue, "position": "right", "dashLength": 0, "axisThickness": 1, "fillColor": "#000", "axisAlpha": 1, "fillAlpha": 1, "color": "#000", "fontSize": 16, "backgroundColor": "#008D00", "labelColorField": "red", }, ], } ], ../ } ); please see image for reference image-screenshot Im new here, I hope I can get help Thanks
There isn't a built-in way to do this currently but you can use the same technique in this demo to create a colored box around your label in the drawn event by changing the selector to .amcharts-axis-label.amcharts-guide to target the guide label and apply your color there. Note that the demo doesn't set individual colors, but the drawn event gives you access to the chart object if you want to pull the color from your custom backgroundColor properties: AmCharts.makeChart("...", { // ... "valueAxes": [{ // ... "guides": [{ "value": 4.5, "label": "4.5", "backgroundColor": "#22ff11" //custom property for drawn event }, { "value": 7.5, "label": "7.5", "backgroundColor": "#11ddff" }] }], // ... "listeners": [{ "event": "drawn", "method": addLabelBoxes }] }); function addLabelBoxes(event) { var labels = document.querySelectorAll(".amcharts-axis-label.amcharts-guide"); Array.prototype.forEach.call(labels, function(label, i) { var parent = label.parentNode; var labelText = label.childNodes[0].textContent; //get guide label from SVG var svgRect = label.getBBox(); var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); // find the matching guide label in the chart object var guide = event.chart.valueAxes[0].guides.filter(function(guide) { return guide.label == labelText; }); rect.setAttribute("x", svgRect.x); rect.setAttribute("y", svgRect.y); rect.setAttribute("transform", label.getAttribute("transform")) rect.setAttribute("width", svgRect.width); rect.setAttribute("height", svgRect.height); rect.setAttribute("fill", (guide && guide.length && guide[0].backgroundColor ? guide[0].backgroundColor : "#FFD32F")); //apply background from guide if it exists rect.setAttribute("stroke", (guide && guide.length && guide[0].backgroundColor ? guide[0].backgroundColor : "#4857FF")); //same for the border rect.setAttribute("opacity", 1); parent.insertBefore(rect, label); }); } Demo
Amcharts- Stacked column not stacked
I'm trying to plot a stacked column graph. Instead of the various components being one on top of the other, they are appearing one next to the other. Here's the property I'm using var stackedProps= { type: "serial", titles: [{ text: "STACKED CHART", size: 24, alpha: 5 }], valueAxis: [{ stackType: "regular", axisAlpha: 0.3, gridAlpha: 0 }], graphs: [{ balloonText: "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>", fillAlphas: 0.8, lineAlpha: 0.3, title: "AAAA", type: "column", color: "#000000", valueField: "AAAA" }, { balloonText: "<b>[[title]]</b><br><span style='font-size:5px'>[[category]]: <b>[[value]]</b></span>", fillAlphas: 0.8, lineAlpha: 0.3, title: "BBBB", type: "column", color: "#000000", valueField: "BBBB" } }; My understanding is that the property stackType: "regular" is responsible for stacking the items one on top of the other. Could I please request help to identify the mistake?
The serial charts support multiple value axes. Therefore the property is valueAxes (plural form). If you have it as "valueAxis" (as it seems the case in your code), it is ignored by the chart like any other unknown property, hence columns not being stacked. So bottom line, if you want to stack your columns, you define valueAxes. If you don't want to stack them, you can completely leave out that part. (unless you want to set some other value axis settings)
Why colours on an amcharts Candlestick Chart Incorrect and don't Change?
stockGraphs: [{ closeField: "close", highField: "high", lowField: "low", openField: "open", fillColors: "#009900", lineColor: "#009900", fillColorsField: "#009900", lineAlpha: 1, fillAlphas: 0.9, negativeFillColors: "#000000", negativeLineColor: "#000000", title: "Price:", type: "candlestick", valueField: "close"' }, The negative bars are coloured black. However the positive bars are: #ff6600. Here is the Fiddle: http://jsfiddle.net/s8s8bbfd/
Add useDataSetColors: false to stockGraphs[0]. But the negative color doesn't apply on balloon. I don't understand why, with ohlc chart, it works...