首页手记前端迈进3D时代-three.js高阶（3D图片预览）

前端迈进3D时代-three.js高阶（3D图片预览）

标签：

Html5 JavaScript

前言

前面通过一篇简单的文章，讲述了three.js是干什么的，有哪些主要的对象，今天我们来学习一下更深层次的知识。下面是上一期文章。
《前端迈进3D时代-Three.js初识》

核心代码

材质中使用纹理，这里的纹理就是图片，添加到场景中

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;

//是否自动旋转，自动旋转速度。默认每秒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
};