Three.js加载Json 拾取模型

js加载json文件

window.onload = function (){
	let url = "data/test.json";
	let request = new XMLHttpRequest();
	request.open("get", url);/*设置请求方法与路径*/
	request.send(null);/*不发送数据到服务器*/
	request.onload = function () {/*XHR对象获取到返回信息后执行*/
			if (request.status == 200) {/*返回状态为200，即为数据获取成功*/
				jsonList = JSON.parse(request.responseText);
					initJson(jsonList);
					console.log(jsonList);
			}
	}
}

 

three.js加载json模型

function initJson(meshDataList){


	let center = [0.0, 0.0, 0.0];

	for (let meshIdx = 0; meshIdx < meshDataList.length; meshIdx++) {

			let meshData = meshDataList[meshIdx];

			let geometry = new THREE.Geometry();

			let vertexArray = [];
      //console.log("meshData",meshData)
			for (let i = 0; i < meshData.VertexIndices.length; i += 1) {

					let idx = 3 * meshData.VertexIndices[i];

					vertexArray[i] = new THREE.Vector3(
								meshData.VertexCoords[idx],
								meshData.VertexCoords[idx + 1],
								meshData.VertexCoords[idx + 2]);
			}

			let normalArray = [];

			//uncompress normals array
			for (let i = 0; i < meshData.NormalIndices.length; i += 1) {

					let idx = 3 * meshData.NormalIndices[i];

					normalArray[i] = new THREE.Vector3(
								meshData.Normals[idx],
								meshData.Normals[idx + 1],
								meshData.Normals[idx + 2]);
			}

			//Generate Faces
			for (let i = 0; i < vertexArray.length; i += 3) {

					geometry.vertices.push(vertexArray[i]);
					geometry.vertices.push(vertexArray[i + 1]);
					geometry.vertices.push(vertexArray[i + 2]);

					let face = new THREE.Face3(i, i + 1, i + 2)

					geometry.faces.push(face);

					face.vertexNormals.push(normalArray[i]);
					face.vertexNormals.push(normalArray[i + 1]);
					face.vertexNormals.push(normalArray[i + 2]);
			}

			center[0] += meshData.Center[0];
			center[1] += meshData.Center[1];
			center[2] += meshData.Center[2];
			let material = new THREE.MeshLambertMaterial(
				{
						color: colorToHex(meshData.Color[0]),
						//color:0Xff00ff,
						flatShading: THREE.SmoothShading
				});

			let mesh = new THREE.Mesh(geometry, material);

			mesh.doubleSided = false;

			

			let entity = new THREE.Object3D();
			mesh.name=meshData.Id;
			allMesh.push(mesh);
			//entity.add(mesh);

			//meshList.push(entity);

			scene.add(entity);
	}

	center[0] = center[0] / meshDataList.length;
	center[1] = center[1] / meshDataList.length;
	center[2] = center[2] / meshDataList.length;

	for (let i = 0; i < meshList.length; i++) {
			meshList[i].applyMatrix(new THREE.Matrix4().makeTranslation(
					 -center[0],
					 -center[1],
					 -center[2]));
	}
}
function colorToHex(color) {
	let bytes = [];

	bytes[0] = (color >>> 24) & 0xFF; //R
	bytes[1] = (color >>> 16) & 0xFF; //G
	bytes[2] = (color >>> 8) & 0xFF;  //B
	bytes[3] = (color >>> 0) & 0xFF;  //A

	return bytes[2] | (bytes[1] << 8) | (bytes[0] << 16);
}

拾取模型，当拾取到模型时，将其颜色设置为红色

function pickUpObj(){
	raycaster=new THREE.Raycaster();//拾取射线
	raycaster.setFromCamera(mouse,camera);
	//let intersects=raycaster.intersectObjects(scene.children);
	let intersects=raycaster.intersectObjects(allMesh);
//     console.log(intersects);
	if(intersects.length>0){
		//console.log("拾取",intersects)
		intersects.map(n=>{
			n.object.material.color=new THREE.Color(0xff0000);
		})
  }else{
	 	resetMesh();
	}
}

 

没有拾取到模型时，恢复模型颜色

function resetMesh(){
	allMesh.map(n=>{
		jsonList.map(m=>{
			if(n.name==m.Id){
				n.material.color=new THREE.Color(colorToHex(m.Color[0]))
			}
		})
	})
}

效果：