here’s my 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();
}
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.shadowCameraFov = 70;
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.4);
scene.add(_hemiLight);
const _AmbientLight = new THREE.AmbientLight(0x6E6E6E, 2);
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( 0, 200, 100 );
// 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 = 180;
// dirLight.shadow.camera.bottom = - 100;
// dirLight.shadow.camera.left = - 120;
// dirLight.shadow.camera.right = 120;
// 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 );
// if ( m.name === 'shadow' ) {
// scene.removeChildRecurse( child );
// }
// ---------------------------------------------------------------
// -- 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;
m[ i ].alphaTest = 0.02;
m[ i ].alphaMap = null;
}
// this section for general material (without texture in 3ds max Opacity slot)
m[ i ].color.set( 0xffffff );
// m[ i ].map.magFilter = THREE.NearestFilter;
// m[ i ].map.minFilter = THREE.NearestFilter;
m[ i ].side = THREE.DoubleSide;
// m[ i ].flatShading = true;
m[ i ].shininess = 46;
m[ i ].depthTest = true;
m[ i ].depthWrite = true;
m[ i ].skinning = true;
m[ i ].map.needsUpdate = true;
m[ i ].color.set( 0xffffff );
m[ i ].side = THREE.DoubleSide;
// m[ i ].flatShading = true;
m[ i ].shininess = 6;
m[ i ].depthTest = true;
m[ i ].depthWrite = true;
m[ i ].skinning = true;
m[ i ].map.needsUpdate = true;
}
// ---------------------------------------------------------------
// -- this section for single material
// ---------------------------------------------------------------
} else {
// this section for material with texture in 3ds max Opacity slot
if( m.alphaMap !== null ) {
m.transparent = true;
var tmp = m.color;
// if( m.map.image.width <= 256 ) {
m.alphaTest = 0.02;
m.alphaMap = null;
}
// this section for general material (without texture in 3ds max Opacity slot)
m.color.set( 0xffffff );
var _TextureLoader = new THREE.TextureLoader();
var _GreyTex = _TextureLoader.load('https://modelviewer.cgig.ru/storage/models/22/ximage_954a7e11f8031d.png');
m.map = _GreyTex;
console.log( m.normalMap );
m.normalMapType = THREE.TangentSpaceNormalMap;
const nPower = (2 - 0.6);
// m.normalScale.setScalar(-1.0 * nPower);
m.side = THREE.DoubleSide;
// m.specular.set( 0xA0A0A0 );
m.shininess = 50;
m.depthTest = true;
m.depthWrite = true;
m.skinning = true;
// m.map.antialias = true;
m.map.magFilter = THREE.NearestFilter;
m.map.minFilter = THREE.NearestFilter;
// m.flatShading = true;
// m.map.wireframe = true;
var tex = m.map.clone();
tex.needsUpdate = true;
}
// ---------------------------------------------------------------
// -- default settings for objects in model
// ---------------------------------------------------------------
}
child.receiveShadow = true;
child.castShadow = true;
}
} );
scene.add( object );
} );
@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 scene:
https://modelviewer.cgig.ru/model?url=https%3A%2F%2Fcgig.ru%2Fdownloads%2Fmodels%2Fcod_bo_cw_pc%2Fcharacters%2FThe_Investigator_Female5.txt
please tell me what I’m doing wrong?