Three.js

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

特别声明:如果您喜欢小站的内容,可以点击 终身VIP¥188.00元 包年VIP¥88.00元 包季VIP¥28.00 包月VIP¥10.00元 进行全站阅读。 如果您对付费阅读有任何建议或想法,欢迎发送邮件至: 864479410@qq.com,或添加QQ:864479410(^_^)

前言

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

前端迈进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;

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

演示程序:演示代码

公告

以后每月5、15、25号更新原创文章,内容不限,喜欢小编的可以点击关注,也可在下方评论留言,你喜欢什么内容,小编根据大家喜欢的内容尝试更新

(518)

本文由 Web秀 作者:Javan 发表,转载请注明来源!

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注