JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<title>My first Three.js app</title>
<style>
canvas {
width: 100%
height: 100%
}
</style>
</head>
<body>
<script src="https://threejs.org/build/three.min.js"></script>
</body>
</html>
JavaScript
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Initialization of objects
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshPhongMaterial({color: 0x009900});
var material2 = new THREE.MeshPhongMaterial({color: 0x990099});
var cube = new THREE.Mesh(geometry, material);
var cube2 = new THREE.Mesh(geometry, material2);
var spotLight = new THREE.SpotLight( 0xffffff );
var planeGeometry = new THREE.PlaneGeometry(60, 60);
var planeMaterial = new THREE.MeshPhongMaterial(0x888888);
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
// Adding objects to scene
scene.add(cube);
scene.add(cube2);
scene.add(spotLight);
scene.add(plane);
scene.add( new THREE.AxisHelper( 10 ) );
// Setting object attributes
plane.position.z = -1;
spotLight.position.set( 5, 5, 5 );
cube2.position.x = 2;
cube2.position.y = 2;
camera.position.z = 3;
function render() {
requestAnimationFrame(render);
var timer = -0.0002 * Date.now();
camera.position.x = 5 * Math.cos( timer );
camera.position.y = 5 * Math.sin( timer );
camera.lookAt( cube.position );
renderer.render(scene, camera)
}
render();