threejs论坛

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 5684|回复: 0

07 Three.js内置几何

[复制链接]

227

主题

203

帖子

589

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
589
发表于 2021-1-3 10:46:56 | 显示全部楼层 |阅读模式


这个案例是官方案例,个人通过一个一个测试备注,感受模型如何配置参数,来生成理想的形状。three.js内置的这些几何确实够平常使用,还可以通过顶点实现效果。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Three框架</title>
  6.     <script src="https://www.wjceo.com/lib/three.js"></script>
  7.     <style type="text/css">
  8.         html, body {
  9.             margin: 0;
  10.             height: 100%;
  11.         }

  12.         canvas {
  13.             display: block;
  14.         }

  15.     </style>
  16.     <script>
  17.         //渲染器
  18.         var renderer;
  19.         function initRender() {
  20.             width = window.innerWidth;
  21.             height = window.innerHeight;
  22.             renderer = new THREE.WebGLRenderer({
  23.                 antialias: true
  24.             });
  25.             //设置canvas尺寸
  26.             renderer.setSize(width, height);
  27.             //设置背景
  28.             renderer.setClearColor(0x000000, 1.0);
  29.             //设置设备像素比
  30.             renderer.setPixelRatio( window.devicePixelRatio );
  31.             //添加到dom
  32.             document.body.appendChild(renderer.domElement);
  33.         }

  34.         //相机
  35.         var camera;
  36.         function initCamera() {
  37.             camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
  38.             camera.position.y = 400;
  39.         }

  40.         //场景
  41.         var scene;
  42.         function initScene() {
  43.             scene = new THREE.Scene();
  44.         }

  45.         //光源
  46.         var light;
  47.         function initLight() {
  48.             //添加环境光
  49.             scene.add(new THREE.AmbientLight( 0x404040));

  50.             //添加平衡光
  51.             light = new THREE.DirectionalLight( 0xffffff );
  52.             light.position.set(0,1,0);
  53.             scene.add(light);
  54.         }

  55.         //模型
  56.         function initModel() {
  57.             //通过加载图片生成一个纹理
  58.             var map = new THREE.TextureLoader().load("/lib/textures/UV_Grid_Sm.jpg");
  59.             //定义纹理在水平和垂直方向简单的重复到无穷大。
  60.             map.wrapS = map.wrapT = THREE.RepeatWrapping;
  61.             //定义纹理的各向异性
  62.             map.anisotropy = 16;

  63.             //定义兰伯特网孔材质
  64.             var material = new THREE.MeshLambertMaterial({map:map,side:THREE.DoubleSide});

  65.             //球形网格 (半径长度,水平块的密度,垂直块的密度)
  66.             object = new THREE.Mesh( new THREE.SphereGeometry(75,20,10), material);
  67.             object.position.set( -400, 0, 200 );
  68.             scene.add(object);

  69.             //二十面体 (图形大小半径,大于零将不是二十面体,越大越圆滑)
  70.             object = new THREE.Mesh( new THREE.IcosahedronGeometry( 75, 0 ), material );
  71.             object.position.set( -200, 0, 200 );
  72.             scene.add( object );

  73.             //八面体(图形大小半径,大于零将不是八面体,越大越圆滑)
  74.             object = new THREE.Mesh( new THREE.OctahedronGeometry( 75, 0 ), material );
  75.             object.position.set( 0, 0, 200 );
  76.             scene.add( object );

  77.             //四面体(图形大小半径,大于零将不是四面体,越大越圆滑)
  78.             object = new THREE.Mesh( new THREE.TetrahedronGeometry( 75, 0 ), material );
  79.             object.position.set( 200, 0, 200 );
  80.             scene.add( object );

  81.             //长方形平面 (x轴宽度,y轴高度,x方向分段数,y方向分段数)
  82.             object = new THREE.Mesh( new THREE.PlaneGeometry( 100, 100, 1, 1 ), material );
  83.             object.position.set( -400, 0, 0 );
  84.             scene.add( object );

  85.             //立方体 (x轴宽度,y轴高度,z轴深度,沿宽面分段数,沿高度面分段数,沿深度面分段数)
  86.             object = new THREE.Mesh( new THREE.BoxGeometry( 100, 100, 100, 1, 1, 1 ), material );
  87.             object.position.set( -200, 0, 0 );
  88.             scene.add( object );

  89.             //圆形平面 (半径,顶点密度,绘制起点弧度,绘制弧度)
  90.             object = new THREE.Mesh( new THREE.CircleGeometry( 50, 20, 0, Math.PI * 2 ), material );
  91.             object.position.set( 0, 0, 0 );
  92.             scene.add( object );

  93.             //空心圆平面 (内圆半径,外圆半径,分割面越大越圆滑,垂直外边分割面,开始绘制弧度,绘制弧度)
  94.             object = new THREE.Mesh( new THREE.RingGeometry( 10, 50, 10, 5, 0, Math.PI * 2 ), material );
  95.             object.position.set( 200, 0, 0 );
  96.             scene.add( object );

  97.             //圆柱体 (头部圆的半径,底部圆半径,高度,上下圆顶点个数,上下面切割线条数,上下面是否显示,开始弧度,绘制弧度)
  98.             object = new THREE.Mesh( new THREE.CylinderGeometry( 25, 75, 100, 40, 5 ), material );
  99.             object.position.set( 400, 0, 0 );
  100.             scene.add( object );

  101.             //车床模型
  102.             var points = [];

  103.             for ( var i = 0; i < 50; i ++ ) {

  104.                 points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * Math.sin( i * 0.1 ) * 15 + 50, ( i - 5 ) * 2 ) );

  105.             }

  106.             //(一个vector2的数组分别代表xy轴,生成圆周段的数目,开始弧度,绘制弧度)
  107.             object = new THREE.Mesh( new THREE.LatheGeometry( points, 20 ), material );
  108.             object.position.set( -400, 0, -200 );
  109.             scene.add( object );

  110.             //救生圈 (救生圈半径,管道直径,基于管道横切顶点数,救生圈横切顶点个数)
  111.             object = new THREE.Mesh( new THREE.TorusGeometry( 50, 20, 20, 20 ), material );
  112.             object.position.set( -200, 0, -200 );
  113.             scene.add( object );

  114.             //环面扭结模型 (图形半径,管道直径,基于管道横切定点数,根据图形半径横切顶点数,绕旋转对称轴的圈数,绕环面的圆的圈数)
  115.             object = new THREE.Mesh( new THREE.TorusKnotGeometry( 50, 10, 50, 20 ), material );
  116.             object.position.set( 0, 0, -200 );
  117.             scene.add( object );

  118.             //轴辅助 (每一个轴的长度)
  119.             object = new THREE.AxesHelper( 50 );
  120.             object.position.set( 200, 0, -200 );
  121.             scene.add( object );

  122.             //箭头辅助(箭头头的方向必须是vecteor3,箭头起点必须是vector3,箭头长度,颜色)
  123.             object = new THREE.ArrowHelper( new THREE.Vector3( 0, 1, 0 ), new THREE.Vector3( 0, 0, 0 ), 50 ,0x00ffff);
  124.             object.position.set( 400, 0, -200 );
  125.             scene.add( object );


  126.         }

  127.         function animate() {

  128.             requestAnimationFrame( animate );

  129.             render();
  130.             //stats.update();

  131.         }

  132.         function render() {

  133.             var timer = Date.now() * 0.0001;

  134.             camera.position.x = Math.cos( timer ) * 800;
  135.             camera.position.z = Math.sin( timer ) * 800;

  136.             camera.lookAt( scene.position );

  137.             for ( var i = 0, l = scene.children.length; i < l; i ++ ) {

  138.                 var object = scene.children[ i ];

  139.                 object.rotation.x = timer * 5;
  140.                 object.rotation.y = timer * 2.5;

  141.             }

  142.             renderer.render( scene, camera );

  143.         }

  144.         //窗口变动触发的函数
  145.         function onWindowResize() {

  146.             camera.aspect = window.innerWidth / window.innerHeight;
  147.             camera.updateProjectionMatrix();

  148.             renderer.setSize( window.innerWidth, window.innerHeight );

  149.         }

  150.         //绘制
  151.         function draw() {
  152.             initRender();
  153.             initCamera();
  154.             initScene();
  155.             initLight();
  156.             initModel();

  157.             animate();

  158.             window.addEventListener( 'resize', onWindowResize, false );
  159.         }



  160.     </script>
  161. </head>

  162. <body onload="draw();">
  163. </body>
  164. </html>
复制代码

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|threejs论坛 ( 京ICP备18014583号 )

GMT+8, 2023-12-2 00:08 , Processed in 0.017628 second(s), 19 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表