前言
前面通過一篇簡單的文章，講述了three.js是幹什麼的，有哪些主要的對象，今天我們來學習一下更深層次的知識。下面是上一期文章。
前端邁進3D時代three.js高階（3D圖片預覽）
核心代碼
前端邁進3D時代three.js高階（3D圖片預覽）
前端邁進3D時代three.js高階（3D圖片預覽）
材質中使用紋理，這裡的紋理就是圖片，添加到場景中
THREE.ImageUtils.loadTexture(url, {}, function(){}）
控制器
controls = new THREE.OrbitControls(camera, renderer.domElement)
控制器參數
//鼠標控制是否可用
controls.enabled = true;
//聚焦座標
controls.target = new THREE.Vector3();
//最大最小相機移動距離(景深相機)
controls.minDistance = 0;
controls.maxDistance = Infinity;
//最大最小鼠標縮放大小（正交相機）
controls.minZoom = 0;
controls.maxZoom = Infinity;
//最大仰視角和俯視角
controls.minPolarAngle = 0;
controls.maxPolarAngle = Math.PI;
//水平方向視角限制
controls.minAzimuthAngle = - Infinity;
controls.maxAzimuthAngle = Infinity;
//慣性滑動，滑動大小默認0.25
controls.enableDamping = false;
controls.dampingFactor = 0.25;
//滾輪是否可控制zoom，zoom速度默認1
controls.enableZoom = true;
controls.zoomSpeed = 1.0;
//是否可旋轉，旋轉速度
controls.enableRotate = true;
controls.rotateSpeed = 1.0;
//是否可平移，默認移動速度為7px
controls.enablePan = true;
controls.keyPanSpeed = 7.0; // pixels moved per arrow key push
//是否自動旋轉，自動旋轉速度。默認每秒30圈
controls.autoRotate = false;
controls.autoRotateSpeed = 2.0;
//是否能使用鍵盤
controls.enableKeys = true;
//默認鍵盤控制上下左右的鍵
controls.keys = {
LEFT: 37,
UP: 38,
RIGHT: 39,
BOTTOM: 40
};
//鼠標點擊按鈕
controls.mouseButtons = {
ORBIT: THREE.MOUSE.LEFT,
ZOOM: THREE.MOUSE.MIDDLE,
PAN: THREE.MOUSE.RIGHT
};
公告
更多資源敬請關注！
分享到:
閱讀更多 web秀 的文章
