I need to get the dimension of images fbxloader use within traverse, how can I do so?
I have this code:
@php
$files = Illuminate\Support\Facades\Storage::allFiles("models/$modelId");
@endphp
<!DOCTYPE html>
<html lang="en">
<head>
<title>Model Viewer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="https://threejs.org/examples/main.css">
</head>
<body>
<script type="module">
import * as THREE from 'https://cdn.skypack.dev/three@0.132.2';
import Stats from 'https://cdn.skypack.dev/three@0.132.2/examples/jsm/libs/stats.module.js';
import { OrbitControls } from 'https://cdn.skypack.dev/three@0.132.2/examples/jsm/controls/OrbitControls.js';
import { FBXLoader } from 'https://cdn.skypack.dev/three@0.132.2/examples/jsm/loaders/FBXLoader.js';
import { RGBELoader } from 'https://cdn.skypack.dev/three@0.132.2/examples/jsm/loaders/RGBELoader.js';
// import { DDSLoader } from 'https://cdn.skypack.dev/three@0.132.2/examples/jsm/loaders/DDSLoader.js';
let camera, scene, renderer, stats;
const clock = new THREE.Clock();
let mixer;
init();
animate();
setLighting();
function setLighting() {
new RGBELoader()
.setDataType( THREE.UnsignedByteType )
.setPath( 'https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/4k/' )
.load( 'urban_street_04_4k.hdr', function ( texture ) {
var envMap = pmremGenerator.fromEquirectangular( texture ).texture;
// scene.background = envMap;
scene.environment = envMap;
texture.dispose();
pmremGenerator.dispose();
})
var pmremGenerator = new THREE.PMREMGenerator( renderer );
pmremGenerator.compileEquirectangularShader();
}
const fitCameraToObject = function ( object, offset, orbitControls ) {
const boundingBox = new THREE.Box3();
boundingBox.setFromObject( object );
const center = boundingBox.getCenter();
const size = boundingBox.getSize();
// get the max side of the bounding box
const maxDim = Math.max( size.x, size.y, size.z );
const fov = this.camera.fov * ( Math.PI / 180 );
let cameraZ = Math.abs( maxDim / 4 * Math.tan( fov * 2 ) );
// offset the camera as desired - usually a value of ~ 1.25 is good to prevent
// object filling the whole canvas
if( offset !== undefined && offset !== 0 ) cameraZ *= offset;
camera.position.set( center.x, center.y, cameraZ );
// set the far plane of the camera so that it easily encompasses the whole object
const minZ = boundingBox.min.z;
const cameraToFarEdge = ( minZ < 0 ) ? -minZ + cameraZ : cameraZ - minZ;
this.camera.far = cameraToFarEdge * 3;
this.camera.updateProjectionMatrix();
if ( orbitControls !== undefined ) {
// set camera to rotate around center of loaded object
orbitControls.target = center;
// prevent camera from zooming out far enough to create far plane cutoff
orbitControls.maxDistance = cameraToFarEdge * 2;
}
};
function init() {
const container = document.createElement( 'div' );
document.body.appendChild( container );
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x7d7d7d );
scene.fog = new THREE.Fog( 0x7d7d7d, 2200, 6000 );
scene.rotation.y = Math.PI / 2;
camera = new THREE.PerspectiveCamera( 28, window.innerWidth / window.innerHeight, 1, 80000 );
camera.position.set( 1000, 300, 300 );
const SpotLight = new THREE.SpotLight( 0xffa95c, 1.8 );
SpotLight.position.set( -5000,500,5000 );
SpotLight.castShadow = true;
SpotLight.shadow.bias = 0.01;
// SpotLight.distance = 500;
// SpotLight.penumbra = 0.05;
SpotLight.shadow.camera.fov = 28; // same as the camera
// SpotLight.shadow.camera.near = 1; // same as the camera
// SpotLight.shadow.camera.far = 80000; // same as the camera
SpotLight.shadow.mapSize.width = 1024*4;
SpotLight.shadow.mapSize.height = 1024*4;
// scene.add( SpotLight );
// const SpotLightHelper = new THREE.SpotLightHelper(SpotLight);
// scene.add(SpotLightHelper);
// const cameraHelper = new THREE.CameraHelper(SpotLight.shadow.camera);
// scene.add(cameraHelper)
const light2 = new THREE.SpotLight( 0xffa95c, 1.6 );
light2.position.set( 5000, 500, -5000 );
light2.castShadow = true;
light2.shadow.bias = 0.01;
light2.shadow.mapSize.width = 1024*4;
light2.shadow.mapSize.height = 1024*4;
scene.add( light2 );
const _hemiLight = new THREE.HemisphereLight(0xF1F1F1, 0x2A2A2A, 1.0);
scene.add(_hemiLight);
const _AmbientLight = new THREE.AmbientLight(0x6E6E6E, 0.8);
scene.add(_AmbientLight);
// const hemiLight = new THREE.HemisphereLight( new THREE.Color('hsl(198, 22%, 88%)'), new THREE.Color('hsl(204, 4%, 29%)'), 1.2 );
// hemiLight.position.set( 0, 200, 0 );
// scene.add( hemiLight );
// const light = new THREE.AmbientLight( 0xffffff, 0.8 ); // soft white light
// scene.add( light );
const dirLight = new THREE.DirectionalLight( 0xffffff );
dirLight.position.set( -5000, 500, 5000 );
// const dirLight = new THREE.DirectionalLight(new THREE.Color('hsl(280, 22%, 88%)'), 0.48);
// dirLight.position.set(-100, 0, 100);
dirLight.castShadow = true;
dirLight.shadow.camera.top = 3000;
dirLight.shadow.camera.bottom = - 10000;
dirLight.shadow.camera.left = - 12000;
dirLight.shadow.camera.right = 12000;
scene.add( dirLight );
// const fillLight = new THREE.DirectionalLight(new THREE.Color('hsl(209, 60%, 88%)'), 0.75);
// fillLight.position.set(100, 0, 100);
// const backLight = new THREE.DirectionalLight(new THREE.Color('hsl(209, 60%, 88%)'), 0.6);
// backLight.position.set(100, 0, -100).normalize();
// scene.add( fillLight );
// scene.add( backLight );
// scene.add( new THREE.CameraHelper( dirLight.shadow.camera ) );
// ground
// const mesh = new THREE.Mesh( new THREE.PlaneGeometry( 200000, 200000 ), new THREE.MeshPhongMaterial( { color: 0x696969, depthWrite: false } ) );
// mesh.rotation.x = - Math.PI / 2;
// mesh.receiveShadow = true;
// scene.add( mesh );
// const GroundMesh = new THREE.PlaneGeometry( 2000, 2000 );
// GroundMesh.rotateX( - Math.PI / 2 );
// const material = new THREE.ShadowMaterial();
// material.opacity = 0.2;
// const plane = new THREE.Mesh( GroundMesh, material );
// plane.position.y = -200;
// plane.receiveShadow = true;
// scene.add( plane );
// const grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
// grid.material.opacity = 0.2;
// grid.material.transparent = true;
// scene.add( grid );
// model
// const manager = new THREE.LoadingManager();
// manager.addHandler( /\.dds$/i, new DDSLoader() );
// default material
const loader = new FBXLoader();
@foreach ($files as $file)
@if (strtolower(pathinfo($file, PATHINFO_EXTENSION)) == 'fbx')
loader.setResourcePath('storage/models/{{ $modelId }}/').load('storage/{{ $file }}', function ( object ) {
object.traverse( function ( child ) {
if ( child.isMesh ) {
if ( child instanceof THREE.Mesh ) {
const m = child.material;
console.log( child.name );
console.log( child.material );
var _TextureLoader = new THREE.TextureLoader();
var _GreyTex = _TextureLoader.load('https://modelviewer.cgig.ru/storage/models/22/ximage_954a7e11f8031d.png');
// ---------------------------------------------------------------
// -- this section for MultiMaterial
// ---------------------------------------------------------------
if ( Array.isArray( m ) ) {
for ( var i = 0; i < m.length; i++ ) {
// this section for material with texture in 3ds max Opacity slot
if( m[ i ].alphaMap !== null ) {
m[ i ].transparent = true;
// if( m[ i ].map.image.width <= 256 && m[ i ].map.image.height <= 256 ) {
// m[ i ].alphaTest = 0.001;
// } else {
m[ i ].alphaTest = 0.4;
// }
// m[ i ].alphaMap = null;
}
// this section for general material (without texture in 3ds max Opacity slot)
m[ i ].color.set( 0xffffff );
// m[ i ].map = _GreyTex;
if (m[ i ].normalMap !== null) {
// console.log( m[ i ].normalMap );
m[ i ].normalMapType = THREE.TangentSpaceNormalMap;
const nPower = (2 - 0.6);
// m[ i ].normalScale.setScalar(-1.0 * nPower); // invert normal map
// m[ i ].normalMap.wrapS = THREE.RepeatWrapping;
// m[ i ].normalMap.wrapS = THREE.MirroredRepeatWrapping;
// m[ i ].normalMap.wrapT = THREE.MirroredRepeatWrapping;
}
m[ i ].map.magFilter = THREE.NearestFilter;
m[ i ].map.minFilter = THREE.NearestFilter;
m[ i ].side = THREE.DoubleSide;
m[ i ].depthTest = true;
m[ i ].depthWrite = true;
m[ i ].skinning = true;
var tex = m[ i ].map.clone();
tex.needsUpdate = true;
}
// ---------------------------------------------------------------
// -- this section for single material
// ---------------------------------------------------------------
} else {
var tex = m.map.clone();
console.log( child.name, m.name, m.specular, m.shininess );
// console.log( 'Image width :', tex.image.naturalWidth);
// this section for material with texture in 3ds max Opacity slot
if( m.alphaMap !== null ) {
m.transparent = true;
// if( m.map.image.width <= 256 && m.map.image.height <= 256 ) {
// m.alphaTest = 0.001;
// } else {
m.alphaTest = 0.4;
// }
m.alphaMap = null;
}
// this section for general material (without texture in 3ds max Opacity slot)
m.color.set( 0xffffff );
// m.map = _GreyTex;
if (m.normalMap !== null) {
// console.log( m.normalMap );
m.normalMapType = THREE.TangentSpaceNormalMap;
const nPower = (2 - 0.6);
// m.normalScale.setScalar(-1.0 * nPower); // invert normal map
// m.normalMap.wrapS = THREE.RepeatWrapping;
// m.normalMap.wrapS = THREE.MirroredRepeatWrapping;
// m.normalMap.wrapT = THREE.MirroredRepeatWrapping;
}
m.map.magFilter = THREE.NearestFilter;
m.map.minFilter = THREE.NearestFilter;
m.side = THREE.DoubleSide;
// m.shininess = 50;
m.depthTest = true;
m.depthWrite = true;
m.skinning = true;
// m.map.antialias = true;
// m.flatShading = true;
// m.map.wireframe = true;
tex.needsUpdate = true;
}
}
// ---------------------------------------------------------------
// -- default settings for objects in model
// ---------------------------------------------------------------
child.receiveShadow = true;
child.castShadow = true;
}
} );
scene.add( object );
console.log( object );
fitCameraToObject( object, 10.0, controls );
} );
@endif
@endforeach
renderer = new THREE.WebGLRenderer();
renderer.sortObjects = false;
// renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMapping = THREE.ReinhardToneMapping;
// renderer.toneMappingExposure = 1.6;
renderer.outputEncoding = THREE.GammaEncoding;
renderer.gammaFactor = 1.8;
// renderer.physicallyCorrectLights = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
// renderer.setClearColor(new THREE.Color("hsl(0, 0%, 10%)"));
container.appendChild( renderer.domElement );
const controls = new OrbitControls( camera, renderer.domElement );
controls.target.set( 0, 100, 0 );
controls.update();
window.addEventListener( 'resize', onWindowResize );
// stats
stats = new Stats();
container.appendChild( stats.dom );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function animate() {
requestAnimationFrame( animate );
const delta = clock.getDelta();
if ( mixer ) mixer.update( delta );
renderer.render( scene, camera );
stats.update();
}
</script>
</body>
</html>
here’s my model:
https://modelviewer.cgig.ru/model?url=https%3A%2F%2Fcgig.ru%2Fdownloads%2Fmodels%2Fcod_bo_cw_pc%2Fcharacters%2FThe_Investigator_Female11.txt