I am loading a .stl file of an airplane. but when i add it to the scene it shows upside down. Why is that so?
Im using this model https://www.3dcadbrowser.com/3d-model/boeing-737-500
Can you please share a screenshot of the rendering? Besides, sharing your code and the asset would also be helpful.
I am using this custom loader to load files http://robotwebtools.org/jsdoc/ros3djs/current/models_MeshResource.js.html#line18 and then just
var airplane = new ROS3D.MeshResource({
resource: '76682_Boeing_767_ASCII.stl',
path: 'http://localhost/ip-mahmoud/models/planes/',
material: material,
warnings: true,
});
and then simply scene.add(airplane)
Looking at the code, it seems the loader internally uses THREE.STLLoader. I suggest you use the latest version of the loader directly from the three.js repository. Use the following example as a code template:
https://threejs.org/examples/webgl_loader_stl
Maybe ROS3D.MeshResource uses an old (buggy) version of THREE.STLLoader. It’s also good to ensure that the version of the loader and the library’s version (three.js) actually match.
I am trying your example but I get a ReferenceError: STLLoader is not defined init.js:127:16.
Is this the right path for the STLLoader file ?
<script type="text/javascript" src="script/lib/three.js/examples/js/loaders/STLLoader.js"></script>
https://se.mathworks.com/help/aeroblks/about-aerospace-coordinate-systems.html
It is apparently not uncommon to have z down on airplanes. I suggest simply placing it in a z-up container that is rotated Math.PI around x (or y). (Or a y-up container that is rotated 0.5*Math.PI around x and perhaps also around z (but Tait-Bryan rotations tend to twist my brain, so I don’t want to give too specific guidance without looking properly into it and testing it, which I think you can do).
That was actually the next thing I was going to ask for^^.
If the issue still persists with the latest STLLoader, rotate the resulting STL mesh like so:
mesh.quaternion.setFromEuler( new THREE.Euler( - Math.PI / 2, 0, 0 ) );
Yes, it is also possible to rotate the mesh, but in my experience (with ships) it can be useful to maintain a reference to the original coordinate system, so that one can apply yaw-pitch-roll etc. (if three.js cooperates, that is. It may require altering the order of application of Tait-Bryan (incorrectly named “Euler” in three.js) rotations, for instance mesh.rotation.set(yaw,pitch,roll,"ZYX");).
Is there a reason to not use the good old mesh.rotation, trusting it will make the right quaternion internally?
Ideally, at some point in the distant future, directly setting Euler angles will be deprecated and you do it this way. Object3D.rotation will be then of type Quaternion.
I don’t see why I am still getting ReferenceError: STLLoader is not defined init.js:127:16 here is my html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Drone Interface Views</title>
<script type="text/javascript" src="CONFIG.json"></script>
<script type="text/javascript" src="script/lib/three.js/build/three.min.js"></script>
<script type="text/javascript" src="script/lib/EventEmitter2/lib/eventemitter2.js"></script>
<script type="text/javascript" src="script/lib/roslibjs/build/roslib.min.js"></script>
<script src="https://threejs.org/examples/js/loaders/STLLoader.js"></script>
<script type="text/javascript" src="script/lib/three.js/examples/js/loaders/ColladaLoader.js"></script>
<script type="text/javascript" src="script/3dViews/init.js"></script>
<script type="text/javascript" src="script/common.js"></script>
<link rel="stylesheet" href="css/3dViews.css">
<link rel="stylesheet" href="css/header.css">
</head>
<body onload="initViews()" >
<div id="main">
<script type="text/javascript">
// shows error here
var add = new STLLoader();
</script>
<form id="form">
<p>Airplane type</p>
<input type="radio" id="737" name="Airplane" value="737">
<label for="mc"> Airbaltic Boeing 737-500</label>
<input type="radio" id="767" name="Airplane" value="767">
<label for="vi"> Boeing 767</label>
<input id="result" type="button" value="Select" >
</form>
<span id="show"></span>
<h2 style="display:inline-block;">Top View</h2>
<div id="topView"></div>
<h1 style="display:inline-block;">Side View</h1>
<div id="sideView"></div>
<h1 style="display:inline-block;">Perspective View</h1>
<div id="perspectiveView"></div>
<a href="./index.html">Return</a>
</div>
</body>
</html>
And I Just started today with three.js so I am sorry for any dumb questions or problems
Maybe you use in your code:
var loader = new STLLoader();
but it should be:
var loader = new THREE.STLLoader();
2 Likes
Yeah that was the problem for the error !
Then try to rotate the mesh like proposed some comments above.
How can I see the axes of the object ?
This doesn’t work
var loader = new THREE.STLLoader();
loader.load( 'http://localhost/..../76682_Boeing_767_ASCII.stl', function ( geometry ) {var material = new THREE.MeshPhongMaterial( { color: 0xff5533, specular: 0x111111, shininess: 200 } );
var plane = new THREE.Mesh( geometry, material );
plane.scale.set( 0.5, 0.5, 0.5 );
plane.add(new THREE.AxesHelper(1000));
topView.addObject( plane );
} );
topView.addObject() is my function that simply do scene.add(object).
I thinks it’s not right to say this. Euler is an umbrella term that includes Tait–Bryan angles. From Euler angles - Wikipedia
Tait–Bryan angles are also called Cardan angles; nautical angles; heading, elevation, and bank; or yaw, pitch, and roll. Sometimes, both kinds of sequences (Tait-Bryan and Proper Euler angles) are called “Euler angles”.
What do you mean by that? Can’t you see the helper at all? Or is it not oriented correctly?
This fiddle might help: Edit fiddle - JSFiddle - Code Playground
It doesn’t show up at all
If the airplane is measured in mm or cm or inches, a length of 1000 for the AxesHelper may not be enough.
That is right. But THREE.Euler is specifically Tait-Bryan angles. You cannot do “Proper Euler” (e.g. x-y-x) with THREE.Euler.