raycaster选取捕获obj模型&&选中高亮代码
[TOC]
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>