raycaster选取捕获obj模型&&选中高亮代码
raycaster选取捕获obj模型&&选中高亮代码
raycaster关键代码
raycaster默认状态下是无法读取obj模型, 因为模型是自动加载到一个组里的, 因此需要调用intersectObject方法
//原来的代码
//raycaster.setFromCamera(mouse, camera);
//第二个参数一定要为ture,这样才能捕获group的所有children
var intersects = raycaster.intersectObject(group, true);
选中高亮代码
function onDocumentClick(event) {
//阻值默认动作
event.preventDefault();
//鼠标转为屏幕中的
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObject( group, true);
//拾取物体数大于0时
if ( intersects.length > 0 ) {
// intersects[ 0 ].object.material.color.set( 0xff0000 );
//获取第一个物体
if (INTERSECTED != intersects[0].object) {
if (SELECTED) SELECTED.material.color.setHex(SELECTED.currentHex);
SELECTED = intersects[0].object;
// console.log(SELECTED);
SELECTED.currentHex = SELECTED.material.color.getHex();//记录当前选择的颜色
SELECTED.material.color.setHex(0x66ff00);
} else {
// document.body.style.cursor = 'auto';
if (SELECTED) SELECTED.material.color.set(SELECTED.currentHex);//恢复选择前的默认颜色
SELECTED = null;
}
}
document.addEventListener('click', onDocumentClick, false);
obj整体上色
搞不来啊啊啊啊啊啊啊啊啊啊啊啊
每次点了都是选中模型的children部分,哭了....
曲线救国了...以后看看有没有什么好办法
目前是想先把obj存到group中,然后判断group里模型的id是否与obj.parent.parent.id是否相等,相等就把回调模型,重新上色加载, 手动测出的id为3
以下是完整代码
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="three.js"></script><!--引入threejs核心库-->
<script src="OrbitControls.js"></script><!--引入相机控制器-->
<script src="OBJLoader.js"></script><!--obj加载器-->
<script src="LoaderSupport.js"></script>
<script src="MTLLoader.js"></script><!--材质加载器,材质加载还有点问题-->
<script src="OBJLoader2.js"></script>
<script src="js/jsUtils-RichardWLee.js"></script>
</head>
<body>
<script>
var mouse = new THREE.Vector2(), INTERSECTED, SELECTED;
var raycaster = new THREE.Raycaster();
// var objects = [];
var group = new THREE.Group();
var scene = new THREE.Scene();<!--创建场景-->
scene.background = new THREE.Color(0xf0f0f0);
var geometry = new THREE.BoxGeometry(100, 100, 100);
var material = new THREE.MeshLambertMaterial({color: 0xffffff});
var mesh = new THREE.Mesh(geometry, material);<!--mesh即网格模型，创建需要两个参数：几何体和材质-->
scene.add(mesh);<!--将模型加入场景-->
group.add(mesh);
scene.add(group);
var loader = new THREE.OBJLoader();
var plane_obj;
loader.load('models/成品.obj',
function (object) {
plane_obj = object;
object.scale.set(0.1, 0.1, 0.1);<!--缩小10倍-->
object.position.y = 50;
object.traverse(function (child) {
if (child instanceof THREE.Mesh) {
child.material.color.setHex(0xFFFF00);
}
});
scene.add(object);<!--加载成功的回调函数，将模型加载到场景中-->
group.add(object);
}
);
var light = new THREE.PointLight(0xffffff);<!--创建点光源：白色-->
light.position.set(300, 400, 200);<!--设置点光源位置-->
scene.add(light);<!--将光源加入场景-->
scene.add(new THREE.AmbientLight(0x555555));<!--添加浅灰色的环境光-->
var camera = new THREE.PerspectiveCamera(40, 800 / 600, 1, 2000);<!--创建透视相机-->
camera.position.set(200, 200, 200);
camera.lookAt(scene.position);<!--把相机朝向场景中心-->
//用来搞事情
function onDocumentClick(event) {
event.preventDefault();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObject(group, true);
//拾取物体数大于0时
if (intersects.length > 0) {
//获取第一个物体
if (INTERSECTED != intersects[0].object) {
//调试用的
//console.log(intersects);
//console.log(intersects[0].object.parent.parent.id);
//这里判断group中的模型id是否为3
if (intersects[0].object.parent.parent.id == 3) {
SELECTED = intersects[0].object;
SELECTED.currentHex = SELECTED.material.color.getHex();
plane_obj.traverse(function (child) {
if (child instanceof THREE.Mesh) {
child.material.color.setHex(0xFF00FF);
}
});
} else {
if (SELECTED) {
SELECTED.material.color.setHex(SELECTED.currentHex);
}
SELECTED = intersects[0].object;
SELECTED.currentHex = SELECTED.material.color.getHex();//记录当前选择的颜色
SELECTED.material.color.setHex(0x66ff00);
}
}
} else {
if (SELECTED) {
SELECTED.material.color.set(SELECTED.currentHex);//恢复选择前的默认颜色
plane_obj.traverse(function (child) {
if (child instanceof THREE.Mesh) {
child.material.color.setHex(0xFFFF00);
}
});
}
SELECTED = null;
}
}
document.addEventListener('click', onDocumentClick, false);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);<!--将渲染器加入网页元素中-->
function render() {
renderer.render(scene, camera);<!--将相机看到的场景渲染到页面中-->
}
render();
var controls = new THREE.OrbitControls(camera);
controls.addEventListener('change', render);
function animate() {
requestAnimationFrame(animate);
render();
}
animate();<!--动画函数，每一帧都渲染-->
</script>
</body>
</html>
raycaster选取捕获obj模型&&选中高亮代码的更多相关文章
- character-RNN模型介绍以及代码解析
RNN是一个很有意思的模型.早在20年前就有学者发现了它强大的时序记忆能力,另外学术界以证实RNN模型属于Turning-Complete,即理论上可以模拟任何函数.但实际运作上,一开始由于vanis ...
- sublime高亮代码导出
何在word/博客中使用SublimeText风格的代码高亮样式 原文链接:http://www.cnblogs.com/Wayou/p/highlight_code_with_sublimetext ...
- Obj模型功能完善(物体材质,光照,法线贴图).Cg着色语言+OpenTK+F#实现.
这篇文章给大家讲Obj模型里一些基本功能的完善,包含Cg着色语言,矩阵转换,光照,多重纹理,法线贴图的运用. 在上篇中,我们用GLSL实现了基本的phong光照,这里用Cg着色语言来实现另一钟Blin ...
- OpenGL OBJ模型加载.
在我们前面绘制一个屋,我们可以看到,需要每个立方体一个一个的自己来推并且还要处理位置信息.代码量大并且要时间.现在我们通过加载模型文件的方法来生成模型文件,比较流行的3D模型文件有OBJ,FBX,da ...
- opengl导入obj模型
在经过查阅各种资料以及各种bug之后,终于成功的实现了导入基本的obj模型. 首相介绍一下什么是obj模型 一.什么是OBJ模型 obj文件实际上是一个文本文档,主要有以下数据,一般可以通过blend ...
- 三维引擎导入obj模型全黑总结
最近有客户试用我们的三维平台,在导入模型的时候,会出现模型全黑和不可见的情况.本文说下全黑的情况. 经过测试,发现可能有如下几种情况. obj 模型没有法线向量 如果obj模型导出的时候没有导出法线向 ...
- 三维引擎导入obj模型不可见总结
最近有客户试用我们的三维平台,在导入模型的时候,会出现模型全黑和不可见的情况.上一篇文章说了全黑的情况.此文说下不可见的情况. 经过测试,发现可能有如下两种情况. 导入的模型不在镜头视野内 导入的模型 ...
- 轻量级jQuery语法高亮代码高亮插件jQuery Litelighter。
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>jQ ...
- UICollectionViewCell选中高亮状态和UIButton的高亮状态和选中状态
UICollectionViewCell选中高亮状态 //设置点击高亮和非高亮效果! - (BOOL)collectionView:(UICollectionView *)collectionView ...
随机推荐
- Ado.Net查询语句使用临时表做条件
using System; using System.Data; using System.Data.SqlClient; using System.Text; namespace WindowsFo ...
- C# vb .net实现gamma伽玛调整特效滤镜
在.net中,如何简单快捷地实现Photoshop滤镜组中的gamma伽玛调整特效滤镜呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: ...
- 易百教程人工智能python修正-人工智能监督学习（回归）
回归是最重要的统计和机器学习工具之一. 我们认为机器学习的旅程从回归开始并不是错的. 它可以被定义为使我们能够根据数据做出决定的参数化技术,或者换言之,允许通过学习输入和输出变量之间的关系来基于数据做 ...
- Arm存储器
Arm可以引出27根地址线,只能实现128MB的寻址,那么要如何实现1GB的寻址呢?答案就是使用nGCS片选线,nGCSx为低电平为选中相应的外接设备.一共八根片选线,也就是bank1,bank2-以 ...
- MySQL Index--InnoDB引擎的主键索引
查看表主键信息 ## 查看表主键信息 SELECT t.TABLE_NAME, t.CONSTRAINT_TYPE, c.COLUMN_NAME, c.ORDINAL_POSITION FROM IN ...
- xadmin 配置内置User模型
xadmin 配置内置USER模型 默认展示 在你的User模型对应的app下创建adminx 文件 import xadmin from django.contrib.auth import get ...
- ORA-01031:insufficient privileges 解决方法
使用sys或system帐号登录plSql时,提示ORA-01031:insufficient privileges 错误.使用其他的帐号能正常登录,在cmd命令中用system帐号也是可以正常登录. ...
- hive 外部表和内部表的区别和相互转换
Hive内部表和外部表区别 1.创建内部表时,内部表的数据文件是保存在指定的路径的:如若创建外部表,则只记录数据所在的路径,不会对数据位置做改变. 2.删除表的时候,内部表元数据和数据会跟着一起删除. ...
- request-html 简单爬虫
import asyncio from requests_html import HTMLSession url = 'http://www.xiaohuar.com/hua/' session = ...
- LG2662 牛场围栏 和 test20181107 数学题
P2662 牛场围栏 题目背景 小L通过泥萌的帮助,成功解决了二叉树的修改问题,并因此写了一篇论文, 成功报送了叉院(羡慕不?).勤奋又勤思的他在研究生时期成功转系,考入了北京大学光华管理学院!毕业后 ...