I am currently working with an object in Three.js that was created in Blender and imported into the Three.js format. My goal is to enable mouse rotation for this object. Any assistance on how to achieve this would be greatly appreciated! Thank you.
function initialize(x, y, z, base, small, big, corners) {
scene = new THREE.Scene();
createMesh(x, y, z, base, small, big, corners);
setupCamera();
addLights();
setupRenderer();
var element = document.body.appendChild(renderer.domElement);
element.style.marginLeft="300px";
element.style.position="absolute";
render();
}
function setupCamera() {
camera = new THREE.PerspectiveCamera(70, WIDTH / HEIGHT, 1, 10);
camera.position.set(0, 3.5, 3);
camera.lookAt(scene.position);
}
function setupRenderer() {
renderer = new THREE.WebGLRenderer({ antialias: true});
renderer.setSize(WIDTH, HEIGHT);
renderer.setClearColor("white");
}
var mainMesh = null;
var mesh1 = null;
var mesh2 = null;
var mesh3 = null;
var meshGroup;
function createMesh(x, y, z, base, small, big, corners) {
meshGroup = new THREE.Object3D();
var loader = new THREE.JSONLoader();
loader.load(base, function(geometry, materials) {
mainMesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
mainMesh.scale.x = x;
mainMesh.scale.y = y;
mainMesh.scale.z = z;
mainMesh.opacity=1;
mainMesh.castShadow = false;
var model = new THREE.Object3D();
model.add(mainMesh);
model.position.set(0,0,0);
meshGroup.add(model);
});
loader.load(small, function(geometry, materials) {
mesh1 = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
mesh1.scale.x = x;
mesh1.scale.y = y;
mesh1.scale.z = z;
mesh1.opacity=1;
mesh1.castShadow = false;
var model1 = new THREE.Object3D();
model1.add(mesh1);
model1.position.set(0,0,0);
meshGroup.add(model1);
});
loader.load(big, function(geometry, materials) {
mesh2 = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
mesh2.scale.x = x;
mesh2.scale.y = y;
mesh2.scale.z = z;
mesh2.opacity=1;
mesh2.castShadow = false;
var model2 = new THREE.Object3D();
model2.add(mesh2);
model2.position.set(0,0,0);
meshGroup.add(model2);
});
loader.load(corners, function(geometry, materials) {
mesh3 = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
mesh3.scale.x = x;
mesh3.scale.y = y;
mesh3.scale.z = z;
mesh3.opacity=1;
mesh3.castShadow = false;
var model3 = new THREE.Object3D();
model3.add(mesh3);
model3.position.set(0,0,0);
meshGroup.add(model3);
});
scene.add(meshGroup);
}
function addLights() {
var light; // A light shining from the direction of the camera.
light = new THREE.DirectionalLight();
light.position.set(0,100,10);
meshGroup.castShadow = false;
meshGroup.receiveShadow = false;
scene.add(light);
}
function rotateMainMesh() {
if (!mainMesh) {
return;
}
//meshGroup.rotation.y -= 0.4* ( Math.PI / 180 );
}
function animate() {
requestAnimationFrame(animate);
rotateMainMesh();
renderer.render(scene, camera);
}
initialize(0.5, 0.5, 0.5, "base.js", "small.js", "big.js", "corners.js");