35 lines
1020 B
JavaScript
35 lines
1020 B
JavaScript
import './style.css';
|
|
import * as THREE from 'three';
|
|
import WebGL from 'three/addons/capabilities/WebGL.js';
|
|
|
|
const scene = new THREE.Scene();
|
|
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
|
camera.position.y = -6.5;
|
|
camera.position.z = 5;
|
|
camera.rotation.x = 0.75;
|
|
|
|
const renderer = new THREE.WebGLRenderer({
|
|
canvas: document.querySelector('#canvas'),
|
|
});
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
|
|
const floor = new THREE.Mesh(new THREE.PlaneGeometry(10, 10), new THREE.MeshBasicMaterial({ color: 0x00ff00 }));
|
|
scene.add(floor);
|
|
|
|
const cube = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshBasicMaterial({ color: 0x00aaff }));
|
|
cube.position.z = 0.5;
|
|
scene.add(cube);
|
|
|
|
function animate() {
|
|
requestAnimationFrame(animate);
|
|
|
|
renderer.render(scene, camera);
|
|
}
|
|
|
|
if (WebGL.isWebGLAvailable()) {
|
|
animate();
|
|
} else {
|
|
const warning = WebGL.getWebGLErrorMessage();
|
|
document.querySelector('#canvas').appendChild(warning);
|
|
}
|