I am just starting with three.js and encountering an issue while trying to scale an object. I have already checked the documentation at https://github.com/mrdoob/three.js/wiki/Updates, but it's a bit overwhelming for me.
My problem is that when I change a HTML select element, the CubeGeometry should be scaled in the x-direction. It does scale correctly, but the previous cube remains, resulting in two cubes instead of one with the current size. I hope this makes sense!
Below is the snippet from my view:
$(document).on('change',".configurator > form select",function(event){
// update 3D-object - not sure if this is the right way?
$.getScript("/javascripts/3D-animation.js.erb", function(){
// update happens here
OBJECT3D.updateObject();
});
})
And here is my 3D-animation.js.erb code:
var drawing_area;
var renderer;
var camera;
var obj;
var scene;
var OBJECT3D = {};
$(function() {
// obtaining drawing area
drawing_area = document.getElementById("canvas_wrapper");
// initialize renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize(drawing_area.clientWidth, drawing_area.clientHeight);
renderer.setClearColor( 0xffffff, 1);
// adding renderer to drawing area
drawing_area.appendChild(renderer.domElement);
// initialize camera
camera = new THREE.PerspectiveCamera(45, drawing_area.clientWidth/drawing_area.clientHeight, 1, 100000);
camera.position.z = 1000;
camera.position.y = 100;
camera.position.x = 300;//-0.78;
// creating texture
var texture = THREE.ImageUtils.loadTexture( "/images/materials/texture_1.jpg" );
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 1, 1 );
// creating object
var obj_form = new THREE.CubeGeometry(250,250,250);
var obj_material = new THREE.MeshLambertMaterial( { map: texture,ambient: 0x999999 } );
OBJECT3D.obj = new THREE.Mesh(obj_form, obj_material);
OBJECT3D.obj.geometry.dynamic = true;
// create scene
scene = new THREE.Scene();
scene.add(camera);
scene.add(OBJECT3D.obj);
// create lights
pointLight = new THREE.PointLight(0xFFFFFF);
pointLight.position.x = 400;
pointLight.position.y = 200;
pointLight.position.z = 1300;
scene.add(pointLight);
ambientLight = new THREE.AmbientLight( 0xffffff);
scene.add( ambientLight );
requestAnimationFrame(render);
function render(){
requestAnimationFrame(render);
OBJECT3D.obj.rotation.y += 0.005;
OBJECT3D.obj.rotation.z += 0.005;
renderer.render(scene, camera);
};
OBJECT3D.updateObject = function () {
console.log("in update");
OBJECT3D.obj.scale.x = 2.5; // SCALE
OBJECT3D.obj.geometry.needsUpdate = true;
}
});
Apologies if the code is not perfect, as I am still learning! Thank you for your help!
Appreciate it!