Código principal
// agregar gltf
// Instantiate a loader
const loader = new GLTFLoader();
var monkey;
// // Optional: Provide a DRACOLoader instance to decode compressed mesh data
// const dracoLoader = new DRACOLoader();
// dracoLoader.setDecoderPath( '/examples/jsm/libs/draco/' );
// loader.setDRACOLoader( dracoLoader );
// Load a glTF resource
loader.load(
// resource URL
'https://bites.link/files/tutorial/three-js/monkey.glb',
// called when the resource is loaded
function ( gltf ) {
monkey = gltf
scene.add( gltf.scene );
gltf.scene.position.set(2,0,1)
gltf.castShadow = true;
// gltf.animations; // Array<THREE.AnimationClip>
// gltf.scene; // THREE.Group
// gltf.scenes; // Array<THREE.Group>
// gltf.cameras; // Array<THREE.Camera>
// gltf.asset; // Object
},
// called while loading is progressing
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
// called when loading has errors
function ( error ) {
console.log( 'An error happened' );
}
);
Código completo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>App</title>
</head>
<body>
<h1>App</h1>
<div style="display: flex; justify-content: center;">
<div id="game"></div>
</div>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.151.3/build/three.module.js",
"three/addons/": "https://unpkg.com/three@0.151.3/examples/jsm/"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
// size del la ventana de visualizacion
const viewWidth = 360;
const viewHeight = 360;
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(viewWidth, viewHeight);
renderer.shadowMap.enabled = true;
// renderer.shadowMap.type = THREE.PCFSoftShadowMap;
// agregar en el div
let game_div = document.getElementById("game");
game_div.appendChild(renderer.domElement);
// agregar cubo
const geometry = new THREE.BoxGeometry()
const material = new THREE.MeshStandardMaterial({color:0x888888})
let cube = new THREE.Mesh(geometry, material)
cube.castShadow = true
cube.position.set(0,0,0)
scene.add(cube)
// opcional: agregar tres cubos mas
add_cubes(scene);
// agregar luz
let light = new THREE.DirectionalLight(0xffffff,1)
light.position.set(0,1,3)
light.castShadow = true
scene.add(light)
// agregar plano
let planeGeometry = new THREE.PlaneGeometry(20,20,32)
let planeMaterial = new THREE.MeshStandardMaterial({color: 0xffff00})
let plane = new THREE.Mesh(planeGeometry,planeMaterial)
plane.receiveShadow = true;
plane.position.set(0,0,-1)
scene.add(plane)
// mover la camara
camera.position.set(2.5,-5.5,7.5)
camera.rotation.set(0.5,-4.5,7)
// agregar controles
let controls = new OrbitControls(camera, renderer.domElement);
// controls.enableZoom = false;
// controls.minDistance = 1;
// controls.maxDistance = 15;
// controls.enablePan = false // Desactivar panning
// controls.enableRotate = false; // Desactivar rotación
// controls.enableDamping = true;
// controls.damplingFactor = 0.1;
// agregar gltf
// Instantiate a loader
const loader = new GLTFLoader();
var monkey;
// // Optional: Provide a DRACOLoader instance to decode compressed mesh data
// const dracoLoader = new DRACOLoader();
// dracoLoader.setDecoderPath( '/examples/jsm/libs/draco/' );
// loader.setDRACOLoader( dracoLoader );
// Load a glTF resource
loader.load(
// resource URL
'https://bites.link/files/tutorial/three-js/monkey.glb',
// called when the resource is loaded
function ( gltf ) {
monkey = gltf
scene.add( gltf.scene );
gltf.scene.position.set(2,0,1)
gltf.castShadow = true;
// gltf.animations; // Array<THREE.AnimationClip>
// gltf.scene; // THREE.Group
// gltf.scenes; // Array<THREE.Group>
// gltf.cameras; // Array<THREE.Camera>
// gltf.asset; // Object
},
// called while loading is progressing
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
// called when loading has errors
function ( error ) {
console.log( 'An error happened' );
}
);
function animate(){
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
// required if controls.enableDamping or controls.autoRotate are set to true
controls.update();
// console.log(camera.position);
// console.log(camera.rotation);
if(monkey)
monkey.scene.rotation.z += 0.01
}
function add_cubes(scene){
const geometry = new THREE.BoxGeometry();
const material1 = new THREE.MeshStandardMaterial({color:0xff0000});
const material2 = new THREE.MeshStandardMaterial({color:0x00ff00});
const material3 = new THREE.MeshStandardMaterial({color:0x0000ff});
let cube1 = new THREE.Mesh(geometry, material1);
let cube2 = new THREE.Mesh(geometry, material2);
let cube3 = new THREE.Mesh(geometry, material3);
cube1.castShadow = true
cube2.castShadow = true
cube3.castShadow = true
scene.add(cube1);
scene.add(cube2);
scene.add(cube3);
cube1.position.x = 5
cube2.position.y = 5
cube3.position.z = 5
}
animate();
</script>
</body>
</html>
Referencias