JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>
<canvas id='canvas'></canvas>
CSS
html{
height:100%;
}
body{
height: 100%;
}
canvas{
height: 100%;
width: 100%;
}
JavaScript
const RED = 0xff0000;
const GREEN = 0x00ff00;
const BLUE = 0x0000ff;
const LIMIT = 1000;
let canvas, scene, renderer, camera, cone;
function initCamera() {
camera = new THREE.PerspectiveCamera(70, 1, 1, 10000);
scene.add(camera);
camera.position.set(450, 400, 350);
}
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
function doWindowResize() {
setCanvasResolution();
setRendererSize();
setCameraAspect();
}
function setCanvasResolution() {
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
}
function setRendererSize() {
renderer.setSize(canvas.width, canvas.height, false);
}
function setCameraAspect() {
camera.aspect = canvas.clientWidth / canvas.clientHeight;
camera.updateProjectionMatrix();
}
function initCone() {
const geometry = new THREE.ConeGeometry(20, 60, 32);
geometry.rotateX(Math.PI * - 0.5);
cone = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial());
cone.position.set(100, 0, 0);
scene.add(cone);
const axesHelper = new THREE.AxesHelper(80);
cone.add(axesHelper);
}
function initGui() {
const controls = {
rotateCone() {
const i = new THREE.Vector3(1, 0, 0);
const quaternion = new THREE.Quaternion();
quaternion.setFromAxisAngle(i, -Math.PI / 2);
cone.setRotationFromQuaternion(quaternion);
}
}
const gui = new dat.GUI();
gui.add(controls, 'rotateCone');
}
window.onload = function() {
canvas = document.getElementById('canvas');
renderer = new THREE.WebGLRenderer({
canvas: canvas,
antialias: true
});
window.addEventListener("resize", doWindowResize);
scene = new THREE.Scene();
//initAxes();
scene.add(new THREE.AmbientLight(0xffffff));
initCone();
initCamera();
initGui();
new THREE.OrbitControls(camera, canvas);
doWindowResize();
render();
}