Skip to content

Instantly share code, notes, and snippets.

@Sean-Bradley
Last active August 6, 2020 20:11
Show Gist options
  • Save Sean-Bradley/5478666c2e0d4e3bbe7431b93b14198d to your computer and use it in GitHub Desktop.
Save Sean-Bradley/5478666c2e0d4e3bbe7431b93b14198d to your computer and use it in GitHub Desktop.
client.js script for the basic threejs server
import * as THREE from '/build/three.module.js';
import {OrbitControls} from '/jsm/controls/OrbitControls.js';
import Stats from '/jsm/libs/stats.module.js';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.z = 2;
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({
color: 0x00ff00,
wireframe: true
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
render();
}, false);
const stats = Stats();
document.body.appendChild(stats.dom);
var animate = function () {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
controls.update();
render();
stats.update();
};
function render() {
renderer.render(scene, camera);
}
animate();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment