Three.js 화면 중앙에 렌더링 된 STL 파일

Question

THREE.STLLoader()를 사용하여 Three.js로 표시되는 Thingiverse에서 렌더링 된 STL 파일을 원본 파일로로드했습니다. 내 문제는 화면 중심에 배치하는 방법을 모르며 이벤트 터치 좌표를 사용하여 수정중인 회전 특성을 조정하여 수행 할 수 있습니다. 화면 위로 손가락을 움직이면 화면 가운데에서 물체를 가져 와서 중심에서 튕겨 내려고합니다.

이

내가 현재 어떤 도움을 주시면 감사하겠습니다이 무엇 :

var container, stats; 

var camera, scene, renderer; 
var stlMesh; 

var mesh, geometry; 

var loader; 

var directionalLight; 

var mouseX = 0; 
var mouseY = 0; 
var zoom = 0; 

var windowHalfX = window.innerWidth/2; 
var windowHalfY = window.innerHeight/2; 

// Ejecta; Added for touch controls: 
document.addEventListener('touchmove', onDocumentTouchMove, false); 

function init() { 
    camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 0.2, 100); 
    scene = new THREE.Scene(); 

    scene.add(camera); 

    // light 
    var dirLight = new THREE.DirectionalLight(0xffffff); 
    dirLight.position.set(200, 200, 1000).normalize(); 

    scene.add(dirLight); 

    // STL 
    var loader = new THREE.STLLoader(); 
    loader.load(window.filePath, function(geometry) { 
     var material = new THREE.MeshPhongMaterial({ 
      color: 0xffff00, 
      specular: 0x111111, 
      shininess: 200 
     }); 
     stlMesh = new THREE.Mesh(geometry, material); 

     stlMesh.position.set(0, -0.25, 0.6); 

     stlMesh.rotation.set(0, -Math.PI/2, 0); 
     stlMesh.scale.set(0.5, 0.5, 0.5); 
     stlMesh.castShadow = true; 
     stlMesh.receiveShadow = true; 

     scene.add(stlMesh); 
    }); 

    // renderer 
    renderer = new THREE.WebGLRenderer({ 
     canvas: document.getElementById('canvas'), 
     alpha: true 
    }); 
    renderer.setClearColor(0x000000, 0); // the default 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    container = document.createElement('div'); 
    document.body.appendChild(container); 
    container.appendChild(renderer.domElement); 

    window.addEventListener('resize', onWindowResize, false); 
} 

function getCentroid(mesh) { 
    mesh.geometry.computeBoundingBox(); 
    var boundingBox = mesh.geometry.boundingBox; 

    var size = boundingBox.size(); 
    console.log(size.x, size.y, size.z); 

    var x0 = boundingBox.min.x; 
    var x1 = boundingBox.max.x; 
    var y0 = boundingBox.min.y; 
    var y1 = boundingBox.max.y; 
    var z0 = boundingBox.min.z; 
    var z1 = boundingBox.max.z; 

    var bWidth = (x0 > x1) ? x0 - x1 : x1 - x0; 
    var bHeight = (y0 > y1) ? y0 - y1 : y1 - y0; 
    var bDepth = (z0 > z1) ? z0 - z1 : z1 - z0; 

    var centroidX = x0 + (bWidth/2) + mesh.position.x; 
    var centroidY = y0 + (bHeight/2) + mesh.position.y; 
    var centroidZ = z0 + (bDepth/2) + mesh.position.z; 

    return mesh.geometry.centroid = { 
     x: centroidX, 
     y: centroidY, 
     z: centroidZ 
    }; 
} 

function onWindowResize() { 
    windowHalfX = window.innerWidth/2; 
    windowHalfY = window.innerHeight/2; 

    camera.aspect = window.innerWidth/window.innerHeight; 
    camera.updateProjectionMatrix(); 

    renderer.setSize(window.innerWidth, window.innerHeight); 
} 

// Ejecta; Added for touch controls 
function onDocumentTouchMove(event) { 
    //mouseX = (event.touches[0].clientX - windowHalfX) * 4; 
    //mouseY = (event.touches[0].clientY - windowHalfY) * 4; 
    //mouseX = event.touches[0].clientX-180 
    //mouseY = event.touches[0].clientY-180 

    if (event.touches.length == 1) { 
     // Roation Action 
     mouseX = degInRad(event.touches[0].clientX) 
     mouseY = degInRad(event.touches[0].clientY) 
    } else if (event.touches.length == 2) { 
     positionY1 = event.touches[0].clientY 
     positionY2 = event.touches[1].clientY 
     if (positionY2 > positionY1) { 
      t1 = positionY1 
      positionY1 = positionY2 
      positionY2 = t1 
     } 

     zoom = (positionY1 - positionY2)/window.innerHeight 
     zoom = zoom > 0.9 ? 0.9 : zoom 
    } 
} 

function animate() { 
    requestAnimationFrame(animate); 
    render(); 
} 

function degInRad(deg) { 
    return deg * Math.PI/180; 
} 

function render() { 
    var timer = -0.0002 * Date.now(); 
    // OLD 
    //camera.position.x += (mouseX - camera.position.x) * .05; 
    //camera.position.y += (- mouseY - camera.position.y) * .05; 

    //camera.lookAt(stlMesh.position); 
    //scene.rotation.copy(camera.rotation); 

    // NEW 
    stlMesh.rotation.y = mouseX; 
    stlMesh.rotation.x = mouseY; 
    //stlMesh.rotation.y = 4.790928796724434; 
    //stlMesh.rotation.x = 3.3073989325292543; 
    //stlMesh.position.z = camera.position.z*zoom 
    //console.log(stlMesh.position.x, stlMesh.position.y) 
    //console.log("Z: "+stlMesh.position.z) 

    renderer.render(scene, camera); 
} 

Answer 1

내가 Three.js를의 소스 코드를 읽은 후 답을 발견하는 것, 키는 '중심'형상을 이전에 있었다 메쉬를 생성합니다. 여기 내 새 THREE.STLoader()가 있습니다. 로드 방법 :

// STL 
var loader = new THREE.STLLoader(); 
loader.load(window.filePath, function (geometry) { 
    geometry.center() 
    var material = new THREE.MeshLambertMaterial({color: 0x55B663}); 
    stlMesh = new THREE.Mesh(geometry, material); 
    camera.position.z = geometry.boundingBox.size().z+300 
    //stlMesh.translateY() 
    scene.add(stlMesh); 
});