CODEWITHSUNDEEP
javascriptthree.js
It's Joker
It's Joker

Reputation: 65

3d object movement with button in ThreeJs

So basically I am learning Three js and I want to make movement button that moves a sphere object I'm using onclick function on button I want to know how to define object to make movement function.

function moveup() {
    sphere.translateZ -= 1; 
}

function movedown() {
    sphere.translateZ += 1; 
}

function moveleft() {
    sphere.translate.X -= 1; 
    
}

function moveright() {
    sphere.translate.X += 1; 
}

This is the code I'm using for button how do I define the 3d sphere to it

Upvotes: 0

Views: 1312

Answers (1)

Parisa.H.R
Parisa.H.R

Reputation: 3908

For doing this I create this code First of all you need scene, camera, and renderer For moving objects by up, down, left, and Right from HTML buttons:

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;
  
}

enter image description here

Upvotes: 3

Related Questions