Seeking advice on displaying and manipulating a 3D model of a robot arm in a browser. How can I load the model into three.js to manipulate all the sub-parts of the robot arm?
Using Inventor, I have an assembly of a rotary motor and a shaft exported as an STL file and imported into Three.js using STLLoader.js.
My goal is to manipulate the shaft to turn to a specified angle. Here is the code I have used to load the model:
<div id="container"></div>
<script src="three.js\build\three.min.js"></script>
<script src="js\STLLoader.js"></script>
<script>
// Set size variables
var SIZE_x = 400, SIZE_y = 400;
// Set three main THREE variables
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, SIZE_x/SIZE_y, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
// Set renderer options
renderer.setSize(SIZE_x, SIZE_y);
renderer.setClearColor(0xEEEEEE, 1.0);
renderer.clear();
// Append to HTML Dom
$('#container').append(renderer.domElement);
// Create light
var pointLight = new THREE.PointLight(0xFFFFFF);
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;
scene.add(pointLight);
// Move camera
camera.position.x = 0;
camera.position.y = 20;
camera.position.z = 20;
var loader = new THREE.STLLoader();
loader.addEventListener( 'load', function ( event ) {
var geometry = event.content;
var material = new THREE.MeshLambertMaterial( { ambient: 0xff5533, color: 0xff5533 } );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
mesh.traverse(function ( child ) {
console.log("Hej: " + child);
});
console.log('Loaded');
} );
loader.load( 'models/AssemblySimple1.stl' );
// Render loop
var render = function () {
requestAnimationFrame(render);
camera.lookAt(scene.position);
renderer.render(scene, camera);
};
render();
</script>
Any advice on the points mentioned above and suggestions on the preferred export file format are appreciated. Your thoughts on other ways to approach this problem are also welcome.
Thank you