このJavaScriptのキューブ関数を使用してページ上のキューブをズームする

Question

ページがロードされると、以下のコードが表示されます。キューブをズームアウトして停止したいのですが...どうしたらいいですか？何idea..Iはあなたが滑らかなアニメーションを取得するためにTHREE.Vector3.lerpを使用することができ、それは小さな立方体から始め、大きな立方体としてのuを来て、

<script> 
 
     //var resultlabel = (document.getElementById('resultvalue').innerHTML); 
 
     //if (resultlabel == 0) { 
 
      var container 
 
      var camera, controls, scene, renderer; 
 
      var objects = []; 
 
      var plane = new THREE.Plane(); 
 
      var raycaster = new THREE.Raycaster(); 
 
      var mouse = new THREE.Vector2(), 
 
      offset = new THREE.Vector3(), 
 
      intersection = new THREE.Vector3(), 
 
      INTERSECTED, SELECTED; 
 

 
      init(); 
 
      animate(); 
 

 
      function init() { 
 
       container = document.getElementById('canvas1'); 
 
       camera = new THREE.PerspectiveCamera(70, container.offsetWidth/container.offsetHeight, 1, 10000); 
 
       //camera.position.z = 2000; 
 
       camera.position.set(3000, 3000, 3000); 
 
       //camera.position.set(1000, 1000, 1000); 
 
       controls = new THREE.TrackballControls(camera, container); //** 
 
       controls.rotateSpeed = 1.0; 
 
       controls.zoomSpeed = 1.2; 
 
       controls.panSpeed = 0.8; 
 
       controls.noZoom = false; 
 
       controls.noPan = false; 
 
       controls.staticMoving = true; 
 
       controls.dynamicDampingFactor = 0.3; 
 

 
       scene = new THREE.Scene(); 
 

 
       var directionalLight = new THREE.DirectionalLight(0x505050); 
 

 
       scene.add(directionalLight); 
 
       //var resultlabel = (document.getElementById('resultvalue').innerHTML); 
 
       //if (resultlabel == 0) { 
 

 
        var geometry = new THREE.BoxGeometry(500, 500, 500); 
 
        var ax = ay = az = 0; 
 
        for (var i = 0; i < 1; i++) { 
 

 

 
         var object = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ ambient: 0xffffff, map: THREE.ImageUtils.loadTexture('/imgs/12.jpg') })); 
 

 

 
         object.position.x = ax; 
 
         object.position.y = ay; 
 
         object.position.z = az; 
 

 
         object.scale.x = 2; 
 
         object.scale.y = 2; 
 
         object.scale.z = 2; 
 

 

 

 
         scene.add(object); 
 
         light = new THREE.DirectionalLight(0x666699); 
 
         light.position.set(0, 1, 0); 
 
         scene.add(light); 
 

 
         light = new THREE.DirectionalLight(0x666699); 
 
         light.position.set(0, -1, 0); 
 
         scene.add(light); 
 
         //back 
 
         light = new THREE.DirectionalLight(0x666699); 
 
         light.position.set(1, 0, 0); 
 
         scene.add(light); 
 
         // front 
 
         light = new THREE.DirectionalLight(0x666699); 
 
         light.position.set(-1, 0, 0); 
 
         scene.add(light); 
 
         //right 
 
         light = new THREE.DirectionalLight(0x666699); 
 
         light.position.set(0, 0, 1); 
 
         scene.add(light); 
 
         //left 
 
         light = new THREE.DirectionalLight(0x666699); 
 
         light.position.set(0, 0, -1); 
 
         scene.add(light); 
 
         objects.push(object); 
 

 
        } 
 

 

 
        var material = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('/1.png') }); 
 
        var mesh = new THREE.Mesh(geometry, material); 
 

 
        scene.add(mesh); 
 

 
        renderer = new THREE.WebGLRenderer({ antialias: true }); 
 

 
        renderer.setClearColor(0xf0f0f0); 
 

 
        renderer.setPixelRatio(container.devicePixelRatio); 
 

 
        renderer.setSize(container.offsetWidth - 4, container.offsetHeight - 4); 
 

 
        renderer.sortObjects = false; 
 

 

 

 
        renderer.shadowMap.enabled = true; 
 

 
        renderer.shadowMap.type = THREE.PCFShadowMap; 
 

 

 

 
        container.appendChild(renderer.domElement); 
 

 

 

 

 

 

 

 
        stats = new Stats(); 
 

 
        container.appendChild(stats.dom); 
 

 

 

 

 
        window.addEventListener('resize', onWindowResize, false); 
 

 

 

 
       } 
 

 

 

 
       function onWindowResize() { 
 

 

 

 
        camera.aspect = window.innerWidth/window.innerHeight; 
 

 
        camera.updateProjectionMatrix(); 
 

 

 

 
        renderer.setSize(window.innerWidth, window.innerHeight); 
 

 

 

 
       } 
 

 

 
      
 
       function animate() { 
 

 

 

 
        requestAnimationFrame(animate); 
 

 
       
 
        render(); 
 

 
        stats.update(); 
 

 

 

 
       } 
 

 

 

 
       function render() { 
 

 
        
 

 
        controls.update(); 
 

 
        
 

 
        renderer.render(scene, camera); 
 

 

 
       } 
 
      
 
    

Answer 1

を停止したいん。

あなたのカメラに行きたいのVector3宣言：

var destPosition = new THREE.Vector3(1000,1000,1000); 

とアニメーションのループ書き込み中：

アルファが0と1の間の値であるとの決定については

camera.position = camera.position.lerp(destPosition, alpha); 

をカメラは各ループを移動します。

これは、実際にdestPositionに到達することはありません（ちょうど非常に近い）ように、これを取得していくつかの欠陥があるようにすばやくトリックします。より深い理解のために線形補間で読み上げる。がんばろう！