文章/答案/技术大牛

发布

社区首页 >问答首页 >如何可视化PerspectiveCamera的three.js？

问如何可视化PerspectiveCamera的three.js？
EN

Stack Overflow用户

提问于 2022-07-30 02:55:39

回答 1查看 62关注 0票数 1

我正在阅读关于如何在three.js文档中绘制线条的教程，所使用的代码如下所示：

代码很好，没有问题。

<html>
    <head>
        <meta charset="utf-8">
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
        </style>
    </head>
    <body>
        <script src="///C:/Users/pc/Desktop/threejs_tutorial/build_threejs.html"></script>
        <script>
        
        const scene = new THREE.Scene();
        
        const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );
        camera.position.set( 0, 0, 100 );
        camera.lookAt( 0, 0, 0 );

        const renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );

        //create a blue LineBasicMaterial
        const material = new THREE.LineBasicMaterial( { color: 0x0000ff } );

        const points = [];
        points.push( new THREE.Vector3( - 10, 0, 0 ) );
        points.push( new THREE.Vector3( 0, 10, 0 ) );
        points.push( new THREE.Vector3( 10, 0, 0 ) );

        const geometry = new THREE.BufferGeometry().setFromPoints( points );

        const line = new THREE.Line( geometry, material );


        scene.add( line );
        renderer.render( scene, camera );


        </script>
    </body>
</html>

但吸引我眼球的是代码中的PerspectiveCamera部分。

        const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );

第一个数字是视场，第二个数字是高宽比，第三个数字是摄像机到近景平面的距离，第四个数字是摄像机到远视平面的距离。

我们如何可视化PerspectiveCamera of three.js？看上去像我想象的这个吗？

PerspectiveCameraVisualization

javascript

three.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-07-30 04:45:09

可视化PerspectiveCamera of three.js确实是这样的：

truePerspectiveCameraVisualization

如果摄像机到近景平面的距离和视场的角度已知，则用三角法确定高度。

宽度由高度乘以纵横比w=h* (innerW / innerH)决定。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73172556

复制

相似问题

问如何可视化PerspectiveCamera的three.js？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何可视化PerspectiveCamera的three.js？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何可视化PerspectiveCamera的three.js？
EN