I've been experimenting with adding this gltf model () using threeJS. The current code snippet is the only approach that has shown me a glimpse of the object, albeit just a small part. If anyone has insights on what modifications are needed, any assistance would be greatly appreciated.
import * as THREE from 'three';
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js';
import OrbitControls from 'three/examples/jsm/controls/OrbitControls.js'
import { Color } from 'three';
var camera, scene, renderer;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
camera.position.set(0, 10, 20);
scene = new THREE.Scene();
var loader = new GLTFLoader();
loader.load('styles/baseball/Baseball.gltf', function (gltf) {
scene.add(gltf.scene);
});
scene.background = new Color('blue')
var light = new THREE.AmbientLight(0x404040);
scene.add(light);
const light2 = new THREE.PointLight(0xff0000, 1, 100);
light2.position.set(50, 50, 50);
scene.add(light2);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
document.body.addEventListener('keydown', onKeyDown, false);
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
function onKeyDown(){
console.log("press")
switch(event.keyCode) {
case 83: // w
camera.position.z += 5;
break;
case 87: // s
camera.position.z -= 5;
break;
case 40: // down
camera.position.y -= 5;
break;
case 38: // up
camera.position.y += 5;
break;
}
}