I only know the basics of JS. That’s why I reach many goals by trial and error. But I’m still very happy with the results after 3 weeks of learning three.js.
(I have linked obj models to LightGallery etc) 
import * as THREE from 'three';
import { MTLLoader } from 'three/addons/loaders/MTLLoader.js';
import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
let camera, controls, scene, renderer, dirLight;
let AllModelGroup, MyObjGroup, MyLineGroup, MyAllLineGroup;
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color( '#ffffff' );
AllModelGroup = new THREE.Group;
AllModelGroup.name = 'AllModelGroup';
scene.add( AllModelGroup );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 0, 50, 50 );
// controls
controls = new OrbitControls( camera, renderer.domElement );
controls.minDistance = 1;
controls.maxDistance = 100;
controls.target.set(0,20,0); // camera target
// lights
dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
dirLight.position.set(0, 50, 50);
dirLight.castShadow = true;
camera.add( dirLight );
scene.add( camera );
const ambientLight = new THREE.AmbientLight( 0xffffff, 1 );
scene.add( ambientLight );
initModel();
window.addEventListener( 'resize', onWindowResize );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
controls.update();
render();
}
function render() {
renderer.render( scene, camera );
}
// MODEL
const initModel = () => {
let mod2load=[ 'box1', 'box2'];
for (let i = 0; i < mod2load.length; i++) {
let fname = mod2load[i], fpath='';
let mtlLoader = new MTLLoader();
mtlLoader.setPath( fpath );
mtlLoader.load( fname+'.mtl', function ( materials ) {
materials.preload();
let objLoader = new OBJLoader();
objLoader.setMaterials( materials );
objLoader.setPath( fpath );
objLoader.load( fname+'.obj', function ( mod3one ) {
// local groups, individual for each loaded *.obj / mod3one,
// these local groups at the end of the loop are appended
// to the global group AllModelGroup
MyObjGroup = new THREE.Group;
MyLineGroup = new THREE.Group;
MyAllLineGroup = new THREE.Group;
MyObjGroup.name="MyObjGroup"; // mesh
MyLineGroup.name="MyLineGroup"; // my lines
MyAllLineGroup.name="MyAllLineGroup"; // all lines
mod3one.traverse(function(node) {
if ( node.isMesh ) {
if (node.material) {
node.material.side = THREE.DoubleSide;
let edges = new THREE.EdgesGeometry(node.geometry);
let line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial( { color: '#000000' } ) );
if (node.material.name =='yellow' ) {
MyLineGroup.add( line );
// scene.add( line );
}else{
MyAllLineGroup.add( line );
// scene.add( line );
}
}
}
}); // mod3one.traverse ------------------------------
// scene.add(mod3one);
MyObjGroup.add( mod3one ); // add mesh to local group
MyObjGroup.add( MyLineGroup ); // add mylines to local group
MyAllLineGroup.visible=false; // Hide all edges for the scene opening
MyObjGroup.add( MyAllLineGroup );// add alllines to local group
AllModelGroup.add( MyObjGroup ); // append the local group
// of the loaded obj
// to the global group
}); // .load( fname+'.obj' ------------------------------
}); // .load fname+'.mtl' ------------------------------
} // for ------------------------------
}
init();
animate();
// CONSOLE ============================================================
console.log(scene); // OK
let e=scene.getObjectByName( "AllModelGroup" );
console.log(e); // OK
console.log(e.getObjectByName( "MyObjGroup" )); // return undefined ?
// ... ?????
In theory, my scene structure looks like this:
scene
Light
Camera
...
...
AllModelGroup
MyObjGroup (first *.obj)
mesh *.obj
MyLineGroup
my lines...
MyAllLineGroup
all lines...
MyObjGroup (second *.obj)
mesh *.obj
MyLineGroup
my lines...
MyAllLineGroup
all lines...
any hint how I could access child groups in AllModelGroup ?
// CONSOLE ============================================================
console.log(scene); // OK
let e=scene.getObjectByName( "AllModelGroup" );
console.log(e); // OK
console.log(e.getObjectByName( "MyObjGroup" )); // return undefined ?
// ... ?????
```
grouptest_htmljsobjmtl.zip (4.0 KB)
