热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

three.js制作魔方

原标题:three.js制作魔方因为之前的几节讲了一些数学方法,例如Vector3、Matrix4、Euler还有Quaternion的知识。所以这篇郭先生就来说说用three.

原标题:three.js 制作魔方

因为之前的几节讲了一些数学方法,例如Vector3、Matrix4、Euler还有Quaternion的知识。所以这篇郭先生就来说说用three.js怎么制作一个魔方。在线案例请点击博客原文

制作魔方主要运用坐标变换的知识,制作魔方的方法有很多,建议你先在大脑中构思,然后试着做一做,下面我将一种比较简单的方法。


  1. 制作出魔方各个方块的位置坐标(27个)的数组,然后制作出魔方各个面的材质(6个)

  2. 根据坐标和材质制作魔方的方块,并添加到一个组group

  3. 制作一个标志被选面的几何体(我是用球体),然后隐藏

  4. 使用THREE.Raycaster,给模型绑定事件,并记录选定的一些数据,将标志显示并放到合适的位置

  5. 点击模拟方向键盘,根据之前记录的数据,转动魔方(重点)

以上是主要的步骤,但是对于新同学,需要注意的仍然很多,下面上主要代码,按照方法说

1. 定义的变量

posArr = [
[
100,100,100],[100,100,0],[100,100,-100],[100,0,100],[100,0,0],[100,0,-100],[100,-100,100],[100,-100,0],[100,-100,-100],
[
0,100,100],[0,100,0],[0,100,-100],[0,0,100],[0,0,0],[0,0,-100],[0,-100,100],[0,-100,0],[0,-100,-100],
[
-100,100,100],[-100,100,0],[-100,100,-100],[-100,0,100],[-100,0,0],[-100,0,-100],[-100,-100,100],[-100,-100,0],[-100,-100,-100]
],
//方块位置坐标
materials,//材质数组
mouse = new THREE.Vector2(),//通过鼠标点击的位置计算出raycaster所需要的点的位置,以屏幕中心为原点,值的范围为-1到1.
raycaster,//射线对象
grouwww.yii666.comp,//存放魔方方块的数组
groupTemp,//魔方转动时临时数组
object3d,//魔方被选择面的标志物对象
currentPos,//魔方被点击小块的位置
currentNor,//魔方被点击小块面的法向量
currentUp,//魔方被点击时,相机up的向量


2. 定义材质数组

initMaterial() {
var map_red = new THREE.TextureLoader().load('/static/images/color/m_red.jpg', () => this.loadover --);
var map_orange = new THREE.TextureLoader().load('/static/images/color/m_orange.jpg', () => this.loadover --);
var文章来源站点https://www.yii666.com/ map_yellow = new THREE.TextureLoader().load('/static/images/color/m_yellow.jpg', () => this.loadover --);
var map_blue = new THREE.TextureLoader().load('/static/images/color/m_blue.jpg', () => this.loadover --);
var map_green = new THREE.TextureLoader().load('/static/images/color/m_green.jpg', () => this.loadover --);
var map_white = new THREE.TextureLoader().load('/static/images/color/m_white.jpg', () => this.loadover --);
var map_sprite = new THREE.TextureLoader().load('/static/images/base/direction.png', () => this.loadover --);
let mater_red
= new THREE.MeshBasicMaterial({map: map_red, side: THREE.DoubleSide});
let mater_orange
= new THREE.MeshBasicMaterial({map: map_orange, side: THREE.DoubleSide});
let mater_yellow
= new THREE.MeshBasicMaterial({map: map_yellow, side: THREE.DoubleSide});
let mater_white
= new THREE.MeshBasicMaterial({map: map_white, side: THREE.DoubleSide});
let mater_blue
= new THREE.MeshBasicMaterial({map: map_blue, side: THREE.DoubleSide});
let mater_green
= new THREE.MeshBasicMaterial({map: map_green, side: THREE.DoubleSide});
materials
= [mater_red, mater_orange, mater_yellow,mater_white, mater_blue, mater_green];
}


3. 绘制小方块并绘制标志物(先隐藏)

initsquare() {
var sphereGeom = new THREE.SphereGeometry(10, 30, 20);
var sphereMate = new THREE.MeshPhongMaterial({color: 0x333333});
object3d
= new THREE.Mesh(sphereGeom, sphereMate);
object3d.name
= 'object3d';
object3d.visible
= false;
scene.add(object3d);
group
= new THREE.Group();
group.name
= 'group';
var geometry = new THREE.BoxGeometry(100, 100, 100);
var mesh = new THREE.Mesh(geometry, materials);
posArr.forEach((d,i)
=> {
let meshCopy
= mesh.clone();
meshCopy.position.set(d[
0], d[1], d[2])
meshCopy.name
= 'box-' + i;
group.add(meshCopy);
})
scene.add(group);
this.render();
document.getElementById(
"loading").style.display = "none";
}


4. 监听模型的点击事件

initEventListener() {
raycaster
= new THREE.Raycaster();
document.ad文章来源地址30518.htmldEventListener(
'mousemove', function (event) {
event.preventDefault();
mouse.x
= (event.clientX / window.innerWidth) * 2 - 1;
mouse.y
= - (event.clientY / window.innerHeight) * 2 + 1;
},
false)
document.addEventListener(
'mousedown', () => {
if (scene.children && scene.getObjectByName('group')) {
raycaster.setFromCamera(mouse, camera);
let intersects
= raycaster.intersectObjects(scene.getObjectByName('group').children);
if (intersects[0] && intersects[0].object.name != 'object3d') {
let index
= intersects[0].faceIndex;
let point
= intersects[0].point;
currentUp
= this.computedUp(camera);
currentNor
= this.computedNor(point)
currentPos
= intersects[0].object.position;
let pos
= this.computedPos(point);
object3d.position.copy(pos);
object3d.visible
= true;
}
}
})
}


5. 监听方向软键盘的点击,根据点击键的不同,生成旋转轴


handleRotate(num) {
if(!rotateFlag || !currentPos) return ;
rotateFlag
= false;
groupTemp
= new THREE.Group();
groupTemp.name
= 'group-temp';
let axis;
let tempMeshArr
= [];
switch (num) {
case 1:
axis
= currentNor.clone().cross(currentUp);
break;
case 2:
axis
= currentNor.clone().cross(currentUp).negate();
break;
case 3:
axis
= currentUp.clone().negate();
break;
cwww.yii666.comase 4:
axis
= currentUp;
break;
}
let plane
= new THREE.Plane().setFromNormalAndCoplanarPoint(axis, currentPos);
scene.getObjectByName(
'group').children.forEach(d => Math.abs(plane.distanceToPoint(d.position)) <1 && tempMeshArr.push(d))
tempMeshArr.forEach(d
=> {
group.remove(d);
groupTemp.add(d);
})
// object3d.visible = false;
scene.remove(scene.getObjectByName('group-temp'));
scene.add(groupTemp);
this.handleTween(axis);
}


6. 加一点tween的补间动画,效果更好哦

handleTween(axis) {
let start
= {angle: 0, axis};
let end
= {angle: Math.PI/2, axis};
tween = new TWEEN.Tween(start).to(end, 500);
tween.easing(TWEEN.Easing.Linear.None);
tween.onUpdate(
function () {
let quaternion
= new THREE.Quaternion().setFromAxisAngle(axis, this._object.angle);
groupTemp.rotation.setFromQuaternion(quaternion);
});
tween.onComplete(()
=> {
let matrix
= this.standerMatrix(groupTemp.matrix);
groupTemp.children.forEach(d
=> {
let mesh
= d.clone();
mesh.applyMatrix4(matrix)
mesh.position.copy(
this.standarPos(mesh.position))
group.add(mesh);
})
scene.remove(groupTemp)
rotateFlag
= true;
})
tween.start();
}

郭先生制作魔方的主要思路就是先做出27个方块添加到组A,6个面分别添加不同颜色的贴图(自己p的哦),然后使用raycaster选择点击的面,并确定当时的up方向和法向量方向以备后用,点击上下左右并结合u方向和法向量方向计算出旋转矩阵,根据已有条件计算出是那一排方块改变,并将这9个块添加到组B文章来源地址30518.html中,从组A中删除这9个,根据旋转矩阵旋转组B,并且在旋转完之后将组B中的方块添加到组A中,旋转完毕(这里比较难的就是根据上下左右判断旋转轴向量)。

以上就是一种制作魔方的方法,综合了很多矩阵向量四元数欧拉角和平面的知识,希望对新来的同游有些帮助

转载请注明地址:郭先生的博客

来源于:three.js 制作魔方


推荐阅读
  • 本文深入探讨了HTTP请求和响应对象的使用,详细介绍了如何通过响应对象向客户端发送数据、处理中文乱码问题以及常见的HTTP状态码。此外,还涵盖了文件下载、请求重定向、请求转发等高级功能。 ... [详细]
  • 本文详细介绍了Akka中的BackoffSupervisor机制,探讨其在处理持久化失败和Actor重启时的应用。通过具体示例,展示了如何配置和使用BackoffSupervisor以实现更细粒度的异常处理。 ... [详细]
  • XNA 3.0 游戏编程:从 XML 文件加载数据
    本文介绍如何在 XNA 3.0 游戏项目中从 XML 文件加载数据。我们将探讨如何将 XML 数据序列化为二进制文件,并通过内容管道加载到游戏中。此外,还会涉及自定义类型读取器和写入器的实现。 ... [详细]
  • 深入理解Java泛型:JDK 5的新特性
    本文详细介绍了Java泛型的概念及其在JDK 5中的应用,通过具体代码示例解释了泛型的引入、作用和优势。同时,探讨了泛型类、泛型方法和泛型接口的实现,并深入讲解了通配符的使用。 ... [详细]
  • Scala 实现 UTF-8 编码属性文件读取与克隆
    本文介绍如何使用 Scala 以 UTF-8 编码方式读取属性文件,并实现属性文件的克隆功能。通过这种方式,可以确保配置文件在多线程环境下的一致性和高效性。 ... [详细]
  • ASP.NET MVC中Area机制的实现与优化
    本文探讨了在ASP.NET MVC框架中,如何通过Area机制有效地组织和管理大规模应用程序的不同功能模块。通过合理的文件夹结构和命名规则,开发人员可以更高效地管理和扩展项目。 ... [详细]
  • 本文详细介绍了Java中org.eclipse.ui.forms.widgets.ExpandableComposite类的addExpansionListener()方法,并提供了多个实际代码示例,帮助开发者更好地理解和使用该方法。这些示例来源于多个知名开源项目,具有很高的参考价值。 ... [详细]
  • 在前两篇文章中,我们探讨了 ControllerDescriptor 和 ActionDescriptor 这两个描述对象,分别对应控制器和操作方法。本文将基于 MVC3 源码进一步分析 ParameterDescriptor,即用于描述 Action 方法参数的对象,并详细介绍其工作原理。 ... [详细]
  • 本文详细介绍了Java编程语言中的核心概念和常见面试问题,包括集合类、数据结构、线程处理、Java虚拟机(JVM)、HTTP协议以及Git操作等方面的内容。通过深入分析每个主题,帮助读者更好地理解Java的关键特性和最佳实践。 ... [详细]
  • DNN Community 和 Professional 版本的主要差异
    本文详细解析了 DotNetNuke (DNN) 的两种主要版本:Community 和 Professional。通过对比两者的功能和附加组件,帮助用户选择最适合其需求的版本。 ... [详细]
  • 在使用 DataGridView 时,如果在当前单元格中输入内容但光标未移开,点击保存按钮后,输入的内容可能无法保存。只有当光标离开单元格后,才能成功保存数据。本文将探讨如何通过调用 DataGridView 的内置方法解决此问题。 ... [详细]
  • 本文介绍如何使用 NSTimer 实现倒计时功能,详细讲解了初始化方法、参数配置以及具体实现步骤。通过示例代码展示如何创建和管理定时器,确保在指定时间间隔内执行特定任务。 ... [详细]
  • 在 Swift 编程中,遇到错误提示“一元运算符 '!' 不能应用于 '()' 类型的操作数”,通常是因为尝试对没有返回值的方法或函数应用逻辑非运算符。本文将详细解释该错误的原因,并提供解决方案。 ... [详细]
  • 本文探讨了如何在编程中正确处理包含空数组的 JSON 对象,提供了详细的代码示例和解决方案。 ... [详细]
  • 本文介绍如何使用阿里云的fastjson库解析包含时间戳、IP地址和参数等信息的JSON格式文本,并进行数据处理和保存。 ... [详细]
author-avatar
phpyi
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有