如何在Three.js中使用导入的模型创建网格

时间:2019-05-06 19:06:44

标签: javascript three.js

我正在尝试使用three.js创建游戏,但是我遇到了有关导入3D模型的一些问题。我已经在Blender中创建了它们,并使用gltf-blender-IO插件使其更易于使用。但是,如果没有模型,我将无法完全移动模型。如何在模型之外创建网格以解决此问题?

完整代码为here.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

window.addEventListener("resize", function() {
	var width = window.innerWidth;
	var height = window.innerHeight;
	renderer.setSize(width, height);

	camera.aspect = width / height;
	camera.updateProjectionMatrix();
});

// controls = new THREE.OrbitControls(camera, renderer.domElement);

renderer.shadowMap.enabled = true;
renderer.shadowMapSoft = true;
renderer.physicallyCorrectLights = true;

camera.position.z = 3;

// ambient light
var ambientLight = new THREE.AmbientLight(0xF0F0F0, 4.5);
scene.add(ambientLight);

// directional light
var directionalLight = new THREE.DirectionalLight(0xffffff, 5.0);
directionalLight.position.set(5, 0, 5);
directionalLight.target.position.set(0, 0, 0);
 
directionalLight.castShadow = true;
directionalLight.shadowDarkness = 0.5;
 
directionalLight.shadowCameraNear = 0;
directionalLight.shadowCameraFar = 15;
 
directionalLight.shadowCameraLeft = -5;
directionalLight.shadowCameraRight = 5;
directionalLight.shadowCameraTop = 5;
directionalLight.shadowCameraBottom = -5;

scene.add(directionalLight);

// Load a glTF resource
var loader = new THREE.GLTFLoader;
loader.load(
	'Fox.glb',

	function ( gltf ) {

		scene.add( gltf.scene );

		gltf.animations; // Array<THREE.AnimationClip>
		gltf.scene; // THREE.Scene
		gltf.scenes; // Array<THREE.Scene>
		gltf.cameras; // Array<THREE.Camera>
		gltf.asset; // Object


	},
	// called while loading is progressing
	function ( xhr ) {

		console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

	},
	// called when loading has errors
	function ( error ) {

		console.log( 'An error happened' );

	}
);

  
// end main

function update() {

};

function render() {
	renderer.render(scene, camera);
};

function loop() {
	window.requestAnimationFrame(loop);

	update();
	render();
}

loop();

0 个答案:

没有答案