Question

我现在有下面的代码当页面被加载我希望立方体缩小并停止..我是怎么做的...我是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);


              }

Answer 1

您可以使用THREE.Vector3.lerp来获得流畅的动画效果。

声明你想要你的相机去的vector3：

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

并在你的动画循环中写：

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

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

这是一个快速的技巧，让它继续下去并有一些缺陷，就像你永远不会真正到达destPosition（非常非常接近）。阅读线性插值以获得更深入的理解。祝你好运！

使用此javascript立方体函数放大页面加载时的多维数据集

1 个答案: