乐趣区

关于three.js:threejs起步学习之创建旋转立方体并随时停止和控制旋转

jiezi

间接看成品

能够看到点击开始旋转的时候立方体开始旋转，点击进行旋转的时候立方体进行旋转。

先放官网文档 threejs 官网

点击 en 切换为中文，而后点击创立第一个场景，页面就全副变成中文啦。

先应用原生 js 编写代码，首先就是下载 threejs 而后引入

    <script src="./three.js"></script>

而后就能够应用 THREE 这个对象了

要创立一个立方体，首先咱们须要创立一个场景，一个摄像机，一个渲染器，这样咱们能力透过摄像机看到渲染出的场景

var width = 500
var height = 500
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75,width/height,0.1,1000)
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width,height);
document.body.appendChild(renderer.domElement);

首先我定义了整体的宽高，如果间接用 window.innerWidth 和innerHeight的话，就占满了整个页面，所以我抉择固定一个小一点的宽高，不便察看和后续增加元素。

threejs 有几种不同的相机，这里用的是 PerspectiveCamera(透视相机)。
第一个参数是视线角度（FOV），就是你能在显示器上看到的场景范畴，单位是角度（与弧度不同）
常常玩游戏的人必定晓得这个参数的作用，比方射击游戏里，FOV 越大，能看到的场景越多
这里举荐一个 FOV 无关的材料 https://zhuanlan.zhihu.com/p/…

第二个参数是长宽比，即画面的比例，比方 4:3、16:9 这种。比例设置不对，那一个物体看起来就会被压扁或者拉伸。

接下来两个参数是近截面和远截面。当一个物体的某个局部离摄像机的近截面更近或者远截面更远的时候，这部分就不会被渲染到场景里。

上面就是渲染器了，这里应用的是 WebGLRenderer 渲染器，其余的我临时没有用过，也不懂。

创立完渲染器实例当前，咱们还须要设置渲染尺寸，如果整个页面都须要渲染，那就把 setSize 里的参数改为浏览器的宽高，如果性能不行，能够尝试调小这个值，比方都除以 2。

最初一步就是把渲染器 renderer 的 dom 元素 renderer.domElement 增加到咱们的 HTML 中，也就是在页面里减少了一个<canvas>

当然，当初页面上还是一片白，因为咱们没有真正的渲染 canvas 外面的货色

加上这一步

function animate() {renderer.render( scene, camera);
}
animate();

就能够看到页面上渲染进去了一个彩色的区域

第二步，摆个盒子下来

先上代码

const geometry = new THREE.BoxGeometry(1,1,1);
const material = new THREE.MeshBasicMaterial({color:0x00ff00});
const cube = new THREE.Mesh(geometry,material);
scene.add(cube);
camera.position.z = 5;

要创立一个立方体，咱们须要一个 BoxGeometry 对象，这个对象蕴含了一个立方体中所有的顶点和面。

上面，咱们须要给这个立方体一个材质，让它有色彩。Threejs 自带了几种材质，这里应用的是 MeshBasicMaterial。所有的材质都存有利用于他们属性的对象。这里简单化，只设置一个color 属性，值为 0x00ff00 留神，和 CSS 中的十六进制不同。

第三步，咱们须要一个Mesh(网格)。网格蕴含一个几何体以及作用在该几何体上的材质。间接讲该网格对象放入到场景中。

个别状况下，当咱们调用 scene.add() 办法的时候，物体将被间接增加到 (0,0,0) 坐标，摄像机默认地位也在这里，所以为了防止物体和摄像机重叠，咱们须要将摄像机往外挪动一点，即设置 camera 的position中的 z 轴值为 5 就行

保留当前，页面上就变成了这样

第三步，让立方体动起来

首先弄两个按钮下来

<div>
    <div class="btn" onclick="btnfunc()"> 点我开始旋转 </div>
    <div class="btn" onclick="cancel()"> 点我进行旋转 </div>
</div>

记得下面咱们应用了一个办法, 这个办法是用来渲染出立方体和场景的，只会执行一次

function animate() {renderer.render( scene, camera);
}

接下来咱们写旋转的办法

function btnfunc(){
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene,camera)
}

发现动是动了，然而是点一下，动一下，显著不符合要求

这里有两个办法，第一个办法是减少一个 setInterval 来反复执行这个办法
另一个办法是应用 requestAnimationFrame() 办法
requestAnimationFrame 更好，因为这是浏览器自带的反复执行办法，执行的距离就是你显示器的刷新率，如果是 60 的，就一秒钟更新六十次，如果是 90 的，就一秒钟更新 90 次，不会有割裂感，更重要的是，当页面挂在后盾的时候，这个办法是暂停的，极大节约了零碎的压力。
将旋转办法改变下:

function btnfunc(){requestAnimationFrame(btnfunc);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene,camera)
}

这样，点击一下，立方体就会主动旋转了。

进行旋转

后面咱们让立方体动起来了，当初咱们须要它停下，官网的文档这点十分不好，只有开始旋转没有进行旋转，头重脚轻。

依据百度能够晓得，requestAnimationFrame()参数会返回一个 id，而 cancelAnimationFrame() 承受一个 id, 进行其动作，所以咱们须要这样做

var animationId = ''
function btnfunc(){animationId = requestAnimationFrame(btnfunc);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene,camera)
    console.log(animationId)
}

function cancel(){cancelAnimationFrame(animationId);
}

这样就能够进行旋转啦。

退出移动版