Hi Every one,
i try use raycaster make,
I try to change raycaster scene.children to my model object meshobj,but error
before:
var intersects = raycaster.intersectObjects(scene.children, true);
after:
var intersects = raycaster.intersectObjects(meshobj, true);
this is my code:
let container, stats, controls;
let camera, scene, renderer, light, mesh, grid, meshobj;
let mixer;
let composer, outlinePass;
init();
animate();
function init() {
//選擇容器
const canvas = document.querySelector('#infoe');
//建立相機
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 5000);
camera.position.set(200, 500, 700);
//建立場景
scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);
// scene.fog = new THREE.Fog(0xa0a0a0, 200, 1000);
//建立燈光(半球光)
light = new THREE.HemisphereLight(0x999999, 0x000000);
light.position.set(0, 200, 0);
scene.add(light);
//建立燈光(定向光)
light = new THREE.DirectionalLight(0x999999);
light.position.set(0, 200, 100);
light.castShadow = true;
light.shadow.camera.top = 180;
light.shadow.camera.bottom = - 100;
light.shadow.camera.left = - 120;
light.shadow.camera.right = 120;
scene.add(light);
// model 載入進度
const onProgress = function (xhr) {
if (xhr.lengthComputable) {
const percentComplete = (xhr.loaded / xhr.total) * 100;
console.log(Math.round(percentComplete, 2) + '% downloaded');
}
};
const onError = function () { };
const manager = new THREE.LoadingManager();
// model 3D (FBX)
var loader = new THREE.FBXLoader(manager);
loader.load('models/fbx/national-museum-finish-5.fbx', function (object) {
object.scale.multiplyScalar(1); //模型大小縮放
meshobj = object
meshobj.position.y = 100;
scene.add(meshobj);
}, onProgress, onError);
//render 渲染彩現
renderer = new THREE.WebGLRenderer({
canvas,
antialias: true,
alpha: true
});
//OrbitControls 滑鼠拖曳旋轉控制器
controls = new THREE.OrbitControls(camera, canvas);
controls.enableDamping = false; //拖拉慣性
controls.campingFactor = 0.25; //拖拉慣性阻尼參數搭配enableDamping使用
controls.enableZoom = true; //相機變焦移動
controls.enablePan = false; //相機平移
controls.target.set(0, 100, 0);
controls.update();
}
//canvas 畫面自訂義
function resizeRendererToDisplaySize(renderer) {
const canvas = renderer.domElement;
const width = canvas.clientWidth;
const height = canvas.clientHeight;
const needResize = canvas.width !== width || canvas.height !== height;
if (needResize) {
renderer.setSize(width, height, false);
}
return needResize;
}
//raycaster
let raycaster = new THREE.Raycaster();
let mouse = new THREE.Vector2(), INTERSECTED;
let selection = null;
function onMouseClick(event) {
event.preventDefault();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
}
function render() {
//通過相機和滑鼠位置更新射線
raycaster.setFromCamera(mouse, camera);
// 計算物體和射線的焦點
var intersects = raycaster.intersectObjects(scene.children, true);
if (intersects.length > 0) {
if (INTERSECTED != intersects[0].object) {
selection = intersects[0].object;
// 當點擊其他地方回復顏色
if (selection) selection.material.color.set(selection.currentHex);
// 設定新的顏色
selection.material.color.set(0xff0000);
container.style.cursor = "pointer";
console.log('點到你了');
}
} else {
if (selection) selection.material.color.set(0x000000);
selection = null;
container.style.cursor = "default";
}
renderer.render(scene, camera);
}
//動畫執行
function animate() {
requestAnimationFrame(animate);
if (resizeRendererToDisplaySize(renderer)) {
const canvas = renderer.domElement;
camera.aspect = canvas.clientWidth / canvas.clientHeight;
camera.updateProjectionMatrix();
}
if (meshobj) {
// meshobj.rotation.y += 0.002;
}
renderer.render(scene, camera);
window.addEventListener('click', onMouseClick, false);
window.requestAnimationFrame(render);
}
