A child of God • Trust in «as for me and my family, we will serve the Lord» • Software Developer 💻 • Graphic Designer 😍 • Creative 👌 • Thankful
{
const scene = new THREE.Scene();
const sizes = {
width: 400,
heigth: 400
}
// Crea una cámara perspectiva y establece su posición y orientación
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.heigth, 0.1, 100);
camera.position.x = 1;
camera.position.y = 1;
camera.position.z = 4;
camera.rotation.y = 6 * Math.PI / 180;
// Crea la geometría del cuerpo del perro como una caja
const dogGeometry = new THREE.BoxGeometry(1, 1, 1);
// Crea el material del cuerpo del perro como un material de piel
const dogMaterial = new THREE.MeshStandardMaterial({
color: 0xffffff,
roughness: 0.7,
metalness: 0,
map: new THREE.TextureLoader().load('ruta/a/la/textura.jpg'),
});
// Crea una malla combinando la geometría y el material del cuerpo del perro
const dog = new THREE.Mesh(dogGeometry, dogMaterial);
// Añade la malla del cuerpo del perro a la escena
scene.add(dog);
// Crea una luz puntual y establece su posición
const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(0, 0, 10);
// Añade la luz a la escena
scene.add(light);
//const controls = new THREE.OrbitControls(camera, document.querySelector('.webgl'));
scene.background = new THREE.Color('#e2e2e2');
// Crea un renderer y establece su tamaño
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('.webgl')
})
//const renderer = new THREE.WebGLRenderer();
renderer.setSize(sizes.width, sizes.heigth);
//controls.enableDamping = true;
// Añade el renderer al DOM
//document.body.appendChild(renderer.domElement);
// Dibuja la escena y la cámara en el canvas
renderer.render(scene, camera);
}
THREE = {
const THREE = window.THREE = await require("three@0.147.0/build/three.min.js");
await require("three@0.147.0/examples/js/controls/OrbitControls.js").catch(() => {});
return THREE;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
