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 ...
随机推荐
- Alfred神器使用手册【转】
我曾经耗费巨大的精力,试图在计算机的使用效率上找到一条优化的捷径,一直以来都收效甚微.直到遇上 alfred,它强大的工作流机制,彻底解决了输入输出的痛点,极大的减少了程序之间的切换成本和重复按键成本 ...
- Mycat分布式数据库架构解决方案--schema.xml详解
echo编辑整理,欢迎转载,转载请声明文章来源.欢迎添加echo微信(微信号:t2421499075)交流学习. 百战不败,依不自称常胜,百败不颓,依能奋力前行.--这才是真正的堪称强大!!! 该文件 ...
- UML回顾暨课程总结
本文作为OO的最后一次博客作业,主要回顾了第四单元的架构设计和本学期的心路历程. 本单元架构设计 UML1 第一次作业的主要内容是解析mdj格式输入,记录特定数据并支持针对类.属性和方法等的查询功 ...
- vue-resource 中 get / post / jsonp 三种请求方式的异同
let url = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=2';let params ...
- ROMTableAddr = 0xE00FF003 错误 Target DLL has been cancelled 错误
JTAG下载固件错误 keil下载固件错误 如下错误 * JLink Info: Found SWD-DP with ID 0x1BA01477 * JLink Info: Found SWD-DP ...
- Http状态码502问题复盘
问题原因分析:502 bade gateway 一般都是upstream出错,对于PHP,造成502的原因常见的就是脚本执行超过timeout设置时间,或者timeout设置过大,导致PHP进程长时间 ...
- Python学习日记(二十二) 初识面向对象
引子 假设我们要开发一个关于飞机大战的游戏,那么游戏的里面就会有两个角色,分别是属于玩家操控的战机和敌方的战机,并且两个战机都有不同的技能或攻击方式,现在我们用自己目前所学的去写出下面的这些代码: d ...
- workman 使用心得
1. 服务端调试: 直接在 Events.php 中 echo 变量, 即可在 命令行工具中 看到输出的信息. 以便进行调试. 2. 客户端调试: 由于是js代码, 可以直接 用 conso ...
- H3C 802.11n
- Elasticsearch 术语介绍和CRUD实际操作入门
一.Elastic Stack 核心Elasticsearch Elasticsearch 是一个分布式.RESTful 风格的搜索和数据分析引擎.Elasticsearch 是面向文档的,这就意味着 ...