I'm in the process of creating a 3D die using Three.js that will rotate randomly when clicked, but I'm struggling to update the axis values properly. Here's where I'm currently at:
<style type="text/css" media="screen">
html, body, canvas {
margin: 0;
padding: 0;
background: #4e6171;
color: black;
}
canvas {
width: 100%;
height: 100%;
}
</style>
<body onload="animateScene();">
<div id="container"></div>
<script type="text/javascript" src="js/three.min.js"></script>
<script type="text/javascript" src="js/Detector.js"></script>
<script type="text/javascript">
if (!Detector.webgl) Detector.addGetWebGLMessage();
</script>
<script type="text/javascript" src="js/TrackballControls.js"></script>
<script type="text/javascript" src="js/setup.js"></script>
<script type="text/javascript">
function animateScene() {
var objectX = Math.floor(Math.random() * 20);
var objectY = Math.floor(Math.random() * 20);
var objectZ = Math.floor(Math.random() * 20);
var radius = 30;
radius *= 1;
var material = new THREE.MeshBasicMaterial({
color: 0xe2e2e2,
transparent: true,
opacity: 1
});
var geometry = new THREE.IcosahedronGeometry(radius, 0);
var object = new THREE.Mesh(geometry, material);
var edges = new THREE.EdgesHelper(object, 0xffffff);
edges.material.linewidth = 2;
scene.add(object);
scene.add(edges);
scene.add(new THREE.AxisHelper(100));
object.rotation.x = objectX;
object.rotation.y = objectY;
object.rotation.z = objectZ;
controls.enabled = false;
};
</script>
<button class="button" onclick="object.updateMatrix();">Generate</button>
</body>
My goal is to click on the object and have it animate a rotation with new random axis coordinates. However, I'm currently encountering an "object is undefined" error.
I couldn't get a fiddle working, but you can find a link here.
Any assistance would be greatly appreciated. Thank you.