three.js从入门到放弃（三）

风舞红枫

已于 2022-01-31 15:54:46 修改

阅读量242

点赞数 1

分类专栏： three 文章标签： three.js

于 2021-03-07 10:55:38 首次发布

本文链接：https://blog.csdn.net/qq_42231248/article/details/114383811

版权

three 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

系列文章
three.js从入门到放弃（一）
three.js从入门到放弃（二）
three.js从入门到放弃（三）
three.js从入门到放弃（四）
three.js从入门到放弃（五）

继续在之前的基础上动态改变照相机的位置来实现画面旋转的效果

<!DOCTYPE html>
<html>
<head>
    <title>three.js初探</title>
    <script type="text/javascript" src="three.js"></script>
    <style type="text/css">
        *{margin:0;padding:0;}
        canvas{display:block;}
    </style>
</head>
<body>
<div id="fwhf"></div>
<script type="text/javascript">
    //创建一个渲染器       即默认创建一个canvas     antialias: true圆滑效果
    var renderer = new THREE.WebGLRenderer({antialias: true});
    //渲染器宽高     即canvas宽高
    renderer.setSize(window.innerWidth,window.innerHeight);
    //渲染器颜色     即canvas的底色  参数： 颜色 (rgb也行), 透明度
    renderer.setClearColor('#333',.5);
    //将渲染器添加到fwhf标签中    即将canvas添加至div中
    document.getElementById("fwhf").append(renderer.domElement);

    //创建一个场景
    var scene=new THREE.Scene();

    //生成一个坐标轴，辅助线，坐标轴的参数    rgb色对应xyz坐标轴
    var axes=new THREE.AxisHelper(20);
    //将辅助线添加至场景中
    scene.add(axes);

    //创建光源  参数：颜色，密度，距离 0无穷
    var light = new THREE.SpotLight(0xff0000,1,0);
    //设置光源的位置
    light.position.set(-100,60,100);
    //将光源添加至场景中
    scene.add(light);

    //创建光源  参数：颜色，密度，距离 0无穷
    var light2 = new THREE.SpotLight(0x00ff00,1,0);
    //设置光源的位置
    light2.position.set(100,60,100);
    //将光源添加至场景中
    scene.add(light2);

    //创建光源  参数：颜色，密度，距离 0无穷
    var light3 = new THREE.SpotLight(0x0000ff,1,0);
    //设置光源的位置
    light3.position.set(0,0,-100);
    //将光源添加至场景中
    scene.add(light3);

    //创建一个物体    正方体+材质
    for(var i = 0 ; i < 20 ; i++){
        var length = rand(4,9);
        var cube = new THREE.Mesh(
            new THREE.CubeGeometry(length,length,length),
            new THREE.MeshLambertMaterial({color:0xffffff})
            )
        //设置物体的位置
        cube.position.x=rand(-100,100);
        cube.position.y=rand(-50,50);
        cube.position.z=rand(-50,50);
        //为物体添加旋转
        var deg = rand(0,9);
        cube.rotation.x += deg;
        cube.rotation.y += deg;
        cube.rotation.z += deg;
        //将物体添加至场景
        scene.add(cube);
    }
    
    //创建一个相机    PerspectiveCamera透视相机   参数：视角，纵横比，进平面的距离，远平面的距离
    var camera=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
    //设置相机的位置
    camera.position.x=20;
    camera.position.y=20;
    camera.position.z=100;

    //通过修改照相机的位置来实现画面旋转的效果
    var deg = 0;
    var offsetX = -1;
    fwhf.onmousemove = function(e){
        var e = e || event;
        offsetX = e.offsetX;
    }
    var animate = function () {
        requestAnimationFrame( animate );
        if(offsetX > 0){
            if(offsetX > window.innerWidth/2+100){
                deg += 0.01;
            }else if(offsetX < window.innerWidth/2-100){
                deg += -0.01;
            }else{
                deg += 0;
            }
        }
        //实现沿Y轴旋转的效果，可将Y轴忽略看作是照相机在x与z轴所在的平面内的圆周运动
        camera.position.x = 20*Math.sin(deg)- 100*Math.cos(deg);
        camera.position.z = 100*Math.sin(deg) + 20*Math.cos(deg);
        camera.lookAt(scene.position);
        renderer.render( scene, camera );
    };

    animate();

    function rand(n,m){
        var c = m - n + 1;
        return Math.floor(Math.random() * c + n);
    }
</script>
</body>
</html>