Ihr Druckauftrag
Lade...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Model Viewer</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/three@0.134.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.134.0/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.134.0/examples/js/loaders/OBJLoader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.134.0/examples/js/loaders/MTLLoader.js"></script>
<script>
// Set up scene
const scene = new THREE.Scene();
// Set up camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // Soft white light
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); // White light from above
directionalLight.position.set(0, 1, 0); // Set light direction
scene.add(directionalLight);
// Set up renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Create geometry
const geometry = new THREE.CylinderGeometry(1, 1, 2, 32);
const material = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true });
const mug = new THREE.Mesh(geometry, material);
scene.add(mug);
// Load the OBJ and MTL files
const mtlLoader = new THREE.MTLLoader();
mtlLoader.load('https://copier-center-haase.de/wp-content/uploads/2024/02/model.mtl', (materials) => {
materials.preload();
const objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.load('https://copier-center-haase.de/wp-content/uploads/2024/02/model.obj', (object) => {
scene.add(object);
});
});
// Set up mouse control
const controls = new THREE.OrbitControls(camera, renderer.domElement);
// Render function
function animate() {
requestAnimationFrame(animate);
mug.rotation.y += 0.01;
controls.update(); // Update controls
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
