Related
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();
}
});
I'm using Jugal's workspace editor,
http://jsfiddle.net/jugal/bgNBG/
In JS section I applied my own JS and facing one issue.
Large amount of data will overlapped whole data points. Can anyone help in that ?
var chartingOptions = {
chart : {
type : "bar",
renderTo : 'container',
inverted : true
},
title : {
text : "Bunny Chart"
},
xAxis : {
title : {
text : ""
},
type : "category",
categories : ["DIP", "C", "Can", "Sch", "DC"]
},
yAxis : {
title : {
text : ""
},
min : 0.0,
max : 503.0
},
column : {
stacking : "normal"
},
legend : {
enabled : true,
align : "center",
floating : false,
itemMarginBottom : 0,
itemMarginTop : 0,
layout : "horizontal",
lineHeight : 0,
verticalAlign : "bottom",
x : 0,
y : 0
},
credits : {
enabled : false
},
plotOptions : {
area : {},
bar : {},
pie : {
dataLabels : {}
},
series : {
cursor : 'pointer',
// stacking : 'normal',
point : {
events : {
click : {}
}
}
},
column: {
grouping: false,
shadow: false
}
},
series : [{
data : [{
y : 74.0,
name : "A",
color : "#CCFF90",
ddlRecordIds : [243496, 243496, 243501, 243501, 243506, 243506],
}, {
y : 2.0,
name : "A",
color : "#CCFF90",
ddlRecordIds : [243641, 243641, 243676, 243676]
}
],
name : "A",
grouping : false,
pointPadding: 0.1,
dataLabels : {
enabled : true
},
color : "#CCFF90"
}, {
data : [{
y : 28.0,
name : "B",
color : "#FFFF90",
ddlRecordIds : [243881, 243881, 243886, 243886]
}, {
y : 3.0,
name : "B",
color : "#FFFF90",
ddlRecordIds : [243926, 243926, 243961, 243961, 243981, 243981]
}
],
name : "B",
grouping : false,
pointPadding: 0.1,
dataLabels : {
enabled : true
},
color : "#FFFF90"
}, {
data : [{
y : 25.0,
name : "C",
color : "#FFCCFF",
ddlRecordIds : [244726, 244726, 244731, 244731]
}
],
name : "C",
grouping : false,
pointPadding: 0.1,
dataLabels : {
enabled : true
},
color : "#FFCCFF"
}, {
data : [{
y : 62.0,
name : "E",
color : "#CC6699",
ddlRecordIds : [244036, 244036, 244041, 244041]
}, {
y : 2.0,
name : "E",
color : "#CC6699",
ddlRecordIds : [244211, 244211, 244296, 244296]
}
],
name : "E",
grouping : false,
pointPadding: 0.1,
dataLabels : {
enabled : true
},
color : "#CC6699"
}, {
data : [{
y : 8.0,
name : "F",
color : "#FF3300",
ddlRecordIds : [244851, 244851, 244856, 244856]
}
],
name : "F",
grouping : false,
pointPadding: 0.1,
dataLabels : {
enabled : true
},
color : "#FF3300"
}, {
data : [{
y : 174.0,
name : "G",
color : "#6666CC",
ddlRecordIds : [244891, 244891, 244896, 244896]
}
],
name : "G",
grouping : false,
pointPadding: 0.1,
dataLabels : {
enabled : true
},
color : "#6666CC"
}, {
data : [{
y : 85.0,
name : "H",
color : "#666666",
ddlRecordIds : [245761, 245761, 245766, 245766]
}
],
name : "H",
grouping : false,
pointPadding: 0.1,
dataLabels : {
enabled : true
},
color : "#666666"
}, {
data : [{
y : 161.0,
name : "I",
color : "#669999",
ddlRecordIds : [234731, 234731, 234751, 234751]
}, {
y : 503.0,
name : "I",
color : "#669999",
ddlRecordIds : [234736, 234736, 234741, 234741]
}, {
y : 355.0,
name : "I",
color : "#669999",
ddlRecordIds : [234771, 234771, 234776, 234776]
}, {
y : 35.0,
name : "I",
color : "#669999",
ddlRecordIds : [234936, 234936, 235186, 235186]
}
],
name : "I",
grouping : false,
pointPadding: 0.1,
dataLabels : {
enabled : true
},
color : "#669999"
}, {
data : [{
y : 232.0,
name : "J",
color : "#009999",
ddlRecordIds : [237406, 237406, 237411, 237411]
}, {
y : 20.0,
name : "J",
color : "#009999",
ddlRecordIds : [237466, 237466, 237471, 237471]
}
],
name : "J",
grouping : false,
pointPadding: 0.1,
dataLabels : {
enabled : true
},
color : "#009999"
}, {
data : [{
y : 61.0,
name : "K",
color : "#CCFF99",
ddlRecordIds : [244416, 244416, 244421, 244421]
}, {
y : 1.0,
name : "K",
color : "#CCFF99",
ddlRecordIds : [244441, 244441]
}
],
name : "K",
grouping : false,
pointPadding: 0.1,
dataLabels : {
enabled : true
},
color : "#CCFF99"
}, {
data : [{
y : 460.0,
name : "L",
color : "#FFFF99",
ddlRecordIds : [241196, 241196, 241201, 241201]
}
],
name : "L",
grouping : false,
pointPadding: 0.1,
dataLabels : {
enabled : true
},
color : "#FFFF99"
}
],
dataGrouping : {
groupPixelWidth : 40
}
};
chartingOptions = $.extend({}, jugalsLib.getBasicChartOptions(), chartingOptions);
var chart = new Highcharts.Chart(chartingOptions);
I have this Three.js code with JSON loader loading mesh from file /models/mountain.json:
var Three = new function () {
this.scene = new THREE.Scene()
this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000)
this.camera.position.set(20, 52, 20);
this.camera.rotation.order = 'YXZ';
this.camera.rotation.y = -Math.PI / 4;
this.camera.rotation.x = Math.atan(-1 / Math.sqrt(2));
this.camera.scale.addScalar(1);
this.renderer = new THREE.WebGLRenderer()
this.renderer.setSize(window.innerWidth, window.innerHeight);
var ground = new THREE.Mesh(
new THREE.PlaneBufferGeometry(436, 624),
new THREE.MeshLambertMaterial({color: '#808080'}));
ground.rotation.x = -Math.PI / 2; //-90 degrees around the x axis
this.scene.add(ground);
var light = new THREE.PointLight(0xFFFFDD);
light.position.set(-1000, 1000, 1000);
this.scene.add(light);
var loader = new THREE.JSONLoader();
this.loadMountain = function (x, y) {
loader.load('/models/mountain.json', Three.getGeomHandler('#808080', x, y, 1))
}
this.loadFields = function () {
for (var i=0;i<4000;i++) {
Three.loadMountain(x, y)
}
}
this.getGeomHandler = function (color, x, y, scale) {
return function (geometry) {
var mesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({color: color}));
mesh.scale.set(scale, scale, scale);
mesh.position.set(x, 0, y);
Three.scene.add(mesh);
};
}
this.init = function () {
$('body').append(Three.renderer.domElement);
Three.loadFields()
Three.render();
}
this.render = function () {
requestAnimationFrame(Three.render);
Three.renderer.render(Three.scene, Three.camera);
};
}
$(document).ready(function () {
Three.init();
});
and this is /models/mountain.json content:
{
"metadata": {
"formatVersion" : 3.1,
"generatedBy" : "Blender 2.7 Exporter",
"vertices" : 39,
"faces" : 62,
"normals" : 36,
"colors" : 0,
"uvs" : [],
"materials" : 1,
"morphTargets" : 0,
"bones" : 0
},
"scale" : 1.000000,
"vertices" : [2.47941e-07,-1.13504e-07,-2.59668,-2.41031,-6.2081e-08,-1.42025,-2.2107,4.55942e-08,1.04307,2.16045,1.84802,0.183901,-0.427399,1.11956e-07,2.56126,1.23588,9.98242e-08,2.28371,2.50387,4.55942e-08,1.04307,2.58781,9.37308e-09,0.214431,2.17385,-0.0483214,-1.42025,1.40026,-0.0483214,-1.74566,1.50645e-07,2.13114,-1.9421,-0.6306,2.13114,-1.52968,-1.04238,2.48498,-1.06715,-1.23632,3,-0.856474,-1.5574,2.62306,-0.476759,-1.68478,2.74775,0.160378,-1.20001,3,0.780135,-1.14654,3,1.41015,-0.31966,3,1.91562,0.31966,2.48498,1.46763,0.92434,3,1.70803,0.754272,2.73835,0.751422,1.90443,2.61032,0.780134,1.52632,2.76301,0.160377,1.78144,2.69402,-0.47676,1.9564,3,-1.06223,0.807846,2.13114,-1.68984,1.32727,3.09213,-1.10549,1.13568,1.38919,-1.21096,1.98255,0.969716,-1.07503,0.529022,2.81989,0.43993,0.969891,3.32801,-1.43745,-0.39848,2.2361,-1.12285,-1.00579,1.31316,2.27174,-0.789081,1.31316,2.34614,0.888122,0.684588,2.17543,0.568656,2.07869,1.615,2.13863,1.49103,1.32889,2.52981,0.924307,0.978923],
"faces" : [34,0,11,10,0,0,1,2,34,1,13,12,0,3,4,5,34,0,12,11,0,0,5,1,34,0,1,12,0,0,3,5,34,38,3,37,0,6,7,8,34,9,31,28,0,9,10,11,34,0,10,26,0,0,2,12,34,9,26,31,0,9,12,10,34,9,0,26,0,9,0,12,35,18,17,33,34,0,13,14,15,16,35,37,3,23,22,0,8,7,17,18,34,29,27,25,0,19,20,21,34,28,31,27,0,11,10,20,34,29,28,27,0,19,11,20,34,12,19,20,0,5,22,23,34,5,6,20,0,24,25,23,34,6,38,37,0,25,6,8,34,37,22,21,0,8,18,26,34,30,27,31,0,26,20,10,34,6,37,20,0,25,8,23,34,30,31,32,0,26,10,27,34,37,21,20,0,8,26,23,34,30,32,26,0,26,27,12,34,21,30,20,0,26,26,23,34,11,12,20,0,1,5,23,34,26,10,11,0,12,2,1,34,30,11,20,0,26,1,23,34,30,26,11,0,26,12,1,34,20,35,5,0,23,28,24,34,20,19,36,0,23,22,28,34,20,36,35,0,23,28,28,35,6,7,3,38,0,25,29,7,6,34,7,23,3,0,29,17,7,34,29,25,24,0,19,21,30,34,7,24,23,0,29,30,17,34,7,8,29,0,29,31,19,34,7,29,24,0,29,19,30,34,18,36,19,0,13,28,22,34,4,5,35,0,32,24,28,34,18,35,36,0,13,28,28,34,18,34,4,0,13,16,32,34,18,4,35,0,13,32,28,35,13,14,15,16,0,4,33,33,34,34,30,25,27,0,26,21,20,34,23,24,25,0,17,30,21,34,21,22,23,0,26,18,17,34,30,21,25,0,26,26,21,34,21,23,25,0,26,17,21,35,8,9,28,29,0,31,9,11,19,34,26,32,31,0,12,27,10,34,2,16,15,0,35,34,33,34,14,13,1,0,33,4,3,34,14,2,15,0,33,35,33,34,14,1,2,0,33,3,35,34,2,17,16,0,35,14,34,34,4,34,33,0,32,16,15,34,2,33,17,0,35,15,14,34,2,4,33,0,35,32,15,34,16,12,13,0,34,5,4,34,18,19,12,0,13,22,5,34,16,17,18,0,34,14,13,34,16,18,12,0,34,13,5],
"uvs" : [],
"normals" : [0.094028,0.298624,-0.949705,-0.162755,0.939238,-0.302133,0.228248,0.832942,-0.504044,-0.822016,0.351848,-0.447707,-0.253456,0.911466,-0.323923,-0.004059,0.913785,-0.40614,0.788598,0.576983,0.21247,0.952086,0.29432,-0.082797,0.625996,0.719138,0.301553,0.474441,0.29017,-0.83105,0.255501,0.796655,-0.547746,0.441328,0.166265,-0.881802,0.221656,0.483047,-0.847041,0.192999,0.761406,0.618824,-0.352977,0.778008,0.5197,-0.653584,0.252663,0.713401,-0.29136,0.293313,0.91052,0.688314,0.722556,0.063967,0.612629,0.761834,0.210364,0.718711,0.280313,-0.63625,0.370495,0.893033,-0.255287,0.629627,0.578692,-0.518326,0.229896,0.680258,0.695944,-0.064241,0.589251,0.805353,0.205145,0.606586,0.768059,0.734519,0.631458,0.24839,0.211341,0.910367,0.355693,-0.135533,0.925748,-0.352916,-0.03061,0.231269,0.972381,0.975982,0.184362,-0.11594,0.694266,0.717338,0.058412,0.712027,0.350871,-0.608173,-0.201483,0.259865,0.944365,-0.820185,0.572069,-0.001556,-0.322733,0.944334,0.063509,-0.922117,0.223151,0.315958],
"skinIndices" : [],
"skinWeights" : [],
"morphTargets" : [],
"bones" : [],
"animations" : [],
"colors" : [],
"materials" : [
{
"DbgColor": 15658734,
"DbgIndex": 0,
"DbgName": "default",
"vertexColors": false
}
]
}
Is it possible to use this content in code as a variable and add it to scane?
Here is the pattern to follow if you want to load a model by parsing a JSON data structure.
Modify your mountain.json file and give your data structure a name.
var mountain = {
"metadata": {
"formatVersion" : 3.1,
"generatedBy" : "Blender 2.7 Exporter",
... etc ...
}
Include the following code in your source:
<script src="mountain.js"></script>
Now you can load your model like so:
var loader = new THREE.JSONLoader();
var model = loader.parse( mountain );
mesh = new THREE.Mesh( model.geometry, model.materials[ 0 ] );
scene.add( mesh );
three.js r.70
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;
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();
}
});
});