National Museum area click block display models red border

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);

    }

It seems you want to achieve a similar effect like in this official outline example:

https://threejs.org/examples/webgl_postprocessing_outline

To make this work in your app, you have to ensure that the single blocks of your museum are defined as independent geometries in your FBX asset. If the entire building is represented as a single geometry, the outline effect won’t work.

It’s best to fix such model issues in a DCC tool like Blender. Meaning you author the blocks as separate 3D objects, assign to them a unique name (block1, block2 etc.), import the model and then select the single blocks via Object3D.getObjectByName().

1 Like

Great, Thanks you,
let me try~

I am having trouble joining the Outline Pass.

First I will join Es6 moudel scrept EffectComposer and OutlinePass

Second, I got an error when writing the example code in js

Third, browser error

Is there any teaching for reference? Thanks~

First 1:

Second 2:

Third 3:

I remember having a great deal of trouble trying to get the outline working with nested objects.
In the end I changed their material instead. That is quite straightforward, and doesn’t require extra passes or the Effect Composer. You can also use the EdgesGeometry, to create a copy of the geometry edges and show/hide that.

var highlineMat = new THREE.LineBasicMaterial({ color: 0xFF0000, linewidth: 1 });
var edges = new THREE.EdgesGeometry(geometry, 30); //30 is crease angle, geometry from your mesh
var line = new THREE.LineSegments(edges, highlineMat);
2 Likes

It’s not valid to import three.js as a global script and then additional library entities (likeEffectComposer) as ES6 modules. I suggest you use a pure ES6 module workflow for your app since global scripts are deprecated since r117 (the current release) and will be removed at the end of this year.

Besides, when importing EffectComposer as a module, it’s not necessary to use the THREE namespace anymore. Meaning you create the composer like so:

composer = new EffectComposer(renderer);
1 Like

thank u u are suggest~

Hi Mugen87,
I try to import using ES6

i set ES6 module:

import * as THREE from ‘js/three.module.js’:

but browser error “/”, “./”, or “…/”.

Peter_Devine thanks u Suggestions.

I try to add my model,but error…

cube test is normal good!

my model add edges…

my model is error…
03

The module error you are seeing happens because the import path is not correct. The message actually describes the solution. Write the path like so:

import * as THREE from '../js/three.module.js';

However, if you use the npm package of three.js, the import should be:

import * as THREE from 'three';

Try to avoid copying library files into your project. Import external dependencies via npm packages instead.