Develop Reference

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();
}
});

Three.js - include mesh data in code

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

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();
}
});
});

jsonloader texture not loading

I'm not a blender expert (I got this model), and I exported it to JS, but the texture isn't showing. When I remove the texture file, the browser gives an error that the 'map.png' isn't found, so it loads, but it doesn't show it.
The code is online: http://bensjitestsite.site50.net
but to make it easy:
html:
<!doctype html>
<html lang="en">
<head>
<title>Map Prolab</title>
<meta charset="utf-8">
</head>
<body style="margin: 0;">
<link rel="stylesheet" href="app.css" type="text/css" />
<!-- JQUERY CDN FIRST OTHERWISE LOCAL FALLBACK -->
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.3.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery-2.0.3.min.js">\x3C/script>')</script>
<script src="js/three.min.js"></script>
<script src="js/OrbitControls.js"></script>
<script src='js/CSS3DRenderer.js'></script>
<script src="app.js"></script>
<script src="addmarkers.js"></script>
<script src="js/ColladaLoader.js"></script>
</body>
</html>
css:
body {
background: #222;
overflow:hidden;
}
js:
// Set up the scene, camera, and renderer as global variables.
var scene, camera, renderer, container, controls;
init();
animate();
// Sets up the scene. BASIC THREEJS
function init() {
// Detecteerd op webGL mogelijk is, zoniet, laad een link ofzo, dan zien we wel, doe ik later wel
// Create the scene and set the scene size. BASIC THREEJS
scene = new THREE.Scene();
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
//ik wil da in ne div, om dat later dan in te laden in de supercode e
container = document.createElement( 'div' );
document.body.appendChild( container );
// Create a renderer and add it to the container. BASIIIC
renderer = new THREE.WebGLRenderer();
renderer.setSize(WIDTH, HEIGHT);
renderer.domElement.style.position = "relative";
container.appendChild(renderer.domElement);
// Create the camera
camera = new THREE.PerspectiveCamera(55, WIDTH / HEIGHT, 1, 40000);
scene.add(camera);
camera.position.set(0,50,2500);
camera.lookAt(scene.position);
// Create an event listener that resizes the renderer with the browser window
window.addEventListener('resize', function() {
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
renderer.setSize(WIDTH, HEIGHT);
camera.aspect = WIDTH / HEIGHT;
camera.updateProjectionMatrix();
});
// Set the background color of the scene.
renderer.setClearColorHex(0x222222, 1);
// Create a light, set its position, and add it to the scene.
var light = new THREE.PointLight(0xffffff);
light.position.set(-100,200,100);
scene.add(light);
// Load in the map and add it to the scene, materials problem!
var loader = new THREE.JSONLoader();
loader.load( "models/3dkaart.js", function(geometry, materials){
//LambertMaterial is correct (zie json file), material is de default, dus ie neemt de texture nie?
var material = new THREE.MeshLambertMaterial(material);
mesh = new THREE.Mesh(geometry, material);
//ik wil men opject wat opschuiven
mesh.position.set(-1, 1, 2);
scene.add(mesh);
});
// Add OrbitControls voor cameramovement
controls = new THREE.OrbitControls(camera, renderer.domElement);
} // END FUNCTION INIT
/* --------------------------------------------------- */
/* ----------------------------------------------------------- */
// Renders the scene + updater
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
controls.update();
}
json:
{
"metadata" :
{
"formatVersion" : 3.1,
"generatedBy" : "Blender 2.7 Exporter",
"vertices" : 3508,
"faces" : 3993,
"normals" : 2595,
"colors" : 0,
"uvs" : [1734],
"materials" : 7,
"morphTargets" : 0,
"bones" : 0
},
"scale" : 1.000000,
"materials" : [ {
"DbgColor" : 15658734,
"DbgIndex" : 0,
"DbgName" : "Material.002",
"blending" : "NormalBlending",
"colorAmbient" : [0.10958866044266014, 0.1218598741570096, 0.06583377220978992],
"colorDiffuse" : [0.10958866044266014, 0.1218598741570096, 0.06583377220978992],
"colorEmissive" : [0.0, 0.0, 0.0],
"colorSpecular" : [0.0, 0.0, 0.0],
"depthTest" : true,
"depthWrite" : true,
"shading" : "Lambert",
"specularCoef" : 50,
"transparency" : 1.0,
"transparent" : false,
"vertexColors" : false
},
{
"DbgColor" : 15597568,
"DbgIndex" : 1,
"DbgName" : "undefined_dummy_1",
"vertexColors" : false
},
{
"DbgColor" : 60928,
"DbgIndex" : 2,
"DbgName" : "Material.004",
"blending" : "NormalBlending",
"colorAmbient" : [0.11392049959183481, 0.10457911647229068, 0.06844939691497975],
"colorDiffuse" : [0.11392049959183481, 0.10457911647229068, 0.06844939691497975],
"colorEmissive" : [0.0, 0.0, 0.0],
"colorSpecular" : [0.0, 0.0, 0.0],
"depthTest" : true,
"depthWrite" : true,
"shading" : "Lambert",
"specularCoef" : 50,
"transparency" : 1.0,
"transparent" : false,
"vertexColors" : false
},
{
"DbgColor" : 238,
"DbgIndex" : 3,
"DbgName" : "Material.005",
"blending" : "NormalBlending",
"colorAmbient" : [0.05598256075356245, 0.04765795540299944, 0.039384198775652024],
"colorDiffuse" : [0.05598256075356245, 0.04765795540299944, 0.039384198775652024],
"colorEmissive" : [0.0, 0.0, 0.0],
"colorSpecular" : [0.0, 0.0, 0.0],
"depthTest" : true,
"depthWrite" : true,
"shading" : "Lambert",
"specularCoef" : 50,
"transparency" : 1.0,
"transparent" : false,
"vertexColors" : false
},
{
"DbgColor" : 15658496,
"DbgIndex" : 4,
"DbgName" : "undefined_dummy_4",
"vertexColors" : false
},
{
"DbgColor" : 61166,
"DbgIndex" : 5,
"DbgName" : "Material",
"blending" : "NormalBlending",
"colorAmbient" : [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
"colorDiffuse" : [0.6400000190734865, 0.6400000190734865, 0.6400000190734865],
"colorEmissive" : [0.0, 0.0, 0.0],
"colorSpecular" : [0.0, 0.0, 0.0],
"depthTest" : true,
"depthWrite" : true,
"mapDiffuse" : "map.png",
"mapDiffuseWrap" : ["repeat", "repeat"],
"shading" : "Lambert",
"specularCoef" : 50,
"transparency" : 1.0,
"transparent" : false,
"vertexColors" : false
},
{
"DbgColor" : 15597806,
"DbgIndex" : 6,
"DbgName" : "Material.006",
"blending" : "NormalBlending",
"colorAmbient" : [0.800000011920929, 0.800000011920929, 0.800000011920929],
"colorDiffuse" : [0.800000011920929, 0.800000011920929, 0.800000011920929],
"colorEmissive" : [0.0, 0.0, 0.0],
"colorSpecular" : [1.0, 1.0, 1.0],
"depthTest" : true,
"depthWrite" : true,
"shading" : "Lambert",
"specularCoef" : 50,
"transparency" : 1.0,
"transparent" : false,
"vertexColors" : false
}],
"vertices" : and then all the vertices below
So, you can see the result in the link I gave.
Thank you for your help!

In your loader callback, you need to create the mesh like so:
mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
You are using a version of the library that is almost a year old. You would be wise to update to the current version. All your three.js include files must be consistent with the current version, too.
three.js r.67

How to manipulate JSON data in html within a jQuery?

I have my json file looks like this
{"level" :[
{"color" : "#FF6600", "Polygon" : [
{"lon" : 125.8575930951375,"latt": 36.95626849495004},
{"lon" : 125.8851548404469,"latt": 36.99677151742446},
{"lon" : 125.9128154107602,"latt": 37.03743133552931},
{"lon" : 125.9564137105485,"latt": 37.07788492352393},]},
{"color" : "#FFFF00", "Polygon" : [
{"lon" : 125.8575930951375,"latt": 36.95626849495004},
{"lon" : 125.8851548404469,"latt": 36.99677151742446},
{"lon" : 125.9128154107602,"latt": 37.03743133552931},
{"lon" : 125.9564137105485,"latt": 37.07788492352393},]},
]}
if i declare a variable for the above json format inside my html, then I manage to manipulate the data with the following code
var dataObj = {"level" :[
{"color" : "#FF6600", "Polygon" : [
{"lon" : 125.8575930951375,"latt": 36.95626849495004},
{"lon" : 125.8851548404469,"latt": 36.99677151742446},
{"lon" : 125.9128154107602,"latt": 37.03743133552931},
{"lon" : 125.9564137105485,"latt": 37.07788492352393},]},
{"color" : "#FFFF00", "Polygon" : [
{"lon" : 125.8575930951375,"latt": 36.95626849495004},
{"lon" : 125.8851548404469,"latt": 36.99677151742446},
{"lon" : 125.9128154107602,"latt": 37.03743133552931},
{"lon" : 125.9564137105485,"latt": 37.07788492352393},]},
]}
function UseJSON(){
for (i = 0; i < dataObj.level.length; i++)
{
var polygon = [];
for (j = 0; j < dataObj.level[i].Polygon.length; j++)
{
var point = map.getTransformXY(dataObj.level[i].Polygon[j].lon, dataObj.level[i].Polygon[j].latt,"EPSG:4326","EPSG:900913");
polygon.push(new OpenLayers.Geometry.Point(point.x, point.y));
}
var style_polygon = {strokeColor: "#000000", strokeOpacity: 0.7, fillColor: dataObj.level[i].color, fillOpacity: 0.5, strokeWidth: 1};
var intensityPolygon = new vworld.Polygon(polygon, style_polygon);
map.vectorLayer.addFeatures([intensityPolygon]);
}
}
Refer to this previous answer in SO: How to use json in html
I try to modify my code as per below:
function UseJSON(){
$.getJSON('data.json', function(dataObj) {
for (i = 0; i < dataObj.level.length; i++)
{
var polygon = [];
for (j = 0; j < dataObj.level[i].Polygon.length; j++)
{
var point = map.getTransformXY(dataObj.level[i].Polygon[j].lon, dataObj.level[i].Polygon[j].latt,"EPSG:4326","EPSG:900913");
polygon.push(new OpenLayers.Geometry.Point(point.x, point.y));
}
var style_polygon = {strokeColor: "#000000", strokeOpacity: 0.7, fillColor: dataObj.level[i].color, fillOpacity: 0.5, strokeWidth: 0.5};
var intensityPolygon = new vworld.Polygon(polygon, style_polygon);
map.vectorLayer.addFeatures([intensityPolygon]);
}
});
}
But it does not seems to work. As it seems does not get the data.json file from local. Any idea?
Thank you