To achieve this functionality, I've written the following code. Firstly, you'll need a scene, camera, and renderer to interact with objects and navigate using HTML buttons for movement:
In Index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>StackOverflow</title>
<link rel="stylesheet" href="./style.css"></link>
</head>
<body>
<script src="../libs/three.js"></script>
<script src="../libs/three.min.js"></script>
<script src="../libs/OrbitControls.js"></script>
<section class="container">
<ul class="sidebar">
<li class="sidebar__item"><button class="sidebar__button" onclick="moveUp()">up</button></li>
<li class="sidebar__item"><button class="sidebar__button" onclick="moveDown()">down</button></li>
<li class="sidebar__item"><button class="sidebar__button" onclick="moveRight()">Right</button></li>
<li class="sidebar__item"><button class="sidebar__button" onclick="moveLeft()">Left</button></li>
</ul>
<canvas class="webgl"></canvas>
</section>
<script src="./main.js"></script>
</body>
</html>
In main.js :
/**
* Base
*/
// Canvas
const canvas = document.querySelector('canvas.webgl')
// Sizes
const sizes = {
width: window.innerWidth,
height: window.innerHeight
}
// Scene
const scene = new THREE.Scene()
// Camera
const camera = new THREE.PerspectiveCamera(45, sizes.width / sizes.height, 0.01, 1000)
camera.position.set( 0, 10, 10 );
camera.lookAt( 0, 0, 0 );
scene.add(camera)
// Controls
const controls = new THREE.OrbitControls(camera, canvas)
controls.enableDamping = true
// Renderer
const renderer = new THREE.WebGLRenderer({
antialias: true,
canvas: canvas
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio,2))
renderer.setClearColor( 0x404040, 1);
//Create Mesh
const mesh = new THREE.Mesh(
new THREE.BoxGeometry(1, 1, 1, 5, 5, 5),
new THREE.MeshBasicMaterial({ color: 0xff0000 })
)
scene.add(mesh)
var increment =1;
function moveUp()
{
mesh.position.y +=increment;
}
function moveDown()
{
mesh.position.y -= increment;
}
function moveRight()
{
mesh.position.x +=increment;
}
function moveLeft()
{
mesh.position.x -= increment;
}
const clock = new THREE.Clock()
const tick = () =>
{
const elapsedTime = clock.getElapsedTime()
// mesh.rotation.y +=0.01
// Update controls
controls.update()
// Render
renderer.render(scene, camera)
// Call tick again on the next frame
window.requestAnimationFrame(tick)
}
tick()
In style.css:
* {
margin: 0;
padding: 0;
}
html,
body {
overflow: hidden;
}
.container{
position: relative;
}
.webgl {
outline: none;
}
.sidebar{
position: absolute;
z-index: 10;
height: 100%;
background-color: #333;
}
.sidebar__item{
height: 40px;
width: 40px;
border-bottom:1px solid rgb(179, 179, 179);
}
.sidebar__button{
width: 100%;
height: 100%;
background: #333;
outline: none;
border: 0;
color: #ddd;
font: bold;
font-size: large;
}
.sidebar__button:hover {
background-color: #888;
color: black;
}
.sidebar__button:active {
background-color: #aaa;
color: black;
}
https://i.sstatic.net/asWaK.gif