let speed = 1;
// Setup
const renderer = new THREE.WebGLRenderer({canvas: document.querySelector("#canvas")});
// Make and setup a camera.
const camera = new THREE.PerspectiveCamera(70, 1, 1, 1000);
camera.position.z = 400;
// Make a scene
const scene = new THREE.Scene();
// Make a cube.
const geometry = new THREE.BoxGeometry(200, 200, 200);
// Make a material
const material = new THREE.MeshPhongMaterial({
ambient: 0x555555,
color: 0x555555,
specular: 0xffffff,
shininess: 50,
shading: THREE.SmoothShading
});
// Create a mesh based on the geometry and material
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
// Add 2 lights.
const light1 = new THREE.PointLight(0xff0040, 2, 0);
light1.position.set(200, 100, 300);
scene.add(light1);
const light2 = new THREE.PointLight(0x0040ff, 2, 0);
light2.position.set(-200, 100, 300);
scene.add(light2);
function resize() {
var width = renderer.domElement.clientWidth;
var height = renderer.domElement.clientHeight;
if (renderer.domElement.width !== width || renderer.domElement.height !== height) {
renderer.setSize(width, height, false);
camera.aspect = width / height;
camera.updateProjectionMatrix();
}
}
function animate(time) {
time *= .001;
resize();
mesh.rotation.x = time * speed;
mesh.rotation.y = time * speed * .5;
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
document.querySelector("#speed").addEventListener('input', e => {
speed = e.target.value / 100;
});
html, body {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
font-family: sans-serif;
font-size: 15px;
color: red;
background-color: white;
}
.content {
position: relative;
width: 100%;
height: 100%;
}
canvas {
position: absolute;
top: 0;
width: 100%;
height: 100%;
display: block;
}
h1 {
position: absolute;
width: 100%;
left: 0;
bottom: 0;
text-align: center;
color: black;
z-index: 2;
text-shadow:
1px 1px 0px white,
-1px 1px 0px white,
1px -1px 0px white,
-1px -1px 0px white;
}
#ui {
position: absolute;
left: 10px;
top: 10px;
font-family: sans-serif;
font-size: 20px;
display: block;
line-height: 1.5em;
}
<html>
<head>
<title>My example</title>
<script src="https://greggman.github.io/doodles/js/three.min.js"></script>
</head>
<body>
<h1>My example program</h1>
<div class="content">
<canvas id="canvas"></canvas>
<div id="ui">
<div>speed: <input id="speed" type="range" min="0" max="200" value="20" /></div>
</div>
</div>
</body>
</html>