Develop Reference

THREE.js, I don't know why not rendering obj files

I'm making obj loader in react view button clicked, I want to see obj file in modal component.This object loader component get url to modal component.
console.log is correct.This loader is get url other component.
Group {uuid: "0C86CC1D-E795-4191-A62A-72DF4A433CEB", name: "", type:
"Group", parent: null, children: Array(8), …} castShadow:
falsechildren: (8) [Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh,
Mesh]frustumCulled: truelayers: Layers {mask: 1}materialLibraries:
["patient.mtl"]matrix: Matrix4 {elements: Array(16)}matrixAutoUpdate:
truematrixWorld: Matrix4 {elements: Array(16)}matrixWorldNeedsUpdate:
falsename: ""parent: Scene {uuid:
"873E8718-F1B0-47B5-AC77-DC1B334B3637", name: "", type: "Scene",
parent: null, children: Array(5), …}position: Vector3 {x: 0, y: 0, z:
0}quaternion: Quaternion {_x: 0, _y: 0, _z: 0, _w: 1,
_onChangeCallback: ƒ}receiveShadow: falserenderOrder: 0rotation: Euler {_x: 0, _y: 0, _z: 0, _order: "XYZ", _onChangeCallback: ƒ}scale:
Vector3 {x: 0.07, y: 0.07, z: 0.07}type: "Group"up: Vector3 {x: 0, y:
1, z: 0}userData: {}uuid:
"0C86CC1D-E795-4191-A62A-72DF4A433CEB"visible: trueeulerOrder:
(...)id: 18modelViewMatrix: Matrix4 {elements: Array(16)}normalMatrix:
Matrix3 {elements: Array(9)} useQuaternion: (...)proto: Object3D
(8) [Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh, Mesh]
Scene {uuid: "873E8718-F1B0-47B5-AC77-DC1B334B3637", name: "", type:
"Scene", parent: null, children: Array(5), …}
CODE
import React, { Component } from "react";
import * as THREE from "three";
import OBJLoader from "three-obj-loader";
import OrbitControls from "three-orbitcontrols";
OBJLoader(THREE);
let scene;
class ObjectLoader extends Component {
componentDidMount() {
const width = this.mount.clientWidth;
const height = this.mount.clientHeight;
scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(75, width / height, 1, 2000);
this.camera.position.z = 250;
this.renderer = new THREE.WebGLRenderer({ antialias: true });
this.renderer.setClearColor("#263238");
this.renderer.setSize(width, height);
this.mount.appendChild(this.renderer.domElement);
const geometry = new THREE.BoxGeometry(5, 5, 5);
const material = new THREE.MeshBasicMaterial({
color: "#0F0",
wireframe: true
});
this.cube = new THREE.Mesh(geometry, material);
scene.add(this.cube);
const controls = new OrbitControls(this.camera, this.renderer.domElement);
//LIGHTS
var lights = [];
lights[0] = new THREE.PointLight(0x304ffe, 1, 0);
lights[1] = new THREE.PointLight(0xffffff, 1, 0);
lights[2] = new THREE.PointLight(0xffffff, 1, 0);
lights[0].position.set(0, 200, 0);
lights[1].position.set(100, 200, 100);
lights[2].position.set(-100, -200, -100);
scene.add(lights[0]);
scene.add(lights[1]);
scene.add(lights[2]);
// load Object
loadObj(this.props.url);
}
componentWillUnmount() {
this.stop();
this.mount.removeChild(this.renderer.domElement);
}
start = () => {
if (!this.frameId) {
this.frameId = requestAnimationFrame(this.animate);
}
};
stop = () => {
cancelAnimationFrame(this.frameId);
};
animate = () => {
this.renderScene();
this.frameId = window.requestAnimationFrame(this.animate);
};
renderScene = () => {
if (this.renderer) this.renderer.render(scene, this.camera);
};
onLoad = () => {
this.renderScene();
//start animation
this.start();
};
onProgress = xhr => {
console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
};
// Function called when download errors
onError = error => {
console.log("An error happened" + error);
};
render() {
return (
<div
style={{ width: "500px", height: "500px" }}
ref={mount => {
this.mount = mount;
}}
/>
);
}
}
function loadObj(url) {
const objLoader = new THREE.OBJLoader();
objLoader.load(
url,
function(object) {
console.log(object, object.children);
let mesh = object;
scene.add(object);
console.log(scene);
mesh.position.set(0, 0, 0);
mesh.scale.set(0.07, 0.07, 0.07);
},
function(xhr) {
console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
},
// called when loading has errors
function(error) {
console.log("An error happened" + error);
});
}
export default ObjectLoader;

three.js Cannot read property 'center' of undefined

I'm trying to load a 3D model of a cube onto a 3D Force Directed Graph using GLTFLoader in three.js. The project is built using Angular.
The model is loaded, showing GLTFLoader: 23.507080078125ms but the object is not displayed. It further gives an error showing,
ERROR TypeError: Cannot read property 'center' of undefined
at Sphere.copy (three.module.js:5347)
at Mesh.raycast (three.module.js:14240)
at intersectObject (three.js:42091)
at Raycaster.intersectObjects (three.js:42164)
at animate (3d-force-graph.module.js:386)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:398)
at Object.onInvokeTask (core.es5.js:4136)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:397)
at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:165)
at ZoneTask.invoke (zone.js:460)
at timer (zone.js:1732)
The code to load the model is as below:
var manager = new THREE.LoadingManager();
var loader = new GLTFLoader(manager);
loader.load(
// resource URL
'assets/model/cube.gltf',
// called when the resource is loaded
function ( gltf ) {
gltf.scene.traverse( function ( child ) {
if ( child.isMesh ) {
child.material = gltf.materials;
}
} );
var cube = gltf.scene; // Object
self.showGraph(gData,cube,themeNum);
console.log("graph drawn");
},
// called when loading is in progresses
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
// called when loading has errors
function ( error ) {
console.log( 'An error happened -- ' + error );
}
);
// function to draw the graph -- to be executed on 3D model load
showGraph(gData:any, cube:any, themeNum: any){
const Graph = ForceGraph3D()
(document.getElementById('3d-graph'))
.nodeThreeObject(({ group }) => new THREE.Mesh(
[
new THREE.BoxGeometry(Math.random() * 20, Math.random() * 20, Math.random() * 20),
cube,
new THREE.CylinderGeometry(Math.random() * 10, Math.random() * 10, Math.random() * 20),
new THREE.DodecahedronGeometry(Math.random() * 10),
new THREE.SphereGeometry(Math.random() * 10),
new THREE.TorusGeometry(Math.random() * 10, Math.random() * 2),
new THREE.TorusKnotGeometry(Math.random() * 10, Math.random() * 2)
][group],
new THREE.MeshLambertMaterial({
color: this.themes[themeNum][group],
transparent: true,
opacity: 0.75
})
))
.nodeAutoColorBy('group')
.onNodeClick(node => {
this.attach3DNodeClickEvent(node);
})
.graphData(gData);
}
The cube.gltf file exported from Blender is as below:
{
"accessors" : [{
"bufferView" : 0,
"componentType" : 5121,
"count" : 36,
"max" : [23],
"min" : [0],
"type" : "SCALAR"
}, {
"bufferView" : 1,
"componentType" : 5126,
"count" : 24,
"max" : [1, 1, 1],
"min" : [-1, -1, -1],
"type" : "VEC3"
}, {
"bufferView" : 2,
"componentType" : 5126,
"count" : 24,
"max" : [1, 1, 1],
"min" : [-1, -1, -1],
"type" : "VEC3"
}],
"asset" : {
"generator" : "Khronos Blender glTF 2.0 exporter",
"version" : "2.0"
},
"bufferViews" : [{
"buffer" : 0,
"byteLength" : 36,
"byteOffset" : 0,
"target" : 34963
}, {
"buffer" : 0,
"byteLength" : 288,
"byteOffset" : 36,
"target" : 34962
}, {
"buffer" : 0,
"byteLength" : 288,
"byteOffset" : 324,
"target" : 34962
}],
"buffers" : [{
"byteLength" : 612,
"uri" : "cube.bin"
}],
"materials" : [{
"name" : "Material",
"pbrMetallicRoughness" : {
"baseColorFactor" : [0.114473, 0.362915, 0.64, 1],
"metallicFactor" : 0
}
}],
"meshes" : [{
"name" : "Cube",
"primitives" : [{
"attributes" : {
"NORMAL" : 2,
"POSITION" : 1
},
"indices" : 0,
"material" : 0
}]
}],
"nodes" : [{
"name" : "Camera",
"rotation" : [0.483536, 0.336872, -0.208704, 0.780483],
"translation" : [7.48113, 5.34367, 6.50764]
}, {
"mesh" : 0,
"name" : "Cube"
}, {
"name" : "Lamp",
"rotation" : [0.169076, 0.75588, -0.272171, 0.570948],
"scale" : [1, 1, 1],
"translation" : [4.07625, 5.90386, -1.00545]
}],
"scene" : 0,
"scenes" : [{
"name" : "Scene",
"nodes" : [1, 2, 0]
}]
}
What am I doing wrong here? The examples on three.js docs seem to be the same.
Any help is much appreciated.

According to the error, you're performing a raycast in your animate function, which is where the error is occurring. Specifically, the error is happening when the raycast process is trying to copy an object's bounding sphere.
// three.js r91, Mesh.js, line 237
sphere.copy( geometry.boundingSphere );
It's saying it can't find property center on geometry.boundingSphere, because geometry.boundingSphere is undefined.
Unless GLTFLoader automatically computes bounding spheres, this information isn't automatically populated. You'll need to call geometry.computeBoundingSphere() before calling raycast on an object. If GLTFLoader isn't doing this job, then you'll likely need to do it for the whole scene.
Running this code after the data is loaded (and before starting animate) will populate all of the objects' bounding spheres:
scene.traverse(function(node){
if(node.geometry){
node.geometry.computeBoundingSphere();
}
});

Make a Global Scope of a mesh using Three.js

I am making my first steps coding with JavaScript and playing with Three.js too.
In my code I made this function:
var loader = new THREE.BinaryLoader();
loader.load( "sources/obj/mmlogo/mm_logo.js", function ( geometry ) {
uniforms = {
color: {
type: "c",
value: new THREE.Color(0x000000),
},
envMap: {
type: "t",
value: reflectionCube
},
fresnelBias: {
type: "f",
value: 0.1
},
fresnelScale: {
type: "f",
value: 1.0
},
fresnelPower: {
type: 'f',
value: 2.0
}
};
material = new THREE.ShaderMaterial( {
uniforms : uniforms,
vertexShader : vertexShader,
fragmentShader : fragmentShader,
wireframe: false,
side: THREE.DoubleSide,
});
monogram = new THREE.Mesh( geometry, material );
monogram.scale.set( 1, 1, 1 );
monogram.position.z = -9;
scene.add( monogram );
});
and then I made this render function:
function render() {
frame += 0.1/3;
monogram.scale.z += Math.sin(frame)/600;
TWEEN.update();
targetX = mouseX * .0005;
targetY = mouseY * .0005;
if ( monogram ) {
monogram.rotation.y += 0.05 * ( targetX - monogram.rotation.y );
monogram.rotation.x += 0.05 * ( targetY - monogram.rotation.x );
}
renderer.render( scene, camera );
}
I can see everything and everything works ok. But my console says that there is an error: Uncaught ReferenceError: monogram is not defined.
I think that I have to make a Global Scope of monogram. So I wrote var before monogram and it doesnt work, then I wrote
monogram = new THREE.Mesh( geometry, material );
monogram.scale.set( 1, 1, 1 );
monogram.position.z = -9;
scene.add( monogram );
outside my function and it doesnt work.
Do you have some suggestion? My app works, even if the console says that there is n error, I think that is better if my console says that everything is ok.

Can't understand why my THREE.js object is partly transparent

I've created a solid (not transparent) object in blender and exported it with three.js blender plugin to get json data.
And now when I'm adding it to three.js there are transparent areas of the object and I can't understand why cause I need it fully solid.
Will appreciate any help with this.
Here is javascript code:
window.kristal_json =
"metadata" :
"formatVersion" : 3.1
"generatedBy" : "Blender 2.7 Exporter"
"vertices" : 12
"faces" : 30
"normals" : 12
"colors" : 0
"uvs" : [10]
"materials" : 1
"morphTargets" : 0
"bones" : 0
"scale" : 1.000000
"materials" : [
"DbgColor" : 15658734
"DbgIndex" : 0
"DbgName" : "Mat"
"blending" : "NormalBlending"
"colorAmbient" : [0.1694117690535153, 0.3545098119156034, 0.6400000190734865]
"colorDiffuse" : [0.1694117690535153, 0.3545098119156034, 0.6400000190734865]
"colorEmissive" : [0.0, 0.0, 0.0]
"colorSpecular" : [0.5, 0.5, 0.5]
"depthTest" : true
"depthWrite" : true
"shading" : "Lambert"
"specularCoef" : 255
"transparency" : 1.0
"transparent" : false
"vertexColors" : false
]
"vertices" : [-1.0049,-0.55688,0.0199999,-0.904313,0.307844,0.02,-0.147116,-0.146545,0.952514,0.371123,0.528552,0.745001,0.364565,1.01051,0.0200001,0.957999,0.476094,0.0200001,0.78775,-0.343567,0.4682,-0.209197,-1.09765,0.0199999,0.882591,-0.615694,0.0199999,-0.147116,-0.146545,-0.912514,0.371123,0.528552,-0.705001,0.78775,-0.343567,-0.4282]
"morphTargets" : []
"normals" : [-0.880306,-0.47438,0,0.462844,0.88641,0,-0.271249,-0.962493,0,-0.965972,0.258553,0,0.184973,0.982727,0,0.685232,0.728294,0,0.798334,-0.202094,-0.567248,0.798334,-0.202094,0.567248,0.218329,-0.76101,0.610859,0.261696,0.636799,0.725242,0.218329,-0.76101,-0.610859,0.261696,0.636799,-0.725242]
"colors" : []
"uvs" : [[0.256514,1,0.228616,0.038417,0,0.594628,0.666692,0.948754,1,0.302325,0.746501,0,0.357698,0.026725,1,0,1,1,0,1]]
"faces" : [42,0,8,7,0,0,1,2,0,1,2,42,0,1,4,0,0,3,4,0,3,4,42,4,5,6,0,4,5,6,4,5,6,42,0,6,8,0,0,6,1,0,6,1,42,0,4,6,0,0,4,6,0,4,6,42,8,0,7,0,1,0,2,1,0,2,42,8,11,0,0,1,6,0,1,7,0,42,4,1,0,0,4,3,0,4,3,0,42,11,5,4,0,6,5,4,7,5,4,42,11,4,0,0,6,4,0,7,4,0,42,2,1,0,0,7,8,9,8,3,0,42,1,3,2,0,7,8,9,3,9,8,42,3,4,1,0,7,8,9,9,4,3,42,5,4,3,0,7,8,9,5,4,9,42,5,6,3,0,7,8,9,5,6,9,42,3,2,6,0,7,8,9,9,8,6,42,0,7,2,0,7,8,9,0,2,8,42,6,2,7,0,7,8,9,6,8,2,42,8,7,6,0,7,8,9,1,2,6,42,5,6,8,0,7,8,9,5,6,1,42,1,9,0,0,8,7,9,3,10,0,42,10,1,9,0,8,7,9,11,3,10,42,4,10,1,0,8,7,9,4,11,3,42,4,5,10,0,8,7,9,4,5,11,42,11,5,10,0,8,7,9,7,5,11,42,9,10,11,0,8,7,9,10,11,7,42,7,0,9,0,8,7,9,2,0,10,42,9,11,7,0,8,7,9,10,7,2,42,7,8,11,0,8,7,9,2,1,7,42,11,5,8,0,8,7,9,7,5,1]
"bones" : []
"skinIndices" : []
"skinWeights" : []
"animations" : []
initThreeJS = ->
div = $('#canvas-scene')
window.scene = new THREE.Scene()
window.camera = new THREE.PerspectiveCamera(75, div.width()/div.height(), 0.1, 1000)
camera.position.y = 2.5
camera.position.x = 1.5
window.renderer = new THREE.CanvasRenderer()
renderer.setClearColor( '#F6FAFC' );
renderer.setSize(div.width(), div.height())
div.append(renderer.domElement)
camera.position.z = 10
loader = new THREE.JSONLoader(true)
parsed = loader.parse(kristal_json)
kristal = new THREE.Mesh( parsed.geometry, new THREE.MeshLambertMaterial( { color: 0xF5FCFE, ambient: 0xF1F9FC, emissive: 0xDDEDF7} ) )
kristal.position.set(0,2,-1)
kristal.scale.set(4,4,4)
scene.add(kristal)
window.light1 = new THREE.PointLight(0xffffff, 0.1)
light1.position.set(-9.5, 7, 7)
scene.add light1
render = ->
requestAnimationFrame render
if kristal
kristal.rotation.y += 0.01
renderer.render scene, camera
render()
$ ->
initThreeJS()
P.S.
Here is jsbin code of this http://jsbin.com/koxicuqavejo/1/

You need to set your material to THREE.DoubleSide
krystal.material.side = THREE.DoubleSide;

display data from featureLayer in one displayLevel

i have a problem with displaying informations on an Basemap in two of tree displayLevels.
I Have a program that is inspired from this esri sample:https://developers.arcgis.com/javascript/jssamples/data_gas_prices.html
After this i have build my own zoomLevels or display Levels because i only need three.
My Problem is that i want to have only in two of three zoomLevels text in my featureLayer and i have no Idea how to do this. The only Example i found in the Internet was this Sample form Esri: https://developers.arcgis.com/javascript/jssamples/map_switch_layer_on_zoom.html
But they work with ArcGISTiledMapServiceLayer and i'm not.
So please can anybody tell me a solution for this Problem?
Here is the code:
define([
"dojo/_base/declare",
"dojo/_base/array",
"esri/map",
"esri/graphic",
"esri/lang",
"esri/geometry/Extent",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/renderers/SimpleRenderer",
"esri/renderers/ClassBreaksRenderer",
"esri/symbols/Font",
"esri/symbols/TextSymbol",
"esri/layers/FeatureLayer",
"esri/dijit/Legend",
"esri/dijit/OverviewMap",
"esri/InfoTemplate",
"esri/request",
"modules/mapTip",
"dijit/TooltipDialog",
"dijit/popup",
"dojo/json",
"dojo/store/JsonRest",
"dojo/_base/array",
"dojo/parser",
"dojo/_base/connect",
"dojo/_base/Color",
"dojo/number",
"dojo/dom",
"dojo/dom-construct",
"dojo/dom-style",
"dijit/form/Button",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/layout/AccordionContainer",
"dojo/domReady!"
], function(
declare,array, Map, Graphic, esriLang, Extent, SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer,
ClassBreaksRenderer, Font, TextSymbol,FeatureLayer, Legend, OverviewMap, InfoTemplate, esriRequest,Tip,
TooltipDialog, dijitPopup,JSON, JsonRest, arr, parser, conn, Color, number, dom, domConstruct, domStyle, Button) {
return declare (null, {
init: function (){
var lods = [
//{"level" : 1, "resolution" : 78271.5169639999, "scale" : 295828763.795777},
//{"level" : 2, "resolution" : 39135.7584820001, "scale" : 147914381.897889},
//{"level" : 3, "resolution" : 19567.8792409999, "scale" : 73957190.948944},
//{"level" : 4, "resolution" : 9783.93962049996, "scale" : 36978595.474472},
//{"level" : 5, "resolution" : 4891.96981024998, "scale" : 18489297.737236},
//{"level" : 6, "resolution" : 2445.98490512499, "scale" : 9244648.868618},
{"level" : 7, "resolution" : 1222.99245256249, "scale" : 4622324.434309},
//{"level" : 8, "resolution" : 611.49622628138, "scale" : 2311162.217155},
//{"level" : 9, "resolution" : 305.748113140558, "scale" : 1155581.108577},
{"level" : 10, "resolution" : 152.874056570411, "scale" : 577790.554289},
//{"level" : 11, "resolution" : 76.4370282850732, "scale" : 288895.277144},
{"level" : 12, "resolution" : 38.2185141425366, "scale" : 144447.638572},
//{"level" : 13, "resolution" : 19.1092570712683, "scale" : 72223.819286},
//{"level": 14, "resolution": 9.55462853563415, "scale": 36111.909643},
//{"level": 15, "resolution": 4.77731426794937, "scale": 18055.954822},
//{"level": 16, "resolution": 2.38865713397468, "scale": 9027.977411},
//{"level": 17, "resolution": 1.19432856685505, "scale": 4513.988705}
];
var fl = new FeatureLayer("someServer/arcgis/rest/services/someProject/FeatureServer/1", {
mode: FeatureLayer.MODE_SNAPSHOT,
displayLevels:[0,1],
outFields:["*"],
//infoTemplate: template,
visible: true,
value: "OBJECTID",
});
window.map = new Map("map", {
basemap:"topo",
center: [48.04, 28.50],
zoom: 0,
lods: lods,
});
var overviewMapDijit = new OverviewMap({
map: window.map,
visible: true
});
overviewMapDijit.startup();
var updateEnd = fl.on("update-end", function() {
updateEnd.remove();
updateRenderer();
updateLables();
});
window.map.addLayers([fl]);
function updateRenderer(){
fl.setRenderer(new SimpleRenderer(null));
var kachelnamen = new JsonRest({
target: "someTargetURL",
idAttribute: "WA",
headers: { "X-Requested-With": "" },
});
kachelnamen.query(null).then(drawFeatureLayer, kachelnamenError);
console.debug(kachelnamen);
console.info(kachelnamen);
}
////////////////////////////////////////////////
function updateLables(){
var font = new Font("11px", Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_BOLDER);
arr.forEach(fl.graphics, function(graphic){
var centerPoint;
switch (graphic.geometry.type) {
case "point":
centerPoint = graphic.geometry;
break;
case "extent":
centerPoint = graphic.getCenter();
default:
centerPoint = graphic._extent.getCenter();
}
var textSymbol = new TextSymbol(graphic.attributes.NAME,font, new Color([0, 0, 0]));
var labelPointGraphic = new Graphic(centerPoint, textSymbol);
window.map.graphics.add(labelPointGraphic);
});
}
///////////////////////////////////////////////////////////
function drawFeatureLayer(data) {
// data comes back as text from apify...parse it
// loop through gas price data, find min/max and populate an object
// to keep track of the price of regular in each state
window.statekachelnamen = {};
var gasMin = Infinity;
var gasMax = -Infinity;
arr.forEach(data, function(g) {
var price = parseFloat(g.STAT_CALC);
statekachelnamen[g.WA] = price;
if ( price < gasMin ) {
gasMin = price;
}
if ( price > gasMax ) {
gasMax = price;
}
});
// format max gas price with two decimal places
gasMax = formatDollars(gasMax);
// add an attribute to each attribute so gas price is displayed
// on mouse over below the legend
arr.forEach(fl.graphics, function(g) {
//var displayValue = statekachelnamen[g.attributes.WA_NAME].toFixed(2);
var displayValue;
if (g.attributes.WA_NAME in statekachelnamen){
displayValue = statekachelnamen[g.attributes.WA_NAME].toFixed(2);
}
else{
displayValue = 0;
}
g.attributes.STAT_CALC = displayValue;
});
// create a class breaks renderer
var breaks = calcBreaks(gasMin, gasMax, 4);
//gasMax = formatDollars(gasMax);
// console.log("gas price breaks: ", breaks);
var sfs = SimpleFillSymbol;
var sls = SimpleLineSymbol;
var outline = sls("solid", new Color("#444"), 1);
var br = new ClassBreaksRenderer(null, findGasPrice);
br.setMaxInclusive(true);
br.addBreak(breaks[0], breaks[1], new sfs("solid", outline, new Color([255, 255, 178, 0.75])));
br.addBreak(breaks[1], breaks[2], new sfs("solid", outline, new Color([254, 204, 92, 0.75])));
br.addBreak(breaks[2], breaks[3], new sfs("solid", outline, new Color([253, 141, 60, 0.75])));
br.addBreak(breaks[3], gasMax, new sfs("solid", outline, new Color([227, 26, 28, 0.75])));
fl.setRenderer(br);
fl.redraw();
var legend2 = new Legend({
map: window.map,
layerInfos: [{ "layer": fl, "title": "WA Statistic" }]
},"legendDiv2");
legend2.startup();
// remove the loading div
//domConstruct.destroy("loading");
}
// function used by the class breaks renderer to get the
// value used to symbolize each state
function findGasPrice(graphic) {
var state = graphic.attributes.WA_NAME;
return statekachelnamen[state];
console.info(state);
}
function calcBreaks(min, max, numberOfClasses) {
var range = (max - min) / numberOfClasses;
var breakValues = [];
for ( var i = 0; i < numberOfClasses; i++ ) {
breakValues[i] = formatDollars(min + ( range * i ));
}
// console.log("break values: ", breakValues)
return breakValues;
}
var myButton = new Button({
label: "Update Renderer!",
onClick: function(){
updateRenderer();
}
}, "progButtonNode");
function formatDollars(num) {
return num.toFixed(2);
//return number.format(num, { "places": 2 });
}
function kachelnamenError(e) {
console.log("error getting gas price data: ", e);
}
}
});
});
![here the text is correct][1]
![here the text is correct too ][2]
![I don't want to display text here][3]

OK I found a solution for my Problem.
Here is it
window.map.addLayers([fl]);
var updateEnd = fl.on("update-end", function() {
updateEnd.remove();
updateRenderer();
updateLables();
//show or hide the SWA text when the map's extent changes
window.map.on("extent-change", function(evt) {
var currentScale = map.getScale();
console.log('maponScale: ' + currentScale);
if (currentScale.toString() == "4622324.434309"){
window.map.graphics.hide();
}
else{
window.map.graphics.show();
}
});
});