JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
JavaScript
// a basic three.js scene
var container, renderer, scene, camera, controls, plane;
init();
animate();
function init() {
// renderer
renderer = new THREE.WebGLRenderer({
antialias: false
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xccccff);
container = document.createElement('div');
document.body.appendChild(container);
container.appendChild(renderer.domElement);
// scene
scene = new THREE.Scene();
scene.add(new THREE.AxisHelper(300));
// camera
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(0, 200, 800);
// (camera) controls
controls = new THREE.OrbitControls(camera, renderer.domElement);
var planeGeometry = new THREE.PlaneGeometry(500, 500, 10, 10);
var planeMaterial = new THREE.MeshBasicMaterial({
color: 0x0000cc,
});
plane = new THREE.Mesh(planeGeometry, planeMaterial);
scene.add(plane);
// events
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize(event) {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
plane.quaternion.copy( camera.quaternion );
renderer.render(scene, camera);
requestAnimationFrame(animate);
}