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 ...
随机推荐
- How to read request body in a asp.net core webapi controller?
原文 How to read request body in a asp.net core webapi controller? A clearer solution, works in ASP.Ne ...
- Linux系统内核正式进入5.0版本时代
知名Linux内核开发人员兼维护人员Greg Kroah-Hartman今天宣布,Linux Kernel 4.20内核分支已经结束并督促用户尽快升级至更新的内核分支. Linux Kernel 4. ...
- input里面的提示文字修改（placeholder里的文字修改，el-input也适用）
input::-webkit-input-placeholder { /* WebKit browsers */ color: red; } input:-moz-placeholder { /* M ...
- 虹软人脸识别SDK在网络摄像头中的实际应用
目前在人脸识别领域中,网络摄像头的使用很普遍,但接入网络摄像头和人脸识别SDK有一定门槛,在此篇中介绍过虹软人脸识别SDK的接入流程,本文着重介绍网络摄像头获取视频流并处理的流程(红色框内),以下内容 ...
- SSH框架笔记01_SSH整合的两种方式
目录 1. 框架回顾 2. 创建项目,引入jar包 2.1 Struts2的jar包 2.2 Hibernate的jar包 2.3 Spring的jar包 3. 引入配置文件 3.1 Struts2配 ...
- Deep learning_CNN_Review：A Survey of the Recent Architectures of Deep Convolutional Neural Networks——2019
CNN综述文章 的翻译 [2019 CVPR] A Survey of the Recent Architectures of Deep Convolutional Neural Networks 翻 ...
- SQL SERVER-Extendevent捕获执行慢的语句
USE MASTER; GO /* Conditionally drop the session if it already exists */ IF EXISTS (SELECT * FROM sy ...
- [ipsec][strongswan]strongswan源码分析--(零)引子
目录 strongswan sa 资料 编译 启动 进程信息 结构 架构图与插件 配置运行 传统配置方法 新的配置方法 其他配置方法 详细的配置文档 配置示例 用法 加密库 libgmp libcry ...
- 云计算---记一次黑客攻击openstack创建的虚拟机
一:问题定位 现象: 近期发现有几台openstack云主机被修改密码并被肉鸡. 黑客操作日志: -- :: ##### root tty1 : #### -- :: top -- :: ##### ...
- JDK源码那些事儿之SynchronousQueue下篇
之前一篇文章已经讲解了阻塞队列SynchronousQueue的大部分内容,其中默认的非公平策略还未说明,本文就紧接上文继续讲解其中的非公平策略下的内部实现,顺便简单说明其涉及到的线程池部分的使用 前 ...