Question

我想将球体的世界空间坐标带到屏幕空间坐标以获得屏幕空间边界，然后我可以使用它来覆盖div。

理想情况下，我想扩展此函数以返回对象的高度和宽度，以及x＆amp; y：

toScreenPosition：function（obj，camera） {

    var vector = new THREE.Vector3();

    var widthHalf = 0.5*world.renderer.context.canvas.width;
    var heightHalf = 0.5*world.renderer.context.canvas.height;

    obj.updateMatrixWorld();

    vector.setFromMatrixPosition(obj.matrixWorld);
    vector.project(camera);

    vector.x = ( vector.x * widthHalf ) + widthHalf;
    vector.y = - ( vector.y * heightHalf ) + heightHalf;


    return { 
        x: vector.x,
        y: vector.y
    };

},

Answer 1

你可以创建几个THREE.Object3D并在场景中找到你想要投影到屏幕的主要对象边框的位置。

然后你可以在主要对象上使用你在其他空对象上使用的方法，并获得主要对象边框屏幕上的像素位置。

例如，如果您想知道半径为5的球体边框的屏幕坐标：

import MessageUI
class ViewController:MFMailComposeViewControllerDelegate {
    func shareFileViaEmail() {
        if MFMailComposeViewController.canSendMail() {
                let mailComposerVC = MFMailComposeViewController()
                mailComposerVC.mailComposeDelegate = self


                let paths: [Any] = NSSearchPathForDirectoriesInDomains(.cachesDirectory, .userDomainMask, true)
                let documentsDirectory: String = paths[0] as! String
                let dataPath: URL = URL(fileURLWithPath: documentsDirectory).appendingPathComponent("record.xls").absoluteURL

                if let fileData = NSData(contentsOf: dataPath) {
                    print("File data loaded.")
                    mailComposerVC.addAttachmentData(fileData as Data, mimeType: "application/vnd.ms-excel", fileName: "Report")

                }

                mailComposerVC.setSubject("Report")
                mailComposerVC.setMessageBody("Message body", isHTML: false)
                self.present(mailComposerVC, animated: true, completion: nil)
            }else{

                print("Your device could not send e-mail.  Please check e-mail configuration and try again.")
            }
   }
   func mailComposeController(_ controller:MFMailComposeViewController, didFinishWith result:MFMailComposeResult, error:Error?) {

        self.dismiss(animated: false, completion: nil)
   }

}

然后你可以应用你写的函数，而不是：

var first = new THREE.Object3D();
var second = new THREE.Object3D();
var third = new THREE.Object3D();
var fourth = new THREE.Object3D();

first.position.set(sphere.x,sphere.y+5,sphere.z);
second.position.set(sphere.x,sphere.y-5,sphere.z);

等...

你会这样做：

obj.updateMatrixWorld();

等...

然后你将在屏幕上看到这两个对象（位于主对象边框上）的x，y坐标，你可以通过减去来检查高度。

Answer 2

我会编写一个函数，将3D点作为输入并返回2D屏幕点，就像呈现there的那样。然后，如果你处理一个球体，那将很容易：以3D形式得到球体的中心，计算2D点，这将是叠加div的中心，得到球体表面上的任何3D点，计算2D点，您将知道叠加div所需的半径，从那里您可以轻松计算矩形区域。

三个JS将3D尺寸转换为2D

2 个答案: