46 lines
1.4 KiB
JavaScript
46 lines
1.4 KiB
JavaScript
import * as THREE from 'three';
|
|
import { FirstPersonControls } from 'three/addons/controls/FirstPersonControls.js';
|
|
|
|
// Setup stuff
|
|
const scene = new THREE.Scene();
|
|
//const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
|
//camera.position.z = 5;
|
|
let camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
|
|
camera.position.z = 5;
|
|
|
|
const renderer = new THREE.WebGLRenderer({
|
|
canvas: document.querySelector('#kennel'),
|
|
});
|
|
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
|
|
// Cube geometry stuff.
|
|
const geometry = new THREE.BoxGeometry(5, 1, 1);
|
|
const material = new THREE.MeshBasicMaterial({ color: 0x962FFE });
|
|
const material2 = new THREE.MeshBasicMaterial({ color: 0x00FF00 });
|
|
const cube = new THREE.Mesh(geometry, material);
|
|
const cube2 = new THREE.Mesh(geometry, material2);
|
|
cube2.position.x = 4;
|
|
cube2.position.z = 7;
|
|
cube2.rotateX = 35;
|
|
scene.add(cube);
|
|
scene.add(cube2);
|
|
|
|
// Light stuff
|
|
const light = new THREE.DirectionalLight(0xFFFFFF, 0.5);
|
|
light.position.x = 5;
|
|
scene.add(light);
|
|
|
|
// Controller stuff
|
|
let clock = new THREE.Clock();
|
|
let controls = new FirstPersonControls(camera, renderer.domElement);
|
|
controls.movementSpeed = 5;
|
|
controls.lookSpeed = 0.1;
|
|
controls.lookVertical = false;
|
|
|
|
function animate() {
|
|
controls.update(clock.getDelta());
|
|
renderer.render(scene, camera);
|
|
}
|
|
renderer.setAnimationLoop(animate);
|