我是程序猿

注册

 

发新话题 回复该主题

ThreeJS学习一点一滴 [复制链接]

1#
1.3dmax 2020
2.大牛提供的JD格式模型,支持动画
插件地址:http://www.cgdev.net/json/download.php

2.threejs API中文在线帮助文档:https://techbrood.com/threejs/docs/
证实中文API不全面,全面内容还是需要查看
官方API:https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene

3.threejs Demo在线:https://threejs.org/examples/#webgl_animation_cloth

4.学习大牛:https://www.cnblogs.com/yeyunfei/p/11151890.html

5.ThreeJS坐标获取:
  1. var rect = _domElement.getBoundingClientRect();

  2. _mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
  3. _mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
复制代码
6.挺不错的初学者教程:https://www.ituring.com.cn/book/1272

7.一点自己的理解:
threejs将画布划分为4个象限的坐标系,象限长度为1,
设画布上一点的实际X坐标X1,画布宽度为width,threejs象限坐标X为X2。
则有公式:X1/width=(1+X2)/2,
经过推导可以得到公式:X2=(X1/width)*2-1。
通过以上公式推导我们也可以明白threejs里为什么经常用到的(clientX/width)*2-1来模拟坐标了

8.纠结很久的模型定位问题终于解决了:
  1. var lookAt = obj.position.clone();
  2.                 var camerap = lookAt.clone();
  3.                 camerap.x += 12.5 * bs.radius;
  4.                 camerap.y += 12.5 * bs.radius;
  5.                 camerap.z += 12.5 * bs.radius;

  6.                 var target = new top.THREE.Vector3();
  7.                 target.y = that.threejs.Controls.target.y;

  8.                 var tanx = (camerap.x - lookAt.x) / (camerap.y - lookAt.y);
  9.                 target.x = camerap.x - tanx * (camerap.y - target.y);

  10.                 var tanz = (camerap.z - lookAt.z) / (camerap.y - lookAt.y);
  11.                 target.z = camerap.z - tanz * (camerap.y - target.y);
复制代码
9.获取两个向量中间位置的点
  1. /// <summary>
  2.     /// 获取两点之间距离一定百分比的一个点
  3.     /// </summary>
  4.     /// <param name="start">起始点</param>
  5.     /// <param name="end">结束点</param>
  6.     /// <param name="distance">起始点到目标点距离百分比</param>
  7.     /// <returns></returns>
  8.     private Vector3 GetBetweenPoint(Vector3 start, Vector3 end, float percent)
  9.     {
  10.         Vector3 normal = (end - start).normalized;
  11.         float distance = Vector3.Distance(start, end);
  12.         return normal * (distance * percent) + start;
  13.     }

  14.     /// <summary>
  15.     /// 获取两点之间一定距离的点
  16.     /// </summary>
  17.     /// <param name="start">起始点</param>
  18.     /// <param name="end">结束点</param>
  19.     /// <param name="distance">距离</param>
  20.     /// <returns></returns>
  21.     private Vector3 GetBetweenPoint(Vector3 start, Vector3 end, float distance)
  22.     {
  23.         Vector3 normal = (end - start).normalized;
  24.         return normal * distance + start;
  25.     }
复制代码
10.div水平居中:
  1. -webkit-transform: translate(-50%, 0);
  2.     -ms-transform: translate(-50%, 0);
  3.     transform: translate(-50%, 0);
复制代码
11.带动作模型下载:https://www.mixamo.com/#/?page=3&query=&type=Character
分享 转发
TOP
发新话题 回复该主题