Javascript threejs修复了所有模型的视图
我使用threejs来查看3D模型，它可以正常工作，但是我使用两个不同的模型作为示例解决方案 这是一个例子Javascript threejs修复了所有模型的视图,javascript,html,three.js,html5-canvas,Javascript,Html,Three.js,Html5 Canvas,我使用threejs来查看3D模型，它可以正常工作，但是我使用两个不同的模型作为示例解决方案 这是一个例子 <!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - loaders - OBJ loader</title> <meta charset="utf-8"> <meta name="v
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - loaders - OBJ loader</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #000;
color: #fff;
margin: 0px;
overflow: hidden;
}
#info {
color: #fff;
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 100;
display:block;
}
#info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
#Viewer {
position: absolute;
width: -webkit-calc(100% - 310px); /* Safari */
width: calc(100% - 310px);
height: 100%;
border: 0px;
}
.control {
position:absolute;
margin-left:12px;
width:100%;
font-weight:bold;
}
.controlValue {
position:absolute;
left:36%;
top:0%;
}
#controls {
position:absolute;
width:250px;
bottom:0%;
right:0%;
height:134px;
background-color:White;
opacity:.9;
font: 13px/1.231 "Lucida Grande", Lucida, Verdana, sans-serif;
}
</style>
</head>
<body>
<div id="obj">
<div id="Viewer" style="width:300px;height:300px"></div>
</div>
<div id="controls">
<div class="control" id="scenes_control">
Model
<select class="controlValue" id="scenes_list" size="1" onchange="selectScene();" ondblclick="selectScene();">
</select>
</div>
<div class="control" id="cameras_control">
Camera
<select class="controlValue" id="cameras_list" size="1" onchange="selectCamera();" ondblclick="selectCamera();">
</select>
</div>
<div class="control" id="animations_control">
Animations
<div class="controlValue"><input type="checkbox" checked onclick="toggleAnimations();">Play</input></div>
</div>
<div class="control" id="buffer_geometry_control">
Geometry
<div class="controlValue">
<input type="checkbox" id="buffer_geometry_checkbox" checked onclick="toggleBufferGeometry();">BufferGeometry</input>
</div>
</div>
</div>
<div id="info">
<a href="http://threejs.org" target="_blank">three.js</a> - OBJLoader test
</div>
<script src="../build/three.min.js"></script>
<script src="../src/core/clock.js"></script>
<script src="../src/core/Geometry.js"></script>
<script src="js/loaders/OBJLoader.js"></script>
<script src="js/loaders/MTLLoader.js"></script>
<script src="js/loaders/OBJMTLLoader.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/controls/FirstPersonControls.js"></script>
<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
var container, stats;
var camera, scene, renderer;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var clock = new THREE.Clock();
var geometry = new THREE.Geometry();
init();
animate();
function init() {
container = document.getElementById('Viewer');
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 2000 );
//camera.position.set( 2, 2, 3 );
//camera.position.z = 100;
camera.position.z = 40;
camera.position.y = 700;
// scene
// set the camera's behaviour and sensitivity
controls = new THREE.OrbitControls( camera, container );
controls.rotateSpeed = 5.0;
controls.zoomSpeed = 5;
controls.panSpeed = 2;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
//camera.position.set( 0, 25, 0 );
//first person
/* controls = new THREE.FirstPersonControls( camera );
controls.movementSpeed = 70;
controls.lookSpeed = 0.04;
controls.noFly = true;
controls.lookVertical = false;*/
scene = new THREE.Scene();
var ambient = new THREE.AmbientLight( 0x101030 );
scene.add( ambient );
var directionalLight = new THREE.DirectionalLight( 0xffeedd );
directionalLight.position.set( 0, 0, 1 );
scene.add( directionalLight );
scene.add (new THREE.Mesh (geometry,
new THREE.MeshBasicMaterial ({ color: 0x00ffff, wireframe: true })));
var loader = new THREE.OBJMTLLoader();
loader.load( 'files/cessna.obj', 'files/cessna.mtl', function ( object ) {
scene.add( object );
} );
//
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
//document.addEventListener( 'mousemove', onDocumentMouseMove, false );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX ) / 2;
mouseY = ( event.clientY - windowHalfY ) / 2;
}
//
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
var delta = clock.getDelta(),
time = clock.getElapsedTime() * 5;
controls.update( delta );
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
</script>
</body>
</html>
那么在这里我如何设置所有模型在查看器中心的固定位置 你能把它和模型放在一起吗？有人知道答案吗？？