Question

How to get axis from a Three-Dimensional objects in three js? My code is

<html>
<head>
    <title>three Demo</title>
</head>
<body>
    <script src="three.js"></script>
    <script src="STLLoader.js"></script>
    <script src="Detector.js"></script>
    <script>
        if (!Detector.webgl) {
            Detector.addGetWebGLMessage();
        }
        var container;
        var scene, renderer, camera, cameraTarget;
        init();
        animate();
        function init() {
            container = document.createElement('div');
            document.body.appendChild(container);
            var img_width = 250;
            var img_height = 300;
            var viewAngle = 45;
            var aspectRatio = img_width / img_height;
            camera = new THREE.PerspectiveCamera(viewAngle, aspectRatio, 0.1, 1000);
            camera.position.set(300, 450, 300);
            cameraTarget = new THREE.Vector3(0, 0, 0);
            scene = new THREE.Scene();
            scene.fog = new THREE.Fog(0x72645b, 2, 15);

            var light = new THREE.DirectionalLight(0xffffff, 1);
            light.position.set(0, 300, 300);
            scene.add(light);

            scene.add(new THREE.AmbientLight(0x555555));

            renderer = new THREE.WebGLRenderer({antialias: true});
            renderer.setClearColor(scene.fog.color);
            renderer.setSize(img_width, img_height);
            document.body.appendChild(renderer.domElement);

            var stl_loader = new THREE.STLLoader();
            stl_loader.load("Bird_cage.stl", function (geometry) {

                var material = new THREE.MeshPhongMaterial({color: 0xff5533, specular: 0x111111, shininess: 200});
                var mesh = new THREE.Mesh(geometry, material);
                mesh.position.set(0, -0.25, 0.6);
                mesh.rotation.set(0, -Math.PI / 2, 0);
                mesh.scale.set(0.5, 0.5, 0.5);

                scene.add(mesh);
            });
        }


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

        function render()
        {
            var timer = Date.now() * 0.0005
            camera.position.x = Math.cos(timer) * 3;
            camera.position.z = Math.sin(timer) * 300;
            camera.lookAt(cameraTarget);
            renderer.render(scene, camera);
        }



    </script>
</body>

http://jsfiddle.net/80ozg046/

Using this html.I load stl file and convert it into three dimensional objects by using thee js.Now ,What is the problem is,I want to find X-Axis,Y-Axis and Z-Axis value. If some suggestion to solve this problem,I must be thankful to them.

Answer 1

我现在看到原来的boundingBox显示为null但是现在我认为这是一个有点无证的Helper。

     var helper = new THREE.BoundingBoxHelper(mesh, 0xff0000);
    helper.update();
    // If you want a visible bounding box
    scene.add(helper);
    // If you just want the numbers
    console.log(helper.box.min);
    console.log(helper.box.max);

http://jsfiddle.net/MasterJames/m67v5bz7/2/

然后，您可以在缩放之前获取想要匹配的两个BIG和小对象的比率。

Get Axis of the 3D object by using three js

1 个答案: