将相机附加到GLTF对象上的Three.JS黑屏

Question

因此，如果Three.JS和我似乎在相机上碰到了一个树桩，我会写一些东西。我试图将相机附加到导入的模型对象上，似乎正在附加，但是好像阴影被消除了，距离与我创建的实际字段相差很远。以及诸如Orbit控件之类的其他一些烦人的问题也将被倒置并且不起作用。这是我的代码（某些内容被屏蔽，因为我正在热链接托管在服务器上的脚本文件...）：

// This is basically everything to setup for a basic THREE.JS field to do our work in
var scene = new THREE.Scene(); // Empty Space
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000); // Perspective Camera (Args, FOV, Aspect = W/H, Min View Dist, Max View Dist)
//var controls = new THREE.OrbitControls(camera); // We will use this to look around
camera.position.set(0, 2, 5); // Note that depth into positon is mainly the opposite of where you normally want it to be.
camera.rotation.x = -0.3 // This is an attempt to rotate the angle of the camera off of an axis
var renderer = new THREE.WebGLRenderer({antialias: true}); // Our Renderer + Antialiasing
renderer.shadowMap.enabled = true; // This allows shadows to work in our 3D animation
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // This one isn't as blocky as THREE.PCFShadowMap
renderer.setClearColor("#00CCCC"); // Note: same as 0x000000
renderer.setSize(window.innerWidth, window.innerHeight); // Renderer Dimensions
document.getElementById("container").appendChild(renderer.domElement); // Add our renderer creation to our div named "container"
// Lighting (It's not necessary but it looks cool!)
var light = new THREE.PointLight("#FFFFFF", 5, 1000); // Color, intensity, range(lighting will not exceed render distance)
light.castShadow = true;
light.position.set(5, 5, 0); // This will treat the light coming from an angle!
scene.add(light);
light.shadow.mapSize.width = 512;
light.shadow.mapSize.height = 512;
light.shadow.camera.near = 0.5;
light.shadow.camera.far = 500;
// We will make a cube here
var cubeGeo = new THREE.BoxGeometry(1, 1, 1); // This is the shape, width, height and length of our cube. Note BoxGeometry IS the current shape!
var cubeMat = new THREE.MeshStandardMaterial({color: "#FF0000"}); // Create a basic mesh with undefined color, you can also use a singular color using Basic rather than Normal, There is also Lambert and Phong. Lambert is more of a Matte material while Phong is more of a gloss or shine effect.
var cube = new THREE.Mesh(cubeGeo, cubeMat); // Create the object with defined dimensions and colors!
cube.castShadow = true; // This will allow our cube to cast a shadow outward.
cube.recieveShadow = false // This will make our cube not recieve shadows from other objects (Although it isn't needed because it's default, you show make a habit of writing it anyways as some things default to true!)
scene.add(cube); // scene.add(object) is what we will use for almost every object we create in THREE.JS
//cube.add(camera); // This is an attempt to attach the camera to the cube...
// Loader
var ship;
var loader = new THREE.GLTFLoader();
loader.load("http://ipaddress:port/files/models/raven/scene.gltf", function(gltf) {
	scene.add(gltf.scene);
	ship = gltf.scene;
	ship.scale.multiplyScalar(0.005);
	ship.rotation.y = Math.PI;
}, undefined, function(error) {
	console.error(error);
});
// Lest make a floor to show the shadow!
var floorGeo = new THREE.BoxGeometry(1000, 0.1, 1000);
var floorMat = new THREE.MeshStandardMaterial({color: "#0000FF"});
var floor = new THREE.Mesh(floorGeo, floorMat);
floor.recieveShadow = true; // This will allow the shadow from the cube to portray itself unto it.
floor.position.set(0, -3, 0);
scene.add(floor);
// Now let's create an object on the floor so that we can distance ourself from our starting point.
var buildingGeo = new THREE.BoxGeometry(10, 100, 10);
var buildingMat = new THREE.MeshNormalMaterial();
var building = new THREE.Mesh(buildingGeo, buildingMat);
building.position.z = -100;
scene.add(building);
var rotation = 0;
// Controls
var keyState = {};

window.addEventListener('keydown',function(e){
    keyState[e.keyCode || e.which] = true;
},true);

window.addEventListener('keyup',function(e){
    keyState[e.keyCode || e.which] = false;
},true);
document.addEventListener("keydown", function(event) {
  console.log(event.which);
});
var camAdded = false;
var render = function() {
	requestAnimationFrame(render); // This grabs the browsers frame animation function.
	if (rotation == 1) {
		ship.rotation.x += 0.01; // rotation is treated similarly to how two dimensional objects' location is treated
		ship.rotation.y += 0.01; // however it will be based on an axis point plus the width/height and subtract but keep it's indice location!
		ship.rotation.z += 0.01;
	}
	if (keyState[87]) { // Up
		ship.rotateX(0.01);
	}
	if (keyState[83]) { // Down
		ship.rotateX(-0.01);
	}
	if (keyState[65]) { // Left
		ship.rotateY(0.03);
	}
	if (keyState[68]) { // Right
		ship.rotateY(-0.03);
	}
	if (keyState[81]) {
		ship.rotateZ(0.1);
	}
	if (keyState[69]) {
		ship.rotateZ(-0.1);
	}
	if (keyState[82]) { // Reset
		for (var i = 0; i < 10; i++) {
			if (!ship.rotation.x == 0) {
				if (ship.rotation.x > 0) {
					ship.rotation.x -= 0.005;
				} else if (ship.rotation.x < 0){
					ship.rotation.x += 0.005;
				}
			}
			if (!ship.rotation.z == 0) {
				if (ship.rotation.z > 0) {
					ship.rotation.z -= 0.01;
				} else if (ship.rotation.z < 0){
					ship.rotation.z += 0.01;
				}
			}
		}
	}
	ship.translateZ(0.2); // This will translate our ship forward in the direction it's currently facing so that it will look as if it is flyimg.
	renderer.render(scene, camera); // This will render the scene after the effects have changed (rotation!)
	window.addEventListener('resize', onWindowResize, false);
}
render(); // Finally, we need to loop the animation otherwise our object will not move on it's own!
function onWindowResize() {
	var sceneWidth = window.innerWidth - 20;
	var sceneHeight = window.innerHeight - 20;
	renderer.setSize(sceneWidth, sceneHeight);
	camera.aspect = sceneWidth / sceneHeight;
	camera.updateProjectionMatrix();
}

<!DOCTYPE htm>
<html>
	<head>
		<meta charset="utf-8">
		<title>Basic Three.JS</title>
	</head>
	<body style="background-color: #2B2B29; color: #FFFFFF; text-align: center;">
		<div id="container"></div>
		<script>
			window.onload = function() {
				document.getElementById("container").width = window.innerWidth - 20;
				document.getElementById("container").height = window.innerHeight - 20;
			}
		</script>
		<script src="http://ipaddress:port/files/scripts/three.min.js"></script>
		<script src="http://ipaddress:port/files/scripts/GLTFLoader.js"></script>
		<script src="http://ipaddress:port/files/scripts/OrbitControls.js"></script>
		<script src="http://ipaddress:port/files/scripts/basicthree.js"></script> <!-- This is the code below -->
	</body>
</html>

Answer 1

没关系，我找到了解决方案-可能是次充好...

if (typeof ship != "undefined") {
  // Previous code inside of the main three.js loop...
  ship.translateZ(0.2); // Move ship
  camera.position.set(ship.position.x, ship.position.y, ship.position.z); // Set the camera's position to the ships position
  camera.translateZ(10); // Push the camera back a bit so it's not inside the ship
  camera.rotation.set(ship.rotation.x, ship.rotation.y, ship.rotation.z); // Set the rotation of the ship to be the exact same as the ship
  camera.rotateX(0.3); // Tilt the camera downwards so that it's viewing over the ship
  camera.rotateY(Math.PI); // Flip the camera so it's not facing the head of the ship model.

  // Note: many bits of code I have are inverted due to the ship's model being backwards (or so it seems)...
}