Question

我有三个问题。我创建了一个带有3D模型的场景，可以旋转并且一切正常。然后我试着用Oavascript在OOP中做这个场景，但场景没有渲染，我有黑屏。

这是我的代码：

＆＃13;

function deg2radians(degs)
{
	return Math.PI * degs / 180.0;
}


var	OBJLoaded = function()
{
	this.createRender();
	this.createScenes();
	this.createCamera();
	this.createLights();

	this.loadModel();

	this.render();
};

OBJLoaded.prototype.createRender = function()
{
	var fill = document.getElementById("3dModel");
	this.renderer = Detector.webgl? new THREE.WebGLRenderer( { antialias: true} ): new THREE.CanvasRenderer( {antialias: true} );
	this.renderer.setSize( window.innerWidth, window.innerHeight );
	this.renderer.setPixelRatio( window.devicePixelRatio );
	this.renderer.setClearColor(0xBAC4CC);
	fill.appendChild( this.renderer.domElement );
};

OBJLoaded.prototype.createScenes = function()
{
	this.scene = new THREE.Scene();
};

OBJLoaded.prototype.createCamera = function()
{
	this.camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
	this.camera.position.z = 100;
	this.camera.aspect = window.innerWidth / window.innerHeight;
	this.camera.updateProjectionMatrix();

};

OBJLoaded.prototype.createLights = function()
{
	var hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.6 );
	hemiLight.color.setHSL( 1, 1, 1 );
	hemiLight.position.set( 0, 500, 0 );
	this.scene.add( hemiLight );
};

OBJLoaded.prototype.render = function ()
{
	if (this.needupdate) {
		this.renderer.render(this.scene, this.camera);
		this.needupdate = false;
	}
};

OBJLoaded.prototype.loadModel = function()
{
	THREE.ImageUtils.crossOrigin = "anonymous";
	var self = this;
	var loader = new THREE.OBJMTLLoader();
	loader.load( 'skate_tracker.obj', 'skate_tracker.mtl', function ( obj ) {
			obj.position.set(-2, 0, 0);
			obj.rotation.y = -55;
			obj.castShadow = true;
			obj.receiveShadow = true;
			self.model = obj;
			self.scene.add( self.model );
			});
};

OBJLoaded.prototype.newData = function(data)
{
	if (this.model === undefined)
		return;

	this.model.rotation.x = -deg2radians(data[0] + 270);
	this.model.rotation.y =  deg2radians(data[1]);
	this.model.rotation.z =  deg2radians(data[2] + 180);

	this.needupdate = true;
};

var o = new OBJLoaded();

function update()
{
	o.render();
	requestAnimationFrame(update);
}

requestAnimationFrame(update);

＆＃13;

<head>
<style>
body {margin:0; padding:0;}
</style>
</head>

<body>
<div class="item_slider active" id="3d_div" style="display:block;">
	<div class="fill" id="3dModel"></div>
</div>
</body>

<!-- Jquery -->
<script src="js/jquery.js"></script>

<!-- Three.js -->
<script src="js/three.min.js"></script>

<!-- Controls -->
<script src="js/OrbitControls.js"></script>

<!-- Renderer -->
<script src="js/Projector.js"></script>
<script src="js/CanvasRenderer.js"></script>
<script src="js/Detector.js"></script>

<!-- Object loading -->
<script src="js/MTLLoader.js"></script>
<script src="js/OBJMTLLoader.js"></script>

＆＃13;

所以如果你能帮助我理解出了什么问题，那就太酷了:)。感谢。

编辑：我的代码没有＆＃34; OOP＆＃34;这没有任何错误。

＆＃13;

var scene, camera, renderer, controls;
var object;
var OBJLoaded;

init();
animate();

function animate()
{
	requestAnimationFrame( animate );
	controls.update();
	render();
}

function init() {

	var fill = document.getElementById("3dModel");

	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
	camera.position.z = 100;

	controls = new THREE.OrbitControls( camera );
	controls.damping = 0.2;
	controls.addEventListener( 'change', render );

	//HEMILIGHT
	hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.6 );
	hemiLight.color.setHSL( 1, 1, 1 );
	hemiLight.position.set( 0, 500, 0 );
	scene.add( hemiLight );

	THREE.ImageUtils.crossOrigin = "anonymous";
	var loader = new THREE.OBJMTLLoader();
	loader.load( 'skate_tracker.obj', 'skate_tracker.mtl', function ( object ) {
		var s = 1;
		object.position.set(-2, 0, 0);
		object.scale.set(s, s, s);
		object.rotation.y = -55;
		object.castShadow = true;
		object.receiveShadow = true;
		scene.add( object );
		OBJLoaded = object;
	});
	renderer = Detector.webgl? new THREE.WebGLRenderer( { antialias: true} ): new THREE.CanvasRenderer( {antialias: true} );
	//renderer.setSize( window.innerWidth, window.innerHeight );
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setClearColor(0xBAC4CC);
	renderer.setSize( fill.offsetWidth, fill.offsetHeight );

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();

	renderer.setSize( window.innerWidth, window.innerHeight );

	fill.appendChild( renderer.domElement );

	window.addEventListener( 'resize', onWindowResize, false );
	animate();
}

function onWindowResize() {

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();

	renderer.setSize( window.innerWidth, window.innerHeight );

	render();
}

function render()
{
	renderer.render( scene, camera );
}

＆＃13;

Answer 1

似乎在你的代码中有一行

this.renderer.render(this.scene, this.camera);

永远不会调用

，因为您没有将this.needupdate标记初始化为true。它只是undefined。

三个js场景没有渲染

1 个答案: