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

Question

I have below code now when the page is loaded I want the cube to zoom out and stop ..how do i do that..i am new to 3js so have no idea..I want it to start off with a small cube and come u as a big cube and stop

  <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

You can use THREE.Vector3.lerp to get a smooth animation.

Declare a vector3 where you want your camera to go:

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

and in your animation loop write:

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

where alpha is a value between 0 and 1 and determine how far the camera will travel each loop.

This is a quick trick to get it going and have some flaws, like you will never really get to the destPosition (just very very close). Read up on linear interpolation for a deeper understanding. Good luck!