Question

当我向场景添加新对象时，我试图在这些控件之间切换。如果我在init（）中设置它，它可以正常工作，无论是轨道还是变换对象来缩放，旋转，定位。

但是我说我从轨道开始，我想要发生的是，当我加载一个新对象时，它切换到该网格上的变换控制。然后我希望能够指定一个按钮来从轨道切换到变换。

到目前为止，没有运气找到解决方案，希望有人可以......

这是指向测试页的链接

http://www.vma-3d.com/transformtest.html

它创建一个场景并添加一个红色的地板，当它加载了obit控件时，当你点击＆＃34;添加对象＆＃34;链接它加载一个对象，然后出现变换控件，但是一旦你尝试移动它，它就会消失。

这让我疯了，我确信它很简单我想念（我希望）有什么帮助吗？

这是我正在使用的示例代码

<!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>

Threejs从Orbit控制切换到Transform控制

0 个答案:

Threejs从O​​rbit控制切换到Transform控制

0 个答案:

Threejs从Orbit控制切换到Transform控制