Currently in the process of learning three.js and finding it challenging to animate an object.
I am looking to load a .json file (exported from Blender) and have the object rotate horizontally continuously as an animation, similar to this example. Alternatively, rotating the scene could also be a viable option.
Most solutions I've come across involve rotating the mesh. However, every time I try referencing the mesh variable, I encounter a console error indicating that it is either undefined or null (depending on whether I initialize it or not). This issue likely arises because the mesh variable is only used within my .json loader function. Another suggestion was to reference the scene instead, but this resulted in an error message stating "Disallowing antialiased backbuffers due to blacklisting."
The code snippet I am currently using is:
<!DOCTYPE html>
<html>
<head>
<title>Rotating Sphere</title>
<meta charset="utf-8">
<!-- https://cdnjs.com/libraries/three.js -->
<script src="http://www.amdesigngroup.com/clients/AM_6292_Learning/js/three.min.js"></script>
<script src="http://www.amdesigngroup.com/clients/AM_6292_Learning/js/OrbitControls.js"></script>
<!-- Tween.js: https://cdnjs.com/libraries/tween.js/ -->
<!--<script src="http://www.amdesigngroup.com/clients/AM_6292_Learning/js/Tween.js"></script>-->
</head>
<body style="margin: 0; background-color:#6cdbf5;">
<script>
// Declaration of global variables for the scene, camera, renderer, and mesh.
var scene = null,
camera = null,
renderer = null,
mesh = null;
init();
animate();
// Initializing the scene setup.
function init() {
// Creating the scene and defining its size.
scene = new THREE.Scene();
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
// Creating a renderer and appending it to the DOM.
renderer = new THREE.WebGLRenderer({antialias:true, alpha:true});
renderer.setSize(WIDTH, HEIGHT);
document.body.appendChild(renderer.domElement);
// Creating a camera, setting its position relative to the model, and adding it to the scene.
camera = new THREE.PerspectiveCamera(45, WIDTH / HEIGHT, 0.1, 20000);
camera.position.set(0,6,0);
scene.add(camera);
// Adding an event listener to resize the renderer with the browser window.
window.addEventListener('resize', function() {
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
renderer.setSize(WIDTH, HEIGHT);
camera.aspect = WIDTH / HEIGHT;
camera.updateProjectionMatrix();
});
// Setting the scene's background color to transparent
//renderer.setClearColor(0x000000, 0);
// Creating a light source, specifying its position, and adding it to the scene.
var light = new THREE.PointLight(0xffffff);
light.position.set(-100,200,100);
scene.add(light);
// Loading the mesh and incorporating it into the scene.
var loader = new THREE.JSONLoader();
loader.load("http://www.amdesigngroup.com/clients/AM_6292_Learning/models/circle.json", function(geometry){
var material = new THREE.MeshLambertMaterial({color: 0x55B663});
mesh = new THREE.Mesh(geometry, material);
mesh.translation = THREE.GeometryUtils.center(geometry);
/*mesh.rotation.x = 0;*/
scene.add(mesh);
});
// Integrating OrbitControls for mouse panning functionality.
controls = new THREE.OrbitControls(camera, renderer.domElement);
}
/* Function to rotate the mesh */
/*var duration = 5000; // ms
var currentTime = Date.now();
function rotate() {
var now = Date.now();
var deltat = now - currentTime;
currentTime = now;
var fract = deltat / duration;
var angle = Math.PI * 2 * fract;
scene.rotation.y += angle;
}*/
// Rendering the scene and updating as needed.
function animate() {
// Details about requestAnimationFrame available at http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
requestAnimationFrame(animate);
//rotate();
// Render the scene.
renderer.render(scene, camera);
controls.update();
}
</script>
</body>
</html>At present, the code renders the model without any animation. Sections commented out highlight failed attempts at achieving a rotation animation.
Seeking guidance on how to proceed with achieving the desired animation effect.