博客探讨了在使用AngularJS和three.js进行3D模型预览时，遇到input滑块默认值的问题。作者发现未设置初始值时，AngularJS 1.7及更高版本中滑块的默认value为50，而1.4版本则是undefined。经过测试，确定了默认最小值为0，最大值为100，步长为1，因此在中间位置的value默认为50。解决方案是在获取配置数据后渲染相机位置。
最近做项目，引入了 three.js 做3d模型预览，然后有个功能是放大 缩小的功能，里面用到了 H5的input 滑块！先看下效果图（灯光还没调好）!
再看下上图的html代码：
这里设置了滑块的最大值max，最小值min，每次的步数step，默认值value，因为这些配置都是请求回来的配置数据，是个异步的数据，所以刚开始加载这个3d组件的时候我觉得这些值都是underfined的,但是当我打断点的时候发现 value默认值为50，并且一初始化的时候就跑了ng-change事件（underfined变成50），因为当value值改变了才会触发ng-change事件，看下图！
于是我用了个判断，当请求配置拿到数据后（min,max,step,value等），再去渲染3d模型的相机位置，因为input 滑块 value决定3d模型相机的位置！虽然这样可以解决问题，但是我还是百思不得奇其解，哪来的50，找了很久没有结果，于是我抛开项目的其他的原因，我自己写了demo本地测试，
打个断点发现，要是没赋值，默认值居然是50，那么我分别拉倒两边，打印出最小值和最大值！
发现最小值是0，最大值是100，再测试下我缓慢拉动滑块，看下步长
所以可以看出，没有设置默认值，最小值是0，最大值是100，步长是1，默认的value就在中间，所以是50！经过反复测试两个版本一个是1.8版本，一个是1.4.6版本，发现angularJs版本的问题也有影响，1.7以后的版本不设置值的话，value默认值是50（undefined变成50，ng-change会执行）,如果是1.4版本的话，不设置值，value默认值是undefined(ng-change不会执行)，其他都一样，最小值是0，最大值是100，步长是1！
最后给张3d模型的图：
535
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
