初试Three.js做个小demo
第一篇简书 就写写最近老大让做的一个小demo
小demo有这样的要求 三个一样的长方体 拼凑在一起 点击分开 就能迅速分开
最后做出来的效果如下请各位客官忽略不太美观的样式么么哒
一开始的模型
点击分开按钮
点击还原按钮
这次想谈谈遇到过的问题 毕竟是第一次用three.js
所以其实用的时候 也是一脸懵逼
<b>正常的长方体</b>
其实要一个正常的长方体不难，大部分的教程都能做到，只是为啥我做完教程的demo之后 想自己写一个长方体却写不出呢 估计是哪里出了问题。。 所以 咱们就忽略这个问题吧~
正常的长方体
<b>会动的长方体</b>
在写出一个正常的长方体后，就开始想着让长方体动。
让物体动 有两种方法：
- 让照相机动 物体不动
- 让物体动 照相机不动
第一次使用three.js 也没有深究两种方法的异同,
就选择了第一种 ，于是就入坑了~
一开始，效果是做到了，
但是 到后面就出问题了，我们之后再纠结~
会动的长方体
在此丢出部分代码
function animationUp(){
camera.position.y = camera.position.y - 1; //将相机向着y轴移动一个单位
renderer.render(scene, camera);
requestAnimationFrame(animationUp);
}
function animationDowm(){
camera.position.y = camera.position.y + 1; //将相机向着y轴移动一个单位
renderer.render(scene, camera);
requestAnimationFrame(animationDowm);
}
<b>颜色问题</b>
是的，看看前面的截图，的确是不太好看，
都是纯色不说，还木有边框 完全无颜值可言。
于是我就继续纠结颜色问题了
其实颜色问题，除了是直接设置颜色之后，
在three.js里面，还可以是光源的问题
于是本次demo为了省事，也直接用了光源来进行调颜色。
用光源来改变颜色
光源本是一个很大的课题，是需要深入了解的，但这次做demo的时间不足，所以只能用简单的DirectionalLight
light = new THREE.DirectionalLight(0xFF0000,1);
light.position.set(1,0,0);
scene.add(light);
<b>两个长方体</b>
在完成一个会动的长方体之后，我们可以直接再创造一个新的 一模一样的长方体。只需要复制代码即可。不过长方体的方向不同，因此长宽高也是对应的不一样。
var geometry = new THREE.CubeGeometry(200,150,80);
var geometry1 = new THREE.CubeGeometry(80,150,200);
var material = new THREE.MeshLambertMaterial({ color:0xFFFFFF});
mesh = new THREE.Mesh(geometry,material);
mesh1 = new THREE.Mesh(geometry1,material);
让两个长方体往不同的方向移动
这就是一开始让一个长方体动的坑了。。。
一开始选择让camera动，其实是让整个场景一起向着一个方向移动
而现在 需要两个长方体 分别向不同的方向移动，就发现有点坑了。
于是在此改用了令物体移动，照相机不动。
function animationUp(){
mesh1.position.x = mesh1.position.x - 5;
mesh.position.y = mesh.position.y + 5;
renderer.render(scene, camera);
requestAnimationFrame(animationUp);
}
function animationDowm(){
mesh1.position.x = mesh1.position.x + 5;
mesh.position.y = mesh.position.y - 5;
renderer.render(scene, camera);
requestAnimationFrame(animationDown);
}
两个向着不同方向移动的长方体
<b>三个长方体</b>
其实将两个长方体弄出来 并且能够移动了 弄三个长方体，其实也不难。那我就不啰嗦啦~
<b>位置问题</b>
最后一个问题 是困扰我最久的问题
在三个长方体都写出来后，位置问题要如何安排
仿佛无论我怎么调位置，三个长方体都会有缝隙。
简直要气晕！！！怎么可以这么不听话！哼！
有缝隙的长方体
于是我就不断的调整三个长方体的坐标、旋转角度
也算是瞎搞吧 最后也搞出来了
这方面我觉得是要继续深究一下的
也希望各位看客可以告诉小女子一些你们的想法~
var mesh,mesh1,mesh2;
function initObject(){
//var geometry = new THREE.CylinderGeometry(100,150,400);
var geometry = new THREE.CubeGeometry(200,150,80);
var geometry1 = new THREE.CubeGeometry(80,150,200);
var geometry2 = new THREE.CubeGeometry(80,150,200);
var material = new THREE.MeshLambertMaterial({ color:0xFFFFFF});
mesh = new THREE.Mesh(geometry,material);
mesh1 = new THREE.Mesh(geometry1,material);
mesh2 = new THREE.Mesh(geometry2,material);
mesh.position = new THREE.Vector3(0,0,0);
mesh.rotation.x = 90 * Math.PI /180;
mesh.rotation.y = 180 * Math.PI /180;
mesh.rotation.z = 45 * Math.PI /180;
mesh1.rotation.x = 90 * Math.PI /180;
mesh1.rotation.y = 180 * Math.PI /180;
mesh1.rotation.z = 45 * Math.PI /180;
mesh2.rotation.x = 90 * Math.PI /180;
mesh2.rotation.y = 180 * Math.PI /180;
mesh2.rotation.z = 45 * Math.PI /180;
mesh.position.set(0,0,0);
mesh1.position.set(-90,-60,90);
mesh2.position.set(90,-60,-90);
scene.add(mesh,mesh1,mesh2);
}
文章到这里大概也就结束了~第一次写文，有点流水账 如果您能看完全文 ，谢谢您，欢迎提出吐槽和讨论~
three.js是一门新技术，我想我会继续深入研究的！
然后谢谢你看到最后
爱你们么么哒！
