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

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     
    6.     <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js">script>
    7.     <script src="three/OrbitControls.js">script>
    8. head>
    9.  
    10. <body>
    11. <script>
    12.     /**
    13.      * 创建场景对象Scene
    14.      */
    15.     var scene = new THREE.Scene();
    16.  
    17.     /**
    18.      * 相机设置
    19.      */
    20.     //窗口宽度
    21.     var width = window.innerWidth;
    22.     //窗口高度
    23.     var height = window.innerHeight;
    24.     //窗口宽高比
    25.     var k = width / height;
    26.     //三维场景显示范围控制系数，系数越大，显示的范围越大
    27.     var s = 200;
    28.     //创建相机对象
    29.     var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    30.     //设置相机位置
    31.     camera.position.set(200, 300, 200);
    32.     //设置相机方向(指向的场景对象)
    33.     camera.lookAt(scene.position);
    34.  
    35.     /**
    36.      * 光源设置
    37.      */
    38.         //新建点光源（常用光源分为点光源和环境光，点光源的效果类似灯泡，环境光的效果类似白天的太阳光）
    39.     var point = new THREE.PointLight(0xffffff);
    40.     //设置点光源的位置
    41.     point.position.set(400, 200, 300);
    42.     //将点光源添加到场景中
    43.     scene.add(point);
    44.     
    45.  
    46.     /**
    47.      * 创建网格模型，也就是3D模型
    48.      */
    49.     //创建一个立方体几何对象Geometry
    50.     var geometry = new THREE.BoxGeometry(100, 100, 100);
    51.     //给几何体创建材质，这里是改为蓝色，材质对象Material
    52.     var material = new THREE.MeshLambertMaterial({
    53.         color: 0x0000ff
    54.     });
    55.     //网格模型对象Mesh
    56.     var mesh = new THREE.Mesh(geometry, material);
    57.     //网格模型添加到场景中，每个模型最终都要添加到场景中才会被渲染
    58.     scene.add(mesh);
    59.  
    60.     /**
    61.      * 创建渲染器对象
    62.      */
    63.     //创建渲染器对象（渲染要等所有东西都加进去再渲染场景，创建和3D模型和光源没有先后顺序）
    64.     var renderer = new THREE.WebGLRenderer();
    65.     //设置渲染区域尺寸（设置的是整个屏幕的长度和宽度
    66.     renderer.setSize(width, height);
    67.     //设置渲染的背景色
    68.     renderer.setClearColor(0xb9d3ff, 1);
    69.     //body元素中插入canvas对象，也可以在页面中添加div，并加上id，通过id指定在某个div中渲染
    70.     document.body.appendChild(renderer.domElement);
    71.     //执行渲染操作   指定场景、相机作为参数
    72.     renderer.render(scene, camera);
    73.     
    74.     
    75.     //创建鼠标控制器    
    76.     let controls = new THREE.OrbitControls(camera, renderer.domElement );
    77.     //监听控制器，每次拖动后重新渲染画面
    78.     controls.addEventListener('change', function () {
    79.         renderer.render(scene, camera); //执行渲染操作
    80.     });
    81.  
    82. script>
    83. body>
    84. html>

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

  • 相关阅读:
    1.TypeScript变量和编译选项
    【WEEK15】学习目标及总结【Spring Boot】【中文版】
    【Linux修炼手册：基本指令（上）】
    MySQL (6)
    【共享单车数据专题】共享单车数据有哪些应用？
    LeetCode-50-Pow(x, n)
    Razor、ASPX 语法分析
    Vue中axios的基本用法
    翻译软件免费版下载
    2016-2023全国MPA国家A类线趋势图：浙大MPA要高多少？
  • 原文地址：https://blog.csdn.net/qq_26881073/article/details/133393552