three.js dev template - module
HTML
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/[email protected]/build/three.module.js",
"three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
}
}
</script>
CSS
body {
margin: 0px;
}
JavaScript
import * as THREE from 'three';
import { WebGLRenderer } from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
let camera, scene, renderer;
let controls;
init();
function init() {
// camara
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(1, 1, 1);
//escena
scene = new THREE.Scene();
//fog
scene.fog = new THREE.Fog(0xcccccc, 20, 25);
//loader
const loader = new GLTFLoader();
loader.load(
'https://cdn.glitch.global/381a5db6-00f3-4e79-bd45-9f18d0fa6e06/cara_01.glb?v=1709650110595', function (gltf) {
const object = gltf.scene;
object.position.set(0, 0, 0);
object.visible = false;
scene.add(object);
let material = new THREE.PointsMaterial(
{
color: 0xFFFFFF,
size: 0.01,
opacity: 0.5,
});
material.fog = true;
let mesh = new THREE.Points(object.children[0].geometry, material);
mesh.scale.setScalar( 10 );
scene.add(mesh);
});
//luz
const light = new THREE.AmbientLight(0x404040); // soft white light
light.position.set(0, 0, 0);
scene.add(light);
const pointLight = new THREE.PointLight(0xff0000, 1, 100);
pointLight.position.set(1, 1, 1);
scene.add(pointLight);
//renderer
renderer = new WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setAnimationLoop(animate)
document.body.appendChild(renderer.domElement);
window.addEventListener('resize', onWindowResize);
//controles
controls = new OrbitControls(camera, renderer.domElement);
controls.update();
}
//responsive canvas
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth,...