JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.jsdelivr.net/npm/three@0.119.1/build/three.js"></script>
JavaScript
var camera, scene, renderer;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
camera.position.set(2, 2, 2);
scene = new THREE.Scene();
camera.lookAt(scene.position);
var helper = new THREE.AxesHelper();
var colors = helper.geometry.attributes.color;
colors.setXYZ(0, 1, 0, 0);
colors.setXYZ(1, 1, 0, 0);
colors.setXYZ(2, 0, 0, 1);
colors.setXYZ(3, 0, 0, 1);
colors.setXYZ(4, 0, 1, 0);
colors.setXYZ(5, 0, 1, 0);
scene.add(helper);
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}