Hi Every Body:
There is a problem bothering me,this one is National Museum area,
How to Click the Block option on the right, the model on the left will display the area with a wireframe red border?
Normal:
Click after:
my Js code:
let container, stats, controls;
let camera, scene, renderer, light, mesh, grid, meshobj;
let mixer;
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);
// Outline Effect
new THREE.MeshBasicMaterial({ color: 0x00ff00, side: THREE.BackSide });
//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();
}
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;
}
//動畫執行
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);
}
