three.js加载对象/模型，然后操作子部件/子部件
three.js加载对象/模型，然后操作子部件/子部件
提问于 2013-09-17 00:01:24
我有一个机器人手臂的3D模型，我想在浏览器中显示和操纵它。
我的问题是:如何将模型加载到three.js中，以便可以操纵机械臂的所有子部分。
例如，我在Inventor中有一个旋转电动机和一个轴作为部件附着。图片来源：http://i.stack.imgur.com/custz.png
这将导出为stl文件，并使用STLLoader.js导入Three.js。图片来源：http://i.stack.imgur.com/nLmBe.png
我想知道怎样才能操纵转轴转到指定的角度。
我已经使用以下代码加载了模型：
<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
//document.body.appendChild(renderer.domElement);
$('#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 ) {
//if ( child instanceof THREE.Mesh ) {
console.log("Hej: " + child);
//}
});
//scene.add( new THREE.Mesh( geometry ) );
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> 欢迎任何观点和提示。此外，如果有首选的导出文件格式。我既有SolidWorks，也有Inventor。或者，如果我对这个问题采取了完全错误的方法，请让我知道其他方法。
谢谢
回答 1
Stack Overflow用户
发布于 2014-06-14 22:08:28
三个js有一个叫做THREE.STLLoader() .This的函数，其中一个可以用来加载stl文件。下面是它的加载方式
var loader = new THREE.STLLoader();
var group = new THREE.Object3D();
loader.load("../lib/SolidFz.stl", function (geometry) {
console.log(geometry);
var mat = new THREE.MeshLambertMaterial({color: 0x7777ff});
group = new THREE.Mesh(geometry, mat);
group.rotation.x = -0.5 * Math.PI;
group.scale.set(0.6, 0.6, 0.6);
scene.add(group);
});这里的场景
var scene new THREE.Scene();之后，您创建了一个3d对象，并将其加载到该3d object.Then中，您可以随心所欲地控制该3d对象。根据这种方式，你可以加载几个部分，并做你想要做的事情
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18832443
复制相关文章
相似问题
腾讯云开发者
