Declarative THREE.js in Angular
HTML-код
- Опубликовано: 10 сен 2024
- Building 3D scenes with Angular has never been easier. Learn how Angular's powerful features like Dependency Injection and Content Projection bring what's possible to the table.
Slides: slides.com/cha...
GitHub Repo: github.com/nar...
Angular Three Demo: stackblitz.com...
ThreeJS Website: threejs.org/
ThreeJS+Svelte in play: / 1422753774096031750
Cool, the great idea makes the great library. I was surprised by the way creating all those stuff inside the canvas! Thanks for your contribution 👍
Good presentation! I was learning threejs with React. OMG, what a nightmare! I'm switching to Angular.
😍 Awesome 😍
Thanks 🤗
ViewChild('canvasElement', {static:true}) canvasElementRef:ElementRef< HTMLCanvasElement >; not working
first i installed this package npm install --save @types/three
second add this in ts :-
import * as THREE from 'three';
const w = window.innerWidth;
const h = window.innerHeight;
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, w / h, 1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(w, h);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
const animate = function () {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
and when i serve i had this problem in console "Module not found: Error: Can't resolve 'three' in 'M:\\projects\\ang-proj\\book-shop\\src\\app\\three'"
can you help me