Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Rotating Cube and Browser Events in Three.js
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js canvas - geometry - cube</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<style type="text/css">
body {
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container-threejs">
</div>
<!-- include javascript files -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
<script type="text/javascript">
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 5;
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.getElementById('container-threejs').appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry(2, 2, 2);
var material = new THREE.MeshBasicMaterial({color: 0x656565});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
renderer.render(scene, camera);
document.getElementById('container-threejs')
.addEventListener('click', function() {
console.log('ouch');
cube.rotation.y += 0.1;
console.log(cube.geometry);
renderer.render(scene, camera);
});
document.getElementById('container-threejs')
.addEventListener('contextmenu', function(ev) {
ev.preventDefault();
console.log('click kanan');
camera.position.z++;
renderer.render(scene, camera);
});
document.getElementById('container-threejs')
.addEventListener('mousemove', function(ev) {
ev.preventDefault();
cube.rotation.y += 0.1;
console.log('mousedown');
renderer.render(scene, camera);
});
var counter = 0;
function onEnterFrame(){
counter++;
console.log(counter);
cube.rotation.y += 0.1;
renderer.render(scene, camera);
requestAnimationFrame(onEnterFrame);
};
requestAnimationFrame(onEnterFrame);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.