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 ...
随机推荐
- Delphi开发的数据库程序在C:\PDOXUSRS.NET生成文件，拒绝访问及读写权限
Delphi开发的数据库程序在C:\PDOXUSRS.NET生成文件,拒绝访问及读写权限, "无法打开 PARADOX.NET.这个文件可以随便删除的,下次会自动产生. Permission ...
- CLASSPATH 环境变量设置
当 JVM 运行时,如果设置了 CLASSPATH 变量,那么 JVM 会到该目录下寻找 java 类文件 该变量配置的方式不同,寻找顺序也不同 在我的 D:\tmp\java\quickstart\ ...
- 【转载】Javascript使用Math.random()随机数函数生成1至1000的随机数
在Javascript代码编写过程中,有时候我们需要使用Js来生成随机数,清除ajax的get请求缓存的时候我们会带上一个随机数来解决此问题,此外在其他应用中也可能使用到随机数,在Javascript ...
- js校验规则--去空格、加空格
为了更加直观,有些号码需要加空格: // 拼接空格,每4位加一个空格 let bankAccount = '6228888888888888888'; let blank_value = bankAc ...
- HTTP协议复习一--认识HTTP
HTTP 是什么 HTTP 是一个在计算机世界里专门在两点之间传输文字.图片.音频.视频等超文本数据的约定和规范. HTTP 是一个用在计算机世界里的协议,它确立了一种计算机之间交流通信的规范,以及相 ...
- iview表单数字验证
sort: [ {required: true, message: '请填写栏目排序', trigger: 'blur'}, {type: 'number', message: '请输入数字', tr ...
- CRM-Q模糊查询
Q查询-模糊查询 示例一 q=Q() # 实例化一个Q的对象q,我们可以给它加条件 q.children.append(("name","xxx")) # 添加 ...
- c# String类
- 运维开发笔记整理-Django模型语法
运维开发笔记整理-Django模型语法 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.模型基本概念 1>.什么是模型 模型是你的数据唯一的,权威的信息源.它包含你所存储数 ...
- 用js刷剑指offer(第一个只出现一次的字符)
题目描述 在一个字符串(0<=字符串长度<=10000,全部由字母组成)中找到第一个只出现一次的字符,并返回它的位置, 如果没有则返回 -1(需要区分大小写). 牛客网链接 js代码 fu ...