JSFiddle - React, Tailwind, and code Playground
HTML
<input id="rotate" type="range" min="0" max="360" step="1" value="0" />
<div id="app"></div>
CSS
* {
margin: 0;
padding: 0;
}
body {
position: fixed;
}
canvas {
width: 100%;
height: 100%;
overflow: hidden;
}
input {
position: absolute;
outline: 1px solid #fff;
}
JavaScript
import * as THREE from 'https://threejs.org/build/three.module.js'
import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js'
var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
var ldrUrls = [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ];
var texture = new THREE.CubeTextureLoader()
.setPath( 'https://threejs.org/examples/textures/cube/pisa/' )
.load( ldrUrls, function () {
scene.background = texture;
} );
var scene = new THREE.Scene()
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000)
var controls = new OrbitControls(camera, renderer.domElement)
camera.position.set( 0, 6, 30 );
controls.target.set( 5, 0, 0 );
controls.enableZoom = true
controls.screenSpacePanning = false
const cube_geometry = new THREE.CubeGeometry(5, 5, 5)
for (var i = 0; i < cube_geometry.faces.length; i += 2) {
var color = Math.random() * 0xffffff
cube_geometry.faces[i].color.setHex(color)
cube_geometry.faces[i + 1].color.setHex(color)
}
const cube_material = new THREE.MeshLambertMaterial({
color: 0xffffff,
vertexColors: THREE.FaceColors
});
const cube = new THREE.Mesh(cube_geometry, cube_material);
scene.add(cube)
const light = new THREE.AmbientLight(0xffffff)
scene.add(light)
document.getElementById('rotate').oninput = (e) => {
const radians = e.target.value * Math.PI / 180
controls.target.applyAxisAngle( camera.up, radians - scene.rotation.y )
camera.position.applyAxisAngle( camera.up, radians - scene.rotation.y )
scene.rotation.y = radians
}
animate()
function animate() {
requestAnimationFrame(animate)
controls.update()
renderer.render(scene, camera)
}