Klesokla-Skal: Difference between revisions
Jump to navigation
Jump to search
Created page with "Klesokla-Skal" |
Elordenador (talk | contribs) No edit summary |
||
| Line 1: | Line 1: | ||
Klesokla-Skal | Klesokla-Skal | ||
<div id="viewer"></div> | |||
<script src="https://cdn.jsdelivr.net/npm/three@0.164.0/build/three.min.js"></script> | |||
<script src="https://cdn.jsdelivr.net/npm/three@0.164.0/examples/js/loaders/OBJLoader.js"></script> | |||
<script src="https://cdn.jsdelivr.net/npm/three@0.164.0/examples/js/loaders/MTLLoader.js"></script> | |||
<script> | |||
const scene = new THREE.Scene(); | |||
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); | |||
const renderer = new THREE.WebGLRenderer({ antialias: true }); | |||
renderer.setSize(window.innerWidth, window.innerHeight); | |||
document.body.appendChild(renderer.domElement); | |||
const light = new THREE.DirectionalLight(0xffffff, 1); | |||
light.position.set(5, 10, 5); | |||
scene.add(light); | |||
scene.add(new THREE.AmbientLight(0xffffff, 0.5)); | |||
const mtlLoader = new THREE.MTLLoader(); | |||
mtlLoader.load("models/mi_estructura.mtl", (materials) => { | |||
materials.preload(); | |||
const objLoader = new THREE.OBJLoader(); | |||
objLoader.setMaterials(materials); | |||
objLoader.load("models/mi_estructura.obj", (object) => { | |||
object.scale.set(0.1, 0.1, 0.1); // ajusta el tamaño | |||
scene.add(object); | |||
camera.position.z = 10; | |||
function animate() { | |||
requestAnimationFrame(animate); | |||
object.rotation.y += 0.01; | |||
renderer.render(scene, camera); | |||
} | |||
animate(); | |||
}); | |||
}); | |||
</script> | |||
https://raw.githubusercontent.com/dsaub/3dobjects/refs/heads/latest/RENDER.obj | |||
Revision as of 09:56, 12 October 2025
Klesokla-Skal
<script src="https://cdn.jsdelivr.net/npm/three@0.164.0/build/three.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/three@0.164.0/examples/js/loaders/OBJLoader.js"></script> <script src="https://cdn.jsdelivr.net/npm/three@0.164.0/examples/js/loaders/MTLLoader.js"></script>
<script>
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 10, 5);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));
const mtlLoader = new THREE.MTLLoader();
mtlLoader.load("models/mi_estructura.mtl", (materials) => {
materials.preload();
const objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.load("models/mi_estructura.obj", (object) => {
object.scale.set(0.1, 0.1, 0.1); // ajusta el tamaño
scene.add(object);
camera.position.z = 10;
function animate() {
requestAnimationFrame(animate);
object.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
});
});
</script>
https://raw.githubusercontent.com/dsaub/3dobjects/refs/heads/latest/RENDER.obj