Threejs переключается с контроля орбиты на контроль трансформации
Я пытаюсь переключаться между этими элементами управления, когда добавляю новый объект на сцену. Если я установлю либо в init(), он работает нормально, либо орбиту или преобразование объекта, чтобы масштабировать, вращать, положение.
Но, скажем, я начинаю с орбиты, и я хочу, чтобы, когда я загружаю новый объект, он переключался на преобразование управления в этой сетке. Тогда я хочу иметь возможность назначить кнопку для переключения с орбиты на преобразование.
Пока не повезло найти решение, надеюсь, кто-то здесь сможет...
вот ссылка на тестовую страницу
http://www.vma-3d.com/transformtest.html
Он создает сцену и добавляет красный пол, когда он загружает установленный элемент управления obit, когда вы нажимаете ссылку "Добавить объект", он загружает объект и появляются элементы управления преобразованием, но как только вы пытаетесь переместить его, он просто исчезает.
Это сводит меня с ума, и я уверен, что это что-то простое, что я скучаю (я надеюсь), какая-нибудь помощь там?
вот пример кода, который я использую
<!DOCTYPE html>
<html>
<body>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/threejs/THREE.min.js" type="text/javascript"></script>
<script src="js/threejs/TransformControls.js"></script>
<script src="js/threejs/OrbitControls.js"></script>
<div id='FullPage'>
<a href='Javascript:AddObject()'>Add Object</a>
<div id='MainCanvas'></div>
</div>
<script>
var camera, scene, renderer,floor,control;
var VMA_Objects = [];
function init()
{
// SCENE
scene = new THREE.Scene();
// CAMERA
camera = new THREE.PerspectiveCamera( 45, window.innerWidth/window.innerHeight, 0.1, 20000);
scene.add(camera);
camera.position.set(-2.8,14,426);
camera.rotation.set(0,0,0);
camera.lookAt(scene.position);
renderer = new THREE.WebGLRenderer( {antialias:true,alpha: true,preserveDrawingBuffer: true } );
renderer.setSize(window.innerWidth,window.innerHeight);
Container = document.getElementById( 'MainCanvas' );
Container.appendChild( renderer.domElement );
control = new THREE.OrbitControls( camera,renderer.domElement);
floorMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, side: THREE.DoubleSide } );
floorGeometry = new THREE.PlaneGeometry(5000,5000, 1, 1);
floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.rotation.x = Math.PI / 2;
floor.position.y = -0.5;
scene.add(floor);
}
function animate()
{
requestAnimationFrame( animate );
render();
}
function render()
{
control.update();
renderer.render( scene, camera );
}
init();
animate();
function AddObject()
{
var num=1;
var Object_Position = "0,90,0";
var Object_Rotation= "0,0,0";
var Object_Scale = "1,1,1";
Object_Width =320;
Object_Height = 180;
var Object_Material = new THREE.MeshBasicMaterial( {color: 0x0000ff, side: THREE.DoubleSide } );
var Object_Geometry = new THREE.PlaneGeometry(Object_Width,Object_Height, 1, 1);
Object_Material.needsUpdate = true;
VMA_Objects[num] = new THREE.Mesh(Object_Geometry, Object_Material);
var NewObject_Position = Object_Position.split(",");
var NewObject_Rotation= Object_Rotation.split(",");
var NewObject_Scale = Object_Scale.split(",");
VMA_Objects[num].position.set(NewObject_Position[0],NewObject_Position[1],NewObject_Position[2]);
VMA_Objects[num].rotation.set(NewObject_Rotation[0],NewObject_Rotation[1],NewObject_Rotation[2]);
VMA_Objects[num].scale.set(NewObject_Scale[0],NewObject_Scale[1],NewObject_Scale[2]);
scene.add(VMA_Objects[num]);
control.enabled=false;
control = new THREE.TransformControls( camera, renderer.domElement );
control.attach(VMA_Objects[num] );
control.attach(VMA_Objects[num] );
scene.add( control);
}
</script>
</body>
</html>