devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

ThreeJS基本坐标设置_threejs修改默认坐标

作者：繁依Fanyi0 | 2024-02-16 18:17:37

赞

踩

threejs修改默认坐标

1    绘制基本的场景面板，XY平面绘制网格线，建立起基本的坐标。左右为为X轴，右为正；前后为Y轴，前为正；山下为Z轴，上为正。

2     ThreeJS中的点对象，比如：默认都用 camera.lookAt(scene.position);其实，也可以自己修改： camera.lookAt(new THREE.Vector3(0, 0, 0));

 3     线条绘制：

       var geometryX = new THREE.Geometry();
        geometryX.vertices.push(new THREE.Vector3(-12,0,0),new THREE.Vector3( 12,0,0));
        var materialX = new THREE.LineBasicMaterial({ color: 0xff0000 });
        var lineX = new THREE.Line(geometryX, materialX);   
        scene.add(lineX);

        也可以绘制多条线段，Line：单纯线条；LineLoop：封闭区间；LineSegments：每两个顶点一条线段

4   直接上代码

  1. <html>
  2. <head>
  3.     <title>第2个threejs三维场景</title>
  4.     <style type="text/css">
  5.         body
  6.         {
  7.             margin: 0;
  8.             overflow: hidden; /* 隐藏body窗口区域滚动条 */
  9.         }
  10.     </style>
  11.     <!--引入three.js三维引擎-->
  12.  
  13.     <script type="text/javascript" src="threejsmaster/build/three.js"></script>
  14.     <script type="text/javascript" src="threejsmaster/build/js/controls/OrbitControls.js"></script>
  15.     <script type="text/javascript" src="threejsmaster/build/js/libs/dat.gui.min.js"></script>
  16.  
  17. </head>
  18. <body>
  19.     <!-- 作为Three.js渲染器输出元素 -->
  20.     <div id="WebGLwxp" style="width: 600px; height: 450px;">
  21.     </div>
  22.  
  23.     <script type="text/javascript">
  24.  
  25.         //网页加载完毕后会被调用
  26.         function init() {
  27.  
  28.             //创建一个场景（场景是一个容器，用于保存、跟踪所要渲染的物体和使用的光源）
  29.             var scene = new THREE.Scene();
  30.  
  31.             //创建一个摄像机对象（摄像机决定了能够在场景里看到什么）
  32.             var camera = new THREE.PerspectiveCamera(45,
  33.           window.innerWidth / window.innerHeight, 0.1, 200);
  34.  
  35.             //设置摄像机的位置，并让其指向场景的中心（0,0,0）
  36.             camera.position.set(10.0, -20, 13);
  37.             camera.up.set(0, 0, 1);
  38.             // camera.lookAt(scene.position);
  39.             camera.lookAt(new THREE.Vector3(0, 0, 0));
  40.  
  41.             //线条绘制：
  42.             //Line：单纯线条；LineLoop：封闭区间；LineSegments：每两个顶点一条线段
  43.             //绘制X坐标
  44.             var geometryX = new THREE.Geometry();
  45.             geometryX.vertices.push(new THREE.Vector3(-12, 0, 0), new THREE.Vector3(12, 0, 0));
  46.             var materialX = new THREE.LineBasicMaterial({ color: 0xff0000 });
  47.             var lineX = new THREE.Line(geometryX, materialX);
  48.             scene.add(lineX);
  49.  
  50.             //绘制Y坐标
  51.             var geometryY = new THREE.Geometry();
  52.             geometryY.vertices.push(new THREE.Vector3(0, -12, 0), new THREE.Vector3(0, 12, 0));
  53.             var materialY = new THREE.LineBasicMaterial({ color: 0x00ff00 });
  54.             var lineY = new THREE.Line(geometryY, materialY);
  55.             scene.add(lineY);
  56.  
  57.             //绘制Z坐标
  58.             var geometryZ = new THREE.Geometry();
  59.             geometryZ.vertices.push(new THREE.Vector3(0, 0, 0), new THREE.Vector3(0, 0, 12));
  60.             var materialZ = new THREE.LineBasicMaterial({ color: 0x0000ff });
  61.             var lineZ = new THREE.Line(geometryZ, materialZ);
  62.             scene.add(lineZ);
  63.  
  64.             //绘制XY平面
  65.             //绘制平行于X的线条
  66.             geometry = new THREE.Geometry();
  67.             geometry.vertices.push(new THREE.Vector3(-10.5, 0, 0), new THREE.Vector3(10.5, 0, 0));
  68.             material = new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.5 });
  69.             for (var index = 0; index < 11; index++) {
  70.                 if (index == 5) continue; //中间不绘制
  71.                 var lineX = new THREE.Line(geometry, material);
  72.                 lineX.position.y = (index * 2) - 10
  73.                 scene.add(lineX);
  74.             }
  75.  
  76.             //绘制平行于Y的线条
  77.             geometry = new THREE.Geometry();
  78.             geometry.vertices.push(new THREE.Vector3(0, -10.5, 0), new THREE.Vector3(0, 10.5, 0));
  79.             material = new THREE.LineBasicMaterial({ color: 0xffffff, opacity: 0.5 });
  80.             for (var index = 0; index < 11; index++) {
  81.                 if (index == 5) continue; //中间不绘制
  82.                 var lineX = new THREE.Line(geometry, material);
  83.                 lineX.position.x = (index * 2) - 10
  84.                 scene.add(lineX);
  85.             }
  86.  
  87.             //创建一个WebGL渲染器并设置其大小,设置抗锯齿设置
  88.             var renderer = new THREE.WebGLRenderer({antialias: true });
  89.             renderer.setClearColor(new THREE.Color(0x7696f1));
  90.             renderer.setSize(window.innerWidth, window.innerHeight);
  91.             renderer.setPixelRatio(window.devicePixelRatio); //框锯齿设置
  92.  
  93.             //创建一个立方体
  94.             var cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
  95.  
  96.             //将线框（wireframe）属性设置为true，这样物体就不会被渲染为实物物体
  97.             var cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 });
  98.             var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
  99.             cube.castShadow = true;
  100.  
  101.             //设置立方体的位置
  102.             cube.position.set(0, 0, 0);
  103.             //将立方体添加到场景中
  104.             scene.add(cube);
  105.  
  106.             //系统坐标系标定
  107.             // var axesHelper = new THREE.AxesHelper(100); 
  108.             // scene.add(axesHelper);
  109.  
  110.             //创建点光源 正上面
  111.             var spotLight = new THREE.SpotLight(0xffffff);
  112.             spotLight.position.set(0, 0, 50);
  113.             spotLight.castShadow = true;
  114.             // scene.add(spotLight);
  115.  
  116.             //右上角
  117.             var spotLight2 = new THREE.SpotLight(0xffffff);
  118.             spotLight2.position.set(10, 10, 5);
  119.             spotLight.castShadow = true;
  120.             scene.add(spotLight2);
  121.  
  122.             //右下角
  123.             var spotLight3 = new THREE.SpotLight(0xffffff);
  124.             spotLight3.position.set(10, -10, 0);
  125.             spotLight3.castShadow = true;
  126.             scene.add(spotLight3);
  127.  
  128.             //左下角
  129.             var spotLight4 = new THREE.SpotLight(0xffffff);
  130.             spotLight4.position.set(-10, -10, -5);
  131.             spotLight4.castShadow = true;
  132.             scene.add(spotLight4);
  133.  
  134.             //将渲染的结果输出到指定页面元素中
  135.             document.getElementById("WebGLwxp").appendChild(renderer.domElement);
  136.  
  137.             //存放有所有需要改变的属性的对象
  138.             var controls = new function() {
  139.                 this.rotationSpeed = 0.02;
  140.                 this.cubPositionX = 0.00;
  141.                 this.cubPositionY = 0.00;
  142.                 this.cubPositionZ = 0.00;
  143.  
  144.                 this.camerPositionX = 10.00;
  145.                 this.camerPositionY = -20.00;
  146.                 this.camerPositionZ = 13.00;
  147.             };
  148.  
  149.             //创建dat.GUI，传递并设置属性
  150.             var gui = new dat.GUI();
  151.             gui.add(controls, 'rotationSpeed', 0, 0.5);
  152.             gui.add(controls, 'cubPositionX', -10.0, 10.0);
  153.             gui.add(controls, 'cubPositionY', -10.0, 10.0);
  154.             gui.add(controls, 'cubPositionZ', -10.0, 10.0);
  155.  
  156.             gui.add(controls, 'camerPositionX', -40.0, 20.0);
  157.             gui.add(controls, 'camerPositionY', -40.0, 10.0);
  158.             gui.add(controls, 'camerPositionZ', 0.0, 40.0);
  159.             //渲染场景
  160.             render();
  161.  
  162.             //渲染场景
  163.             function render() {
  164.  
  165.                 cube.rotation.z += controls.rotationSpeed;
  166.                 cube.position.x = controls.cubPositionX;
  167.                 cube.position.y = controls.cubPositionY;
  168.                 cube.position.z = controls.cubPositionZ;
  169.  
  170.                 camera.position.x = controls.camerPositionX;
  171.                 camera.position.y = controls.camerPositionY;
  172.                 camera.position.z = controls.camerPositionZ;
  173.  
  174.  
  175.                 //通过requestAnimationFrame方法在特定时间间隔重新渲染场景
  176.                 requestAnimationFrame(render);
  177.                 //渲染场景
  178.                 renderer.render(scene, camera);
  179.             }
  180.             //innit结束
  181.         }
  182.  
  183.         //确保init方法在网页加载完毕后被调用
  184.         window.onload = init;
  185.  
  186.     </script>
  187.  
  188. </body>
  189. </html>

最后是效果图 ,

           //创建一个WebGL渲染器并设置其大小,设置抗锯齿设置
            var renderer = new THREE.WebGLRenderer({antialias: true });
            renderer.setClearColor(new THREE.Color(0x7696f1));
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setPixelRatio(window.devicePixelRatio); //框锯齿设置 

  锯齿处理前后，效果很明显

       

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

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

  

闽ICP备14008679号