Hello, I have a small problem. I would like my 3D model to be visible wherever it is in the “presentation” tag which is 5 times the height of the screen and not only in the screen size. I hope you understand my goal. Thank you in advance for any help you can give me (this is a final year project).
const renderer = new THREE.WebGLRenderer( { antialias: true }
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setClearColor(0x000000, 0);
renderer.setSize( window.innerWidth, window.innerHeight );
document.getElementById(‘presentation’).appendChild(renderer.domElement);
const pmremGenerator = new THREE.PMREMGenerator( renderer );
const scene = new THREE.Scene();
scene.environment = pmremGenerator.fromScene( new RoomEnvironment(), 0.04 ).texture;
const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 4, 0, 8 );
const controls = new OrbitControls( camera, renderer.domElement );
controls.target.set( 0, 0, 0 );
controls.update();
controls.enablePan = true;
controls.screenSpacePanning = true;
controls.enableZoom = false;
controls.enableDamping = false;
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath( ‘jsm/libs/draco/gltf/’ );
const loader = new GLTFLoader();
loader.setDRACOLoader( dracoLoader );
loader.load( ‘models/gltf/romportfolio.glTf’, function ( gltf ) {
const model = gltf.scene;
model.position.set( 0.5, -0.2, 0 );
model.scale.set( 0.008, 0.008, 0.008 );
scene.add( model );
mixer = new THREE.AnimationMixer( model );
mixer.clipAction( gltf.animations[ 0 ] ).play();
animate();
}, undefined, function ( e ) {
console.error( e );
} );