camera中lookAt的理解

最新推荐文章于 2024-10-22 18:00:31 发布

qq_38694034

最新推荐文章于 2024-10-22 18:00:31 发布

阅读量1.3w

点赞数 3

CC 4.0 BY-SA版权

分类专栏： three 文章标签： three camera lookAt

本文链接：https://blog.csdn.net/qq_38694034/article/details/79702619

three 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一个使用Three.js实现的物体跟踪示例，通过调整相机的lookAt目标点，确保物体始终位于屏幕中央。该方法适用于游戏开发和交互式3D应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

camera为相机看的目标点：因为屏幕显示的是相机视椎体的可视范围，而相机的lookAt方法指的是相机观察的目标点，故可以得出：

相机lookAt的点一定显示在屏幕的正中央：利用这点，我们可以实现物体移动时，我们可以一直跟踪物体，让物体永远在屏幕的中央：一下是代码实现

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>shape对象的研究</title>
    <style>
        body{
            margin:0;
        }
    </style>
</head>
<script src="../js/three.js"></script>
<script>
    function init() {
        createScene();
        buildAuxSystem();
        addBox();
        loop();
    }
    var scene,camera,renderer,width = window.innerWidth,height = window.innerHeight,controls;
    var box,x =0 ,z = 0;

    function createScene() {
        scene = new THREE.Scene;
        camera = new THREE.PerspectiveCamera(45,width/height,1,1000);
        camera.position.set(200,200,200);
        camera.lookAt(scene.position);

        renderer = new THREE.WebGLRenderer();
        renderer.setClearColor(new THREE.Color(0x333333),1);
        renderer.setSize(width,height);
        document.body.appendChild(renderer.domElement);

        document.addEventListener("keydown",handleKey,false);
        window.addEventListener("resize",handleWindowResize,false)
    }
    function loop() {
        renderer.render(scene,camera);
        box.position.set(x,5,z);
        camera.lookAt(box.position);
        requestAnimationFrame(loop);
    }
    function handleWindowResize() {
        width = window.innerWidth;
        height = window.innerHeight;
        renderer.setSize(width,height);
        camera.aspect = width/height;
        camera.updateProjectionMatrix();
    }

    // 建立辅助设备系统
    function buildAuxSystem(){
        var gridHelper = new THREE.GridHelper(320,32);
        scene.add(gridHelper);

        var axesHelper = new THREE.AxesHelper(320);
        scene.add(axesHelper);
    }
    function addBox() {
        var geometry = new THREE.CubeGeometry(10,10,10);
        box = new THREE.Mesh(geometry,new THREE.MeshBasicMaterial({color:0x00ff00}));
        box.position.set(x,5,z);
        scene.add(box);
    }

    function handleKey(e) {
        if(e.keyCode == 38){
            z -= 10;
        }else if(e.keyCode == 39){
            x += 10;
        }else{
            return;
        }
    }

</script>
<body onload ="init()">

</body>
</html>