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>