ThreeJs的场景实现鼠标拖动旋转控制

前面一个章节中已经实现在场景中放置一个正方体,并添加灯光使得正方体可见。但是由于是静态的还不能证明是3D的,我们需要添加一些控制器,使得通过鼠标控制正方体可以动起来,实现真正的3D效果,由此引入OrbitControls组件,他实质是改变相机的位置,实现从不同角度看场景中的物体。下面源码中已经将控制的部分加入了,在最下方,注释也写的很详细了。OrbitControls组件如果找不到在线引用的可以到我的csdn中下载

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--引入three.js,这是使用three必须的js文件,此处引入的是外网提供的three文件,如果引入有问题可以到官网下载three文件后引入本地的theee.js文件-->
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
    <script src="three/OrbitControls.js"></script>
</head>

<body>
<script>
    /**
     * 创建场景对象Scene
     */
    var scene = new THREE.Scene();

    /**
     * 相机设置
     */
    //窗口宽度
    var width = window.innerWidth;
    //窗口高度
    var height = window.innerHeight;
    //窗口宽高比
    var k = width / height;
    //三维场景显示范围控制系数,系数越大,显示的范围越大
    var s = 200;
    //创建相机对象
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    //设置相机位置
    camera.position.set(200, 300, 200);
    //设置相机方向(指向的场景对象)
    camera.lookAt(scene.position);

    /**
     * 光源设置
     */
        //新建点光源(常用光源分为点光源和环境光,点光源的效果类似灯泡,环境光的效果类似白天的太阳光)
    var point = new THREE.PointLight(0xffffff);
    //设置点光源的位置
    point.position.set(400, 200, 300);
    //将点光源添加到场景中
    scene.add(point);
    

    /**
     * 创建网格模型,也就是3D模型
     */
    //创建一个立方体几何对象Geometry
    var geometry = new THREE.BoxGeometry(100, 100, 100);
    //给几何体创建材质,这里是改为蓝色,材质对象Material
    var material = new THREE.MeshLambertMaterial({
        color: 0x0000ff
    });
    //网格模型对象Mesh
    var mesh = new THREE.Mesh(geometry, material);
    //网格模型添加到场景中,每个模型最终都要添加到场景中才会被渲染
    scene.add(mesh);

    /**
     * 创建渲染器对象
     */
    //创建渲染器对象(渲染要等所有东西都加进去再渲染场景,创建和3D模型和光源没有先后顺序)
    var renderer = new THREE.WebGLRenderer();
    //设置渲染区域尺寸(设置的是整个屏幕的长度和宽度
    renderer.setSize(width, height);
    //设置渲染的背景色
    renderer.setClearColor(0xb9d3ff, 1);
    //body元素中插入canvas对象,也可以在页面中添加div,并加上id,通过id指定在某个div中渲染
    document.body.appendChild(renderer.domElement);
    //执行渲染操作   指定场景、相机作为参数
    renderer.render(scene, camera);
    
    
    //创建鼠标控制器    
    let controls = new THREE.OrbitControls(camera, renderer.domElement );
    //监听控制器,每次拖动后重新渲染画面
    controls.addEventListener('change', function () {
        renderer.render(scene, camera); //执行渲染操作
    });

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

如果有问题,可以在我的评论区留言

相关推荐
gis分享者2 天前
学习threejs,使用PointLight点光源
threejs·点光源·pointlight
gis分享者6 天前
学习threejs,使用HemisphereLight半球光
threejs·hemispherelight·半球光
gis分享者10 天前
学习threejs,使用Lensflare模拟镜头眩光
threejs·lensflare·眩光
gis分享者13 天前
学习threejs,tga格式图片文件贴图
threejs·贴图·tga·tgaloader
gis分享者14 天前
学习threejs,pvr格式图片文件贴图
threejs·贴图·pvr
gis分享者1 个月前
学习threejs,使用OrbitControls相机控制器
threejs·相机·相机控制器·orbitcontrols
不系舟1781 个月前
threejs 实现镜面反射,只反射指定物体,背景透明
threejs
gis分享者1 个月前
学习threejs,使用RollControls相机控制器
threejs·相机控制器·rollcontrols
gis分享者1 个月前
学习threejs,使用FlyControls相机控制器
threejs·相机控制器·flycontrols
gis分享者1 个月前
学习threejs,使用TrackballControls相机控制器
threejs·trackball·相机控制器