three.js手写缩放

最新推荐文章于 2024-05-29 16:35:44 发布

King.W.

最新推荐文章于 2024-05-29 16:35:44 发布

阅读量2.3k

点赞数

分类专栏： Three.js 文章标签： three-js 缩放

本文链接：https://blog.csdn.net/birdflyto206/article/details/52115941

版权

Three.js 专栏收录该内容

21 篇文章 15 订阅

订阅专栏

效果图：
这里写图片描述

其实就是手动修改相机的fov参数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手动旋转相机</title>
    <script type="text/javascript" src="../libs/three.js"></script>
    <script type="text/javascript" src="../libs/jquery-1.9.0.js"></script>
</head>
<body>
<div id="container"></div>

<script type="text/javascript">
    $(function(){
        var container;
        var camera,scene,renderer,light;
        var mesh;

        //相机参数
        var fov = 40;//相机的视角
        var near = 1;
        var far = 1000;

        init();
        animate();

        function init(){
            scene = new THREE.Scene();

            container = document.getElementById('container');

            camera = new THREE.PerspectiveCamera(fov,window.innerWidth/window.innerHeight,near,far);
            camera.position.z = 180;
            camera.lookAt(scene.position);


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


            var cubeGeometry = new THREE.CubeGeometry(30,30,30);
            var cubeMaterial = new THREE.MeshLambertMaterial({color:0xff0000 });
            mesh = new THREE.Mesh(cubeGeometry,cubeMaterial);


            scene.add(mesh);

            renderer = new THREE.WebGLRenderer({antialias:true});
            renderer.setSize(window.innerWidth,window.innerHeight);

            container.appendChild(renderer.domElement);

            document.addEventListener('mousewheel',onDocumentMouseMove,false);
            window.addEventListener( 'resize', onWindowResize, false );
        }

        function onDocumentMouseMove(){
            event.preventDefault();//阻止浏览器的默认操作

            if(event.wheelDelta){//IE,chrome
                if(event.wheelDelta>0){//向上滚动
                    fov -= (near<fov?1:0);
                }

                if(event.wheelDelta<0){
                    fov+=(fov<far?1:0);
                }
            }else if(event.detail){//firefox
                if(event.detail>0){
                    fov-=1;
                }else{
                    fov+=1;
                }
            }
            camera.fov = fov;
            camera.updateProjectionMatrix();
            //renderer.render(scene,camera);
        }

        function onWindowResize(){

            camera.aspect = window.innerWidth/window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize(window.innerWidth,window.innerHeight);

        }




        function animate(){

            requestAnimationFrame(animate);

            render();

        }

        function render(){

            renderer.render( scene, camera );

        }

    });
</script>


</body>
</html>

King.W.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
three.js手写缩放

效果图：其实就是手动修改相机的fov参数。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>手动旋转相机</title> <script type="text/javascript" src="../libs/three.js"></script> <script type=
复制链接

扫一扫

专栏目录