首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端迈进3D时代-three.js高阶(3D图片预览)

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

作者头像
Javanx
发布2019-09-04 15:39:40
2.9K0
发布2019-09-04 15:39:40
举报
文章被收录于专栏:web秀web秀

前言

前面通过一篇简单的文章,讲述了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
};

演示程序:演示代码

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018年9月14日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 核心代码
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档