When a user clicks on a specific part of the object model, I want to display the wireframe of that part to indicate which part is being modified. The user can then choose a color for that part from a palette. However, the line child.material.color.set(selectedColor) doesn't seem to be working for some reason. Am I overlooking something? Apologies for the extensive code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Tacchhi.com Demo</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div className="palette">>
<span></span>
<span></span>
<span></span>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="js/Three-r80.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/OBJLoader.js"></script>
<script src="js/MTLLoader.js"></script>
<script src="js/Projector.js"></script>
<(script&gq
//GLOBAL VARIABLES
var renderCanvas, scene, camera, renderer, cameraControl, objModel, raycaster, vector, clickInfo, marker, modelHasLoaded;
//VIEWPORT SIZE
var viewportWidth = window.innerWidth;
var viewportHeight = window.innerHeight;
function init(){
//SCENE
window.scene = new THREE.Scene();
//CAMERA
camera = new THREE.PerspectiveCamera(75, viewportWidth/viewportHeight, 1, 1000);
camera.position.set(0, 20, 160);
camera.lookAt(scene.position);
//RENDERER
renderer = new THREE.WebGLRenderer();
renderer.setSize(viewportWidth, viewportHeight);
renderer.setClearColor('#ccc');
//LIGHTING
var ambientLight = new THREE.AmbientLight('#000');
scene.add(ambientLight);
var pointLight = new THREE.PointLight('#fff', 1, 2000);
// Other lighting properties
// Load OBJ Model
// Set Orbit Controls
// Render object when loaded with mouse cursor logic
// Raycasting and Marker implementation
//CONTINUE WITH OTHER FUNCTIONS AND LOGIC AS PER REQUIREMENT
});
</script>
</body>
</html>