176  
查询码:00000381
小程序使用threejs第二篇—立方体展示并自动旋转与手势旋转_小程序,threejs,自动控制手动控制
来源:https://blog.csdn.net/WeiHan_Seven/article/details/104493821
作者: 朱凡 于 2020年03月04日 发布在分类 / FM组 / FMWechat 下,并于 2020年03月04日 编辑
阅读 阅读数 读数 程序 立方体 立方 一个 来自 博客 threejs

小程序使用threejs第二篇—立方体展示并自动旋转与手势旋转


在上一篇小程序使用threejs第一篇——安装中,除了说明了threejs在小程序中如何构建,还附带了一个小小的示例——一个旋转的正方体,接下来我们先花一点点时间通过示例代码了解一下发生了什么?且看

代码注释

export function renderExample1(canvas, THREE) { //threejs中有三个最基本的概念,就是下述camera、 scene、renderer,分别表示相机、场景与渲染器,怎么理解呢?其实就是模仿现实物理世界,就像我们通过相机去拍摄照片一样,需要一个相机,也需要要拍摄的场景,还需要的其实是一种介质或者叫关联,以便计算机能够知道相机看的是哪个场景或者能够看到哪个场景 var camera, scene, renderer; var cube; init(); animate(); function init() { //获取相机对象,PerspectiveCamera表示一种透视照相机;第一个参数表示这个相机的广角,就是能看到的角度;第二个参数表示相机获取到的视野要呈现的长宽比,一般用画布的长宽比就可以呈现原场景比例;第三个参数与第四个参数分别表示远近切面,意思是这个(1~1000)距离之外的场景就不再显示了 camera = new THREE.PerspectiveCamera(100, canvas.width / canvas.height, 1, 1000); //获取场景对象 scene = new THREE.Scene(); scene.background = new THREE.Color(0xf0f0f0); //获取渲染器对象 renderer = new THREE.WebGLRenderer(); //设置渲染器的分辨率 renderer.setPixelRatio(wx.getSystemInfoSync().pixelRatio); //设置渲染区域的宽高 renderer.setSize(canvas.width, canvas.height); //接下来我们要创建一个立方体,并把它添加到场景中 //BoxGeometry是一个几何长方体,通过它可以获取一个立方体对象 var geometry = new THREE.BoxGeometry(10, 10, 10); //MeshBasicMaterial是网状基础材质 var material = new THREE.MeshBasicMaterial({ color: 0xed3ed3 }); //组合成一个粉色的立方体 cube = new THREE.Mesh(geometry, material); //添加进场景 scene.add(cube); } function animate() { //通过变化下列两个值,来更改立方体状态 cube.rotation.x += 0.01; cube.rotation.y += 0.01; //这是通过调用canvas的requestAnimationFrame方法进行周期性渲染,渲染频率在60次每秒, canvas.requestAnimationFrame(animate); //如果只是要绘制一个静止的立方体,调用renderer渲染就ok了 renderer.render(scene, camera); } } 

注释了一大堆,不知道有没有看乱,其实这个简单的小示例却包含了

threejs的使用逻辑

1、创建相机、场景、渲染器对象
2、创建要渲染的物体,并添加进场景中
3、利用渲染器将场景渲染到相机内

接下来就是让物体自动或手动转动起来,上述示例中则是我们通过代码让立方体自动旋转。那么如何才能跟随手势旋转呢?像这样

效果

在这里插入图片描述



 推荐知识

 历史版本

修改日期 修改人 备注
2020-03-04 00:03:25[当前版本] 朱凡 创建版本

 附件

附件类型

GIFGIF

知识分享平台 -V 4.8.7 -wcp