ThreeJS学习一点一滴

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坐标获取：

var rect = domElement.getBoundingClientRect();

mouse.x = ((event.clientX - rect.left) / rect.width)  2 - 1;
_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.纠结很久的模型定位问题终于解决了：

var lookAt = obj.position.clone();
                var camerap = lookAt.clone();
                camerap.x += 12.5  bs.radius;
                camerap.y += 12.5  bs.radius;
                camerap.z += 12.5  bs.radius;

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

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

                var tanz = (camerap.z - lookAt.z) / (camerap.y - lookAt.y);
                target.z = camerap.z - tanz * (camerap.y - target.y);

9.获取两个向量中间位置的点

/// <summary>
    /// 获取两点之间距离一定百分比的一个点
    /// </summary>
    /// <param name="start">起始点</param>
    /// <param name="end">结束点</param>
    /// <param name="distance">起始点到目标点距离百分比</param>
    /// <returns></returns>
    private Vector3 GetBetweenPoint(Vector3 start, Vector3 end, float percent)
    {
        Vector3 normal = (end - start).normalized;
        float distance = Vector3.Distance(start, end);
        return normal  (distance  percent) + start;
    }

    /// <summary>
    /// 获取两点之间一定距离的点
    /// </summary>
    /// <param name="start">起始点</param>
    /// <param name="end">结束点</param>
    /// <param name="distance">距离</param>
    /// <returns></returns>
    private Vector3 GetBetweenPoint(Vector3 start, Vector3 end, float distance)
    {
        Vector3 normal = (end - start).normalized;
        return normal * distance + start;
    }

10.div水平居中：

-webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);

11.带动作模型下载：https://www.mixamo.com/#/?page=3&query=&type=Character