Hi!
I think I have a fairly easy question but after searching and trying for hours now, I can’t seem to get to the solution…
I have a scene where you see a polargrid. Then I’m loading a 3D model (STL file with STLLoader). This combined with a material is a mesh which is added to the scene. So far so good and I’m able to see my model.
However, this model in Three is seemingly randomly placed inside the scene and also in a different angle (90 degrees off). But when I load this exact same STL file in 3D Builder windows app, it is placed in the center and upright as you would expect. How can I reposition my model in Three so that is it placed in the center of the polar grid and upright like in 3D Builder or any other slicer program? I’d suppose there is some way to figure out what the position of the object is relative to the center of the grid and you need that to reposition the object. Is that right? (Images are below)
This is my code:
var container, stats;
var camera, cameraTarget, scene, renderer;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(70, ($(container).width()) / ($(container).height()), 0.1, 10000);
camera.position.set(0, 350, 300);
camera.lookAt(new THREE.Vector3(0, 0, 0))
scene = new THREE.Scene();
scene.background = new THREE.Color(0x72645b);
var radius = 250;
var radials = 8;
var circles = 4;
var divisions = 64;
var gridHelper = new THREE.PolarGridHelper(radius, radials, circles, divisions);
scene.add(gridHelper);
//STL Loader
var loader = new STLLoader();
var material = new THREE.MeshPhongMaterial({ color: 0x66fb6a, specular: 0x111111, shininess: 200 });
loader.load('Sculpture.STL', function (geometry) {
var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, 0);
scene.add(mesh);
});
//Lights
scene.add(new THREE.AmbientLight(0xFFFFFF, 0.8));
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize($(container).width(), $(container).height());
renderer.outputEncoding = THREE.sRGBEncoding;
var controls = new OrbitControls(camera, renderer.domElement);
container.appendChild(renderer.domElement);
window.addEventListener('resize', onWindowResize, false);
}
function addShadowedLight(x, y, z, color, intensity) {
var directionalLight = new THREE.DirectionalLight(color, intensity);
directionalLight.position.set(x, y, z);
scene.add(directionalLight);
directionalLight.castShadow = true;
var d = 1;
directionalLight.shadow.camera.left = - d;
directionalLight.shadow.camera.right = d;
directionalLight.shadow.camera.top = d;
directionalLight.shadow.camera.bottom = - d;
directionalLight.shadow.camera.near = 1;
directionalLight.shadow.camera.far = 4;
directionalLight.shadow.bias = - 0.002;
}
function onWindowResize() {
renderer.setSize(($(container).width()), ($(container).height()));
}
function animate() {
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
function render() {
renderer.render(scene, camera);
}
