我试图将这个3D模型放到页面上，并进行设置，以便用户的鼠标可以在场景周围移动模型，或者在模型周围移动相机以便我们看到它从不同角度。为此，我尝试使用轨道控制。
我可以让模型在页面上显示为静态。但是，当我尝试调整代码并使用轨道控件来进行一些运动时，我只是得到一个黑屏。控制台中没有错误。如果有人可以提供帮助，我会非常感激！
以下是代码：
<!DOCTYPE html>
<html lang="en">
<head>
var scene = new THREE.Scene();
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
var camera = new THREE.PerspectiveCamera();
camera.position.set(0,6,0);
scene.add(camera);
var light = new THREE.AmbientLight(0xffffff); // white light
scene.add(light);
var renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(WIDTH, HEIGHT);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', function() { renderer.render(scene,
camera); } );
<title>three.js</title>
<meta charset="utf-8">
<meta name="generator" content="Three.js Editor">
<meta name="viewport" content="width=device-width, user-scalable=no,
minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
background-color: #000;
margin: 0px;
overflow: hidden;
}
#edit {
position: absolute;
bottom: 20px;
right: 20px;
padding: 8px;
text-decoration: none;
background-color: #fff;
color: #555;
opacity: 0.5;
}
#edit:hover {
opacity: 1;
}
</style>
</head>
<body ontouchstart="">
<script src="js/three.min.js"></script>
<script src="js/app.js"></script>
<script>
var loader = new THREE.FileLoader();
loader.load( 'app.json', function ( text ) {
var player = new APP.Player();
player.load( JSON.parse( text ) );
player.setSize( window.innerWidth, window.innerHeight );
player.play();
window.addEventListener('resize', function() {
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
renderer.setSize(WIDTH, HEIGHT);
camera.aspect = WIDTH / HEIGHT;
camera.updateProjectionMatrix();
} )
scene = new THREE.Scene();
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(WIDTH, HEIGHT);
document.body.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera();
camera.position.set(0,6,0);
scene.add(camera);
controls = new OrbitControls(camera, renderer.domElement);
document.body.appendChild( player.dom );
window.addEventListener( 'resize', function () {
player.setSize( window.innerWidth, window.innerHeight );
} );
if ( location.search === '?edit' ) {
var button = document.createElement( 'a' );
button.id = 'edit';
button.href = 'https://threejs.org/editor/#file=' +
location.href.split( '/' ).slice( 0, - 1 ).join( '/' ) + '/app.json';
button.target = '_blank';
button.textContent = 'EDIT';
document.body.appendChild( button );
}
} );
OrbitControls = function ( object, domElement ) {
this.object = object;
this.domElement = ( domElement !== undefined ) ? domElement : document;
// Set to false to disable this control
this.enabled = true;
// "target" sets the location of focus, where the object orbits around
this.target = new THREE.Vector3();
// How far you can dolly in and out ( PerspectiveCamera only )
this.minDistance = 0;
this.maxDistance = Infinity;
// How far you can zoom in and out ( OrthographicCamera only )
this.minZoom = 0;
this.maxZoom = Infinity;
// How far you can orbit vertically, upper and lower limits.
// Range is 0 to Math.PI radians.
this.minPolarAngle = 0; // radians
this.maxPolarAngle = Math.PI; // radians
// How far you can orbit horizontally, upper and lower limits.
// If set, must be a sub-interval of the interval [ - Math.PI, Math.PI ].
this.minAzimuthAngle = - Infinity; // radians
this.maxAzimuthAngle = Infinity; // radians
// Set to false to disable rotating
this.enableRotate = true;
this.rotateSpeed = 1.0;
} ;
function handleMouseDownRotate( event ) {
//console.log( 'handleMouseDownRotate' );
rotateStart.set( event.clientX, event.clientY );
}
function handleMouseDownDolly( event ) {
//console.log( 'handleMouseDownDolly' );
dollyStart.set( event.clientX, event.clientY );
}
function handleMouseDownPan( event ) {
//console.log( 'handleMouseDownPan' );
panStart.set( event.clientX, event.clientY );
}
</script>
</body>
</html>