zoukankan html css js c++ java

threejs学习笔记05---相机透视-正透视

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/Three.js"></script>
    <script src="js/Stats.js"></script>
    <script src="js/tween.min.js"></script>

    <style type="text/css">
        div#canvas-frame {
            border: none;
            cursor: pointer;
             100%;
            height: 600px;
            background-color: #EEEEEE;
        }

    </style>
    <script>
        var renderer;
        function initThree(){
            width = document.getElementById('canvas-frame').clientWidth;
            height = document.getElementById('canvas-frame').clientHeight;
            renderer= new THREE.WebGLRenderer({
                antialias:true
            });
            renderer.setSize(width,height);
            document.getElementById('canvas-frame').appendChild(renderer.domElement);
            renderer.setClearColor(0xFFFFFF,1.0);
        }

        var camera;
        function initCamera(){
            //透视投影相机THREE.PerspectiveCamera
             camera = new THREE.PerspectiveCamera(45,width/height,1,10000);
            //正投影相机THREE.OrthographicCamera
            //camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 10, 1000 );
            camera.position.x=0;
            camera.position.y = 0;
            camera.position.z = 600;
            camera.up.x = 0;
            camera.up.y = 1;
            camera.up.z = 0;
            camera.lookAt({
                x : 0,
                y : 0,
                z : 0
            });
        }

        var scene;
        function initScene(){
            scene = new THREE.Scene();
        }

        var light;
        function initLight(){
            light=new THREE.AmbientLight(0xFF0000);
            light.position.set(100,100,200);
            scene.add(light);

            light=new THREE.PointLight(0xFF0000);
            light.position.set(100,100,200);
            scene.add(light);
        }

        var cube;
        function initObject(){
            var geometry=new THREE.CylinderGeometry(70,100,200);
            var material = new THREE.MeshLambertMaterial({color:0xFFFFFF});
            var mesh = new THREE.Mesh(geometry,material);
            mesh.position=new THREE.Vector3(0,0,0);
            scene.add(mesh);
        }
        function animation(){
            changeFov();
            renderer.render(scene, camera);
            requestAnimationFrame(animation);
        }

        function setCameraFov(fov){
            camera.fov = fov;
            //视角fov：这个最难理解,我的理解是,眼睛睁开的角度,即,视角的大小,如果设置为0,
             //       相当你闭上眼睛了,所以什么也看不到,如果为180,那么可以认为你的视界很广阔,
             //       但是在180度的时候，往往物体很小，因为他在你的整个可视区域中的比例变小了。
            camera.updateProjectionMatrix();
        }

        function changeFov(){
            var txtFov = document.getElementById("txtFov").value;
            var val = parseFloat(txtFov);
            setCameraFov(val);
        }

        function threeStart() {
            initThree();
            initCamera();
            initScene();
            initLight();
            initObject();
            animation();

        }
    </script>
</head>
<body onload="threeStart();">
<div></div>
<div id="canvas-frame"></div>
<div>
    Fov:<input type="text" value="45" id="txtFov"/>(0到180的值)
    <p>
        视角fov：这个最难理解,我的理解是,眼睛睁开的角度,即,视角的大小,如果设置为0, <br>
               相当你闭上眼睛了,所以什么也看不到,如果为180,那么可以认为你的视界很广阔,<br>
               但是在180度的时候，往往物体很小，因为他在你的整个可视区域中的比例变小了。
    </p>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/Three.js"></script>
    <script src="js/Stats.js"></script>
    <script src="js/tween.min.js"></script>

    <style type="text/css">
div#canvas-frame {
            border: none;
cursor: pointer;
width: 100%;
height: 600px;
background-color: #EEEEEE;
}

    </style>
    <script>
var renderer;
function initThree(){
width = document.getElementById('canvas-frame').clientWidth;
height = document.getElementById('canvas-frame').clientHeight;
renderer= new THREE.WebGLRenderer({
antialias:true
});
renderer.setSize(width,height);
document.getElementById('canvas-frame').appendChild(renderer.domElement);
renderer.setClearColor(0xFFFFFF,1.0);
        }

var camera;
function initCamera(){
//透视投影相机THREE.PerspectiveCamera
camera = new THREE.PerspectiveCamera(45,width/height,1,10000);
//正投影相机THREE.OrthographicCamera
            //camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 10, 1000 );
camera.position.x=0;
camera.position.y = 0;
camera.position.z = 600;
camera.up.x = 0;
camera.up.y = 1;
camera.up.z = 0;
camera.lookAt({
x : 0,
y : 0,
z : 0
});
        }

var scene;
function initScene(){
scene = new THREE.Scene();
        }

var light;
function initLight(){
light=new THREE.AmbientLight(0xFF0000);
light.position.set(100,100,200);
scene.add(light);

light=new THREE.PointLight(0xFF0000);
light.position.set(100,100,200);
scene.add(light);
        }

var cube;
function initObject(){
var geometry=new THREE.CylinderGeometry(70,100,200);
var material = new THREE.MeshLambertMaterial({color:0xFFFFFF});
var mesh = new THREE.Mesh(geometry,material);
mesh.position=new THREE.Vector3(0,0,0);
scene.add(mesh);
        }
function animation(){
changeFov();
renderer.render(scene, camera);
requestAnimationFrame(animation);
        }

function setCameraFov(fov){
camera.fov = fov;
//视角fov：这个最难理解,我的理解是,眼睛睁开的角度,即,视角的大小,如果设置为0,
             //       相当你闭上眼睛了,所以什么也看不到,如果为180,那么可以认为你的视界很广阔,
             //       但是在180度的时候，往往物体很小，因为他在你的整个可视区域中的比例变小了。
camera.updateProjectionMatrix();
        }

function changeFov(){
var txtFov = document.getElementById("txtFov").value;
var val = parseFloat(txtFov);
setCameraFov(val);
        }

function threeStart() {
initThree();
initCamera();
initScene();
initLight();
initObject();
animation();

        }
</script>
</head>
<body onload="threeStart();">
<div></div>
<div id="canvas-frame"></div>
<div>
Fov:<input type="text" value="45" id="txtFov"/>(0到180的值)
<p>
视角fov：这个最难理解,我的理解是,眼睛睁开的角度,即,视角的大小,如果设置为0, <br>
相当你闭上眼睛了,所以什么也看不到,如果为180,那么可以认为你的视界很广阔,<br>
但是在180度的时候，往往物体很小，因为他在你的整个可视区域中的比例变小了。
</p>
</div>
</body>
</html>

学习是对自己负责，自己是职业发展的负责人！

查看全文

相关阅读:
According to TLD or attribute directive in tag file, attribute end does not accept any expressions
Several ports (8080, 8009) required by Tomcat v6.0 Server at localhost are already in use.
sql注入漏洞
 Servlet—简单的管理系统
 ServletContext与网站计数器
 VS2010+ICE3.5运行官方demo报错----std::bad_alloc
java 使用相对路径读取文件
 shell编程 if 注意事项
 Ubuntu12.04下eclipse提示框黑色背景色的修改方法
 解决Ubuntu环境变量错误导致无法正常登录

原文地址：https://www.cnblogs.com/Webyangbowen/p/8058890.html