three.js怎样把摄像机聚焦在导入的三维模型上，打开直接可以看到模型图

qq_33598526 2016-11-02 04:54:02

<!DOCTYPE html>

<html>

<head>
<title>Example 09.04 - Trackball controls </title>
<script type="text/javascript" src="../js/three.js"></script>
<script type="text/javascript" src="../js/OBJLoader.js"></script>
<script type="text/javascript" src="../js/MTLLoader.js"></script>
<script type="text/javascript" src="../js/OBJMTLLoader.js"></script>

<script type="text/javascript" src="../js/stats.js"></script>
<script type="text/javascript" src="../js/dat.gui.js"></script>
<script type="text/javascript" src="../js/chroma.js"></script>
<script type="text/javascript" src="../js/TrackballControls.js"></script>

<style>
body {
/* set margin to 0 and overflow to hidden, to go fullscreen */
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>

<div id="Stats-output">
</div>

<div id="WebGL-output">
</div>


<script type="text/javascript">

// once everything is loaded, we run our Three.js stuff.
function init() {

var clock = new THREE.Clock();

var stats = initStats();

// create a scene, that will hold all our elements such as objects, cameras and lights.
var scene = new THREE.Scene();

// create a camera, which defines where we're looking at.
var camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 10000);

// create a render and set the size
var webGLRenderer = new THREE.WebGLRenderer();
webGLRenderer.setClearColor(new THREE.Color(0x0f0, 1.0));
webGLRenderer.setSize(window.innerWidth, window.innerHeight);
webGLRenderer.shadowMapEnabled = true;

// position and point the camera to the center of the scene
camera.position.x = -20;
camera.position.y = 100;
camera.position.z = 4000;
//camera.looAt(new THREE.Vector3(0, 0, 0));

var trackballControls = new THREE.TrackballControls(camera);

trackballControls.rotateSpeed = 0.5;
trackballControls.zoomSpeed = 0.5;
trackballControls.panSpeed = 0.5;
// trackballControls.noZoom=false;
// trackballControls.noPan=false;
trackballControls.staticMoving = true;
// trackballControls.dynamicDampingFactor=0.3;

var ambientLight = new THREE.AmbientLight(0x383838);
scene.add(ambientLight);

// add spotlight for the shadows
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(2000, 2000, 2000);
spotLight.intensity = 1;
scene.add(spotLight);

// add the output of the renderer to the html element
document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);

// call the render function
var step = 0;

// setup the control gui
var controls = new function () {
// we need the first child, since it's a multimaterial

};

var gui = new dat.GUI();
var mesh;

var loader = new THREE.OBJMTLLoader();
var load = function (object) {
var scale = chroma.scale(['red', 'green', 'blue']);
setRandomColors(object, scale);
mesh = object;
scene.add(mesh);
};

//var texture = THREE.ImageUtils.loadTexture('../assets/textures/Metro01.JPG');
//texture.wrapS = texture.wrapT = THREE.MirroredRepeatWrapping;
loader.load('../obj/chaju.obj', '../obj/chaju.mtl', load);
//texture.repeat.set( 1 , 1);

function setCamControls() {

}

render();

function setRandomColors(object, scale) {
var children = object.children;

if (children && children.length > 0) {
children.forEach(function (e) {
setRandomColors(e, scale)
});
} else {
// no children assume contains a mesh
if (object instanceof THREE.Mesh) {

object.material.color = new THREE.Color(scale(Math.random()).hex());
if (object.material.name.indexOf("building") == 0) {
object.material.emissive = new THREE.Color(0x444444);
object.material.transparent = true;
object.material.opacity = 0.8;
}
}
}
}

function render() {
stats.update();
var delta = clock.getDelta();

if (mesh) {
// mesh.rotation.y+=0.006;
}

trackballControls.update(delta);
//webGLRenderer.clear();
// render using requestAnimationFrame
requestAnimationFrame(render);
webGLRenderer.render(scene, camera)
}

function initStats() {

var stats = new Stats();
stats.setMode(0); // 0: fps, 1: ms

// Align top-left
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';

document.getElementById("Stats-output").appendChild(stats.domElement);

return stats;
}
}
window.onload = init;
</script>
</body>
</html>