Hi I am trying to make spring java application which simply get simple cube mesh fbx and render by three.js. I have read offical three.js documentation and searched stackoverflow but got nothing
the below is part of html code for upload fbx filet
<form action="/isearch" data-transition="fade" enctype="multipart/form-data">
<input type="file" name="file" accept=".fbx" required/>
<buttontype="submit"></button>
</form>
and below is the part of controller code for /isearch mapping
@PostMapping("/isearch")
public String uploadModel(Model model, @PageableDefault(size = 6) Pageable pageable,
@RequestParam("file") MultipartFile file, HttpServletRequest request) {
if (file.isEmpty()) {
logger.warn("Upload attempt with empty file");
return "redirect:/uploadError";
}
String directoryPath = "src/main/resources/static/3dmodels/";
String originalFileName = file.getOriginalFilename();
Path path = Paths.get(directoryPath + File.separator + originalFileName);
try (InputStream inputStream = file.getInputStream(); Reader reader = new InputStreamReader(inputStream)) {
if (!Files.exists(path)) {
Files.copy(inputStream, path);
}
String baseUrl = ServletUriComponentsBuilder.fromRequestUri(request)
.replacePath(null)
.build()
.toUriString();
String fileUrl = baseUrl + "/3dmodels/" + originalFileName;
model.addAttribute("fileUrl", fileUrl);
logger.info("File successfully uploaded and accessible at: {}", fileUrl);
} catch (IOException e) {
e.printStackTrace();
logger.error("Error occurred while uploading file", e);
return "redirect:/uploadError";
}
return "isearch.jsp";
}
and the below is the html file code with js code for rendering cube
<div id="canvas" background-color: transparent;">
</div>
<script>
var modelPath = "${fileUrl}";
type="module" src="${pageContext.request.contextPath}/resources/js/3drender.js">
</script>
import * as THREE from 'https://unpkg.com/three/build/three.module.js';
import { FBXLoader } from 'https://unpkg.com/three/examples/jsm/loaders/FBXLoader.js';
let scene, camera, renderer, clock, mixer;
function init() {
const container = document.getElementById('model-container');
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 100, 200);
camera.lookAt(scene.position);
renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setClearColor(0x000000, 0);
renderer.setSize(container.clientWidth, container.clientHeight);
container.appendChild(renderer.domElement);
const ambientLight = new THREE.AmbientLight(0x404040, 2);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 3);
directionalLight.position.set(0, 10, 10);
scene.add(directionalLight);
const loader = new THREE.FBXLoader();
loader.load('${imagePath}', function (object) {
mixer = new THREE.AnimationMixer(object);
const action = mixer.clipAction(object.animations[0]);
action.play();
object.traverse(function (child) {
if (child.isMesh) {
child.material = new THREE.MeshStandardMaterial({color: 0xff0000});
child.castShadow = true;
child.receiveShadow = true;
}
});
object.scale.set(0.1, 0.1, 0.1);
scene.add(object);
animate();
});
function animate() {
requestAnimationFrame(animate);
const delta = clock.getDelta();
if (mixer) mixer.update(delta);
renderer.render(scene, camera);
}
clock = new THREE.Clock();
}
window.onload = init;
it shows html rendering page but I cannot see nothing
I want to render simple cube mesh in website by uploading simplecube.fbx
but there are few materials for references
If there exist any tutorial for this please give me a hint please
thank you