javascript - 使用此javascript多维数据集功能放大页面加载时的多维数据集

现在页面加载后，我现在有了下面的代码，我希望多维数据集缩小并停止..我该怎么做..我是3js的新手，所以不知道..我希望它从一个小多维数据集开始，来你一个大立方体，停下来

 <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);


              }

      

最佳答案

您可以使用THREE.Vector3.lerp来获得平滑的动画。

声明一个vector3，您要将相机放在哪里：

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

并在动画循环中编写：

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

其中alpha是介于0和1之间的值，并确定相机将在每个循环中移动多远。

这是使它运行并有一些缺陷的快速技巧，就像您永远无法真正到达destPosition一样（非常非常接近）。阅读线性插值以加深了解。祝好运！

关于javascript - 使用此javascript多维数据集功能放大页面加载时的多维数据集，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41361922/