I have successfully created a scene in three.js/editor and exported it as a JSON file that I am currently using. While I have been able to program the camera and orbit controls, I am unsure of how to specifically select an object within my JSON structure. Is there a method for accomplishing this? If so, how can I "target" a specific object? Could utilizing a unique identifier like a "uuid" be a solution? Here is an excerpt from my JSON code:
{
"metadata": {
"version": 4.4,
"type": "Object",
"generator": "Object3D.toJSON"
},
"geometries": [
{
"uuid": "DEB90436-B316-4E49-83A6-323712AA3A78",
"type": "TorusGeometry",
"radius": 1,
"tube": 0.34,
"radialSegments": 42,
"tubularSegments": 44,
"arc": 6.32,
},
{
"uuid": "0F8E3492-4B1B-436A-973C-7F8433AA7582",
"type": "PlaneGeometry",
"width": 2,
"height": 2
} /...and so forth...
]
Below is my JavaScript implementation:
var scene, camera, renderer;
init();
animate();
function init() {
// Setting up the scene with appropriate dimensions.
scene = new THREE.Scene();
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
// Creating a renderer and appending it to the DOM.
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(WIDTH, HEIGHT);
document.body.appendChild(renderer.domElement);
// Establishing a camera's position relative to the model, then adding it to the scene.
camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 2000, 1000 );
camera.position.x = 200;
camera.position.y = 100;
camera.position.z = 200;
scene.add(camera);
// Loading the mesh and integrating it into the scene. The JSON structure is imported here...
var loader = new THREE.ObjectLoader();
loader.load("scene.json",function ( obj ) {
scene.add( obj );
});
// Implementing OrbitControls
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enablePan = false;
controls.minDistance = 6; // determining max zoom in distance
controls.maxDistance = 71; // defining maximum zoom out allowance
}
function animate() {
// Render the scene.
renderer.render(scene, camera);
controls.update();
}
Is there a viable approach?