Three.js控制相机

最新推荐文章于 2024-07-11 09:22:48 发布

King.W.

最新推荐文章于 2024-07-11 09:22:48 发布

阅读量5.4k

点赞数 2

分类专栏： Three.js 文章标签： three-js 相机

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

版权

Three.js 专栏收录该内容

21 篇文章 15 订阅

订阅专栏

先看效果：
这里写图片描述

<!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;

        //这个mouseX和mouseY 记录的是鼠标相对于屏幕中心的位置，所以mouseX的范围是[-屏幕宽的一半，屏幕宽的一半]，mouseY的范围是[-屏幕高的一半，屏幕高的一半]
        var mouseX = 0,mouseY = 0;

        var windowHalfX = window.innerWidth/2;
        var windowHalfY = window.innerHeight/2;

        init();
        animate();

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

            container = document.getElementById('container');

            camera = new THREE.PerspectiveCamera(40,window.innerWidth/window.innerHeight,1,1000);
            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('mousemove',onDocumentMouseMove,false);
            window.addEventListener( 'resize', onWindowResize, false );
        }

        function onWindowResize(){

            windowHalfX = window.innerWidth/2;
            windowHalfY = window.innerHeight/2;

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

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

        }

        function onDocumentMouseMove(){

            //因为世界坐标系的原点在屏幕的中心，所以，将屏幕实际坐标减去屏幕宽高的一半，就将屏幕坐标的坐标原点移到世界坐标系的原点。
            mouseX = (event.clientX-windowHalfX);
            mouseY = (event.clientY-windowHalfY);

        }

        function animate(){

            requestAnimationFrame(animate);

            render();

        }

        function render(){

            //根据mouseX和mouseY改变相机的坐标
            camera.position.x += (mouseX - camera.position.x);
            camera.position.y += (mouseY - camera.position.y);

            camera.lookAt(scene.position);


            renderer.render( scene, camera );

        }

    });
</script>


</body>
</html>

King.W.

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
Three.js控制相机

先看效果： <!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
复制链接

扫一扫

专栏目录