devbox
凡人多烦事01
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

ThreeJs 导入外部三维模型，并实现鼠标滚动放大缩小旋转效果_threejs怎么旋转导入模型

作者：凡人多烦事01 | 2024-02-21 07:45:42

赞

踩

threejs怎么旋转导入模型

  1. let i = 0;
  2. function init() {
  3.     // create a scene, that will hold all our elements such as objects, cameras and lights.
  4.     var scene = new THREE.Scene();
  5.     // create a camera, which defines where we're looking at.
  6.     var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
  7.     var renderer = new THREE.WebGLRenderer();
  8.     var axes = new THREE.AxesHelper(20);
  9.     var controls = new THREE.TrackballControls(camera);     //创建场景旋转缩放事件
  10.  
  11.     camera.position.set(-30, 40, 30);
  12.     camera.lookAt(scene.position);
  13.  
  14.     renderer.setClearColor(new THREE.Color(0xcccccc));  // 设置渲染面板颜色
  15.     renderer.setSize(window.innerWidth, window.innerHeight);    // 设置渲染面板长宽
  16.  
  17.     // // show axes in the screen
  18.     // 显示三维坐标轴
  19.     scene.add(axes);
  20.     
  21.     controls = new THREE.TrackballControls(camera);     //创建场景旋转缩放事件
  22.     controls.rotateSpeed = 2.5;
  23.     controls.zoomSpeed = 1.2;
  24.     controls.panSpeed = 0.8;
  25.     controls.noZoom = false;
  26.     controls.noPan = false;
  27.     controls.staticMoving = true;
  28.     controls.dynamicDampingFactor = 0.3;
  29.     // create a render and set the size
  30.     // 设置渲染面板属性
  31.     
  32.     
  33.     // create the ground plane
  34.     // var planeGeometry = new THREE.PlaneGeometry(60, 20);
  35.     // var planeMaterial = new THREE.MeshBasicMaterial({
  36.     //     color: 0xAAAAAA
  37.     // });
  38.     // var plane = new THREE.Mesh(planeGeometry, planeMaterial);
  39.  
  40.     // // rotate and position the plane
  41.     // plane.rotation.x = -0.5 * Math.PI;
  42.     // plane.position.set(15, 0, 0);
  43.  
  44.     // // add the plane to the scene
  45.     // scene.add(plane);
  46.  
  47.     // create a cube
  48.     
  49.  
  50.     // position the cube
  51.     // cube.position.set(-4, 3, 0);
  52.     // add the cube to the scene
  53.     
  54.  
  55.     // create a sphere
  56.     // var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
  57.     // var sphereMaterial = new THREE.MeshBasicMaterial({
  58.     //     color: 0x7777FF,
  59.     //     wireframe: true
  60.     // });
  61.     // var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
  62.  
  63.     // // position the sphere
  64.     // sphere.position.set(20, 4, 2);
  65.  
  66.     // // add the sphere to the scene
  67.     // scene.add(sphere);
  68.  
  69.     // position and point the camera to the center of the scene
  70.  
  71.     // add the output of the renderer to the html element
  72.  
  73.     // render the scene
  74.     let addT = null;
  75.     let redt = null;
  76.     let timeAdd = null;
  77.     let timeDel = null;
  78.     let step = 1;
  79.     let frequ = 100;
  80.     // 数值增加到制定数字
  81.     function add (dis) {
  82.         clearInterval(timeDel);
  83.         timeAdd = setInterval(() => {
  84.             if (i < dis) {
  85.                 i++;
  86.                 intCub();
  87.             } else {
  88.                 clearInterval(timeAdd);
  89.                 // del(0);
  90.             }
  91.             console.log(i);
  92.         }, frequ);
  93.     };
  94.     // 数值减少到制定数字
  95.     function del (dis) {
  96.         clearInterval(timeAdd);
  97.         timeDel = setInterval(() => {
  98.             if (i > dis) {
  99.                 i--;
  100.                 intCub();
  101.             } else {
  102.                 val = dis;
  103.                 clearInterval(timeDel);
  104.                 add(50)
  105.             }
  106.             console.log(i);
  107.         }, frequ);
  108.     };
  109.     
  110.     function intCub () {
  111.         let random = parseInt(1 + (4 - 1) * (Math.random()));   // 随机数用于正方体的长宽高
  112.         let randomC = parseInt(1 + (2 - 1) * (Math.random()));  // 随机数用于球形的半径
  113.         let colorRandomNum = parseInt(1 + (7 - 1) * (Math.random()));  // 随机数用于赋值后续的物体的材质颜色
  114.         let randomColor = [0xF7CE18, 0x2550EC, 0x57E10C, 0xEB6F0A, 0xEB0AE9, 0x820745, 0x8D11D8];
  115.  
  116.         // 配置灯光
  117.         let light = new THREE.AmbientLight(0x820745);
  118.         light.position.set(100, 100, 200);
  119.                 
  120.         // 生成正方体
  121.         var cubeGeometry = new THREE.BoxGeometry(random, random, random);   // 长宽高
  122.         // 给正方体网格添加材质
  123.         var cubeMaterial = new THREE.MeshBasicMaterial({
  124.             color: randomColor[colorRandomNum],
  125.             wireframe: false  // 是否显示网格状态
  126.         });
  127.         var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);  // 将材质贴到模型上
  128.  
  129.         // 生成原型
  130.         var sphereGeometry = new THREE.SphereGeometry(randomC, 200, 200);  // 半径和网格数，网格数表示球体的粗糙程度
  131.         var sphereMaterial = new THREE.MeshBasicMaterial({
  132.             color: randomColor[colorRandomNum],
  133.             wireframe: false   // 是否显示网格状态
  134.         });
  135.         var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);  // 将材质贴到模型上
  136.  
  137.         // position the sphere
  138.         // 设置球体的位置
  139.         sphere.position.set(parseInt(-10 + (25 - 1) * (Math.random())), parseInt(-10 + (25 - 1) * (Math.random())), parseInt(-10 + (25 - 1) * (Math.random())));
  140.         
  141.         // 设置正方体的位置
  142.         cube.position.set(parseInt(-10 + (25 - 1) * (Math.random())), parseInt(-10 + (25 - 1) * (Math.random())), parseInt(-10 + (25 - 1) * (Math.random())));
  143.         // add the sphere to the scene
  144.         // 将贴好材质的模型和灯光添加到场景
  145.         scene.add(sphere);  
  146.         scene.add(cube);
  147.         scene.add(light);
  148.         //声明raycaster和mouse变量
  149.         var raycaster = new THREE.Raycaster();
  150.         var mouse = new THREE.Vector2();
  151.         // 绑定点击事件
  152.         function onMouseClick( event ) {
  153.             //通过鼠标点击的位置计算出raycaster所需要的点的位置，以屏幕中心为原点，值的范围为-1到1.
  154.             mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
  155.             mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
  156.  
  157.             // 通过鼠标点的位置和当前相机的矩阵计算出raycaster
  158.             raycaster.setFromCamera( mouse, camera );
  159.             // 获取raycaster直线和所有模型相交的数组集合
  160.             var intersects = raycaster.intersectObjects(scene.children);
  161.             console.log(intersects);
  162.             //将所有的相交的模型的颜色设置为红色，如果只需要将第一个触发事件，那就数组的第一个模型改变颜色即可
  163.             for ( var i = 0; i < intersects.length; i++ ) {
  164.                 intersects[i].object.material.color.set(0x000000);
  165.                 let msg = JSON.stringify(intersects[i]);
  166.                 document.querySelector('.msg .content').innerHTML = msg;
  167.             }
  168.             // alert('我点击了对象，对象信息已经在控制台打印出来');
  169.             renderer.render(scene, camera); // 渲染场景中的模型
  170.         }
  171.         // // window.removeEventListener('click', onMouseClick);
  172.         // document.onmousedown = function(event) {
  173.         //     document.onmousemove = function () {
  174.         //         controls.update();
  175.         //         renderer.render(scene, camera); // 渲染场景中的模型
  176.         //     }
  177.         // }
  178.         // document.onmouseup = function(event) {
  179.         //     document.onmousemove = null
  180.         // }
  181.         document.getElementById("webgl-output").appendChild(renderer.domElement);
  182.         // 定时鼠标点击移动或者滚轮滚动的时候要触发渲染事件，画面是不会跟着放大缩小旋转
  183.         setInterval(() => {
  184.             controls.update();
  185.             renderer.render(scene, camera); // 渲染场景中的模型
  186.         }, 5);
  187.         // renderer.render(scene, camera); // 渲染场景中的模型
  188.  
  189.         /**************加载模型************** */
  190.         var loader = new THREE.OBJLoader();//在init函数中，创建loader变量，用于导入模型
  191.         let i = 0.04;
  192.         let step = 0.02;
  193.         let v = 0;
  194.         loader.load(
  195.             // 资源链接
  196.             'http://10.1.252.90:8080/src/chapter-01/models/man.obj',
  197.             // 资源加载完成后的回调函数
  198.             function (object) {
  199.                 console.log(object);
  200.                 object.position.set(0, 0, 0);
  201.                 object.rotation.z = 3.1415927;  // 纠正导入
  202.                 var ms = new THREE.MeshBasicMaterial({
  203.                     color: 0xcccccc,
  204.                     wireframe: true  // 是否显示网格状态
  205.                 });
  206.                 scene.add(object);
  207.                 
  208.                 renderer.render(scene, camera); // 渲染场景中的模型
  209.                 window.addEventListener('click', onMouseClick, false);
  210.                 // // var sphere = new THREE.Mesh(object, ms);  // 将材质贴到模型上
  211.                 setInterval(() => {
  212.                     i += step;
  213.                     object.rotation.y = i;
  214.                     scene.add(object);
  215.                     // renderer.render(scene, camera); // 渲染场景中的模型
  216.                 }, 10);
  217.             }
  218.         );
  219.         /**************加载模型************** */
  220.     };
  221.     // 运行渲染
  222.     add (10);
  223.     intCub();
  224.     
  225. }
  1. <!DOCTYPE html>
  2.  
  3. <html>
  4.  
  5. <head>
  6.     <title>Example 01.02 - First Scene</title>
  7.     <meta charset="UTF-8" />
  8.     <script type="text/javascript" charset="UTF-8" src="../../libs/three/three.js"></script>
  9.     <script type="text/javascript" charset="UTF-8" src="../../libs/three/loaders/OBJLoader.js"></script>
  10.     <script type="text/javascript" charset="UTF-8" src="../../libs/three/controls/TrackballControls.js"></script>
  11.     <script type="text/javascript" charset="UTF-8" src="../../libs/three/controls/DragControls.js"></script>
  12.     
  13.     <link rel="stylesheet" href="../../css/default.css">
  14.     <style>
  15.         #render{
  16.             position: fixed;
  17.             left: 20px;
  18.             top: 30px;
  19.             height: 40px;
  20.             width: 120px;
  21.         }
  22.         .msg{
  23.             position: absolute;
  24.             left: 10px;
  25.             top: 10px;
  26.             height: 600px;
  27.             min-height: 550px;
  28.             overflow:scroll;
  29.             width: 500px;
  30.             background: #fff;
  31.             border: 2px solid #eee;
  32.         }
  33.         h3{
  34.             padding: 0;
  35.             margin: 0;
  36.             text-align: center;
  37.         }
  38.     </style>
  39. </head>
  40.  
  41. <body>
  42.  
  43.     <!-- Div which will hold the Output -->
  44.     <div id="webgl-output"></div>
  45.     <div class="msg">
  46.         <h3>鼠标点击的对象信息</h3>
  47.         <div class="content"></div>
  48.     </div>
  49.     <script type="text/javascript" src="./js/01-02.js"></script>
  50.     <!-- Javascript code that runs our Three.js examples -->
  51.     <script type="text/javascript">
  52.         (function () {
  53.             // your page initialization code here
  54.             // the DOM will be available here
  55.             init();
  56.         })();
  57.     </script>
  58.     
  59. </body>
  60.  
  61. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/121678
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号