After experimenting with the ThreeJS library for a few weeks and drawing inspiration from others, I managed to create a canvas that displays an external .stl-file.
However, my main issue is that I am struggling to apply any transformations to it. While I can move the camera around smoothly, basic transformations do not seem to work. Due to my limited knowledge of JavaScript, I may have overlooked some crucial elements.
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - STL</title>
<meta charset="utf-8>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
background-color: #000000;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script src="../build/three.min.js"></script>
<script src="js/loaders/STLLoader.js"></script>
<script src="js/Detector.js"></script>
<script src="dat.gui.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container;
var rotationSpeed;
var camera, cameraTarget, scene, renderer;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 15 );
camera.position.set( -3, 1, 3 );
cameraTarget = new THREE.Vector3( 0, 0, 0 );
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0x72645b, 2, 15 );
// Remaining code not displayed for brevity
}
The final lines before the render() function only result in a blank, black page being displayed. Even simple operations like model.position.x += 0.02; seem to disrupt the functioning.