化石原创文章,转载请注明来源并保留原文链接


注意的是mesh才能加材质,32到36行。

<html>
	<head>
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
			canvas { width: 400; height: 400 }
		</style>
	</head>
	<body>
		<script src="js/three.js"></script>
		<script src="./js/loaders/OBJLoader.js"></script>
		<script>
			var scene = new THREE.Scene();
			var camera = new THREE.PerspectiveCamera( 15, 1, 0.1, 1000 );
			camera.position.y = 10;
			camera.lookAt(0, 0, 0);
			
			var loader = new THREE.TextureLoader();
			loader.load(
				'texture/uv.jpg',

				function ( texture ) {
					var material = new THREE.MeshBasicMaterial( {
						map: texture
					 } );
					 
					var loader = new THREE.OBJLoader();
					loader.load(
						'models/triangular.obj',
						function ( object ) {
							object.material = material;
							object.traverse( function(child) {
								if (child instanceof THREE.Mesh) {
									child.material = object.material;
								}
							});
							object.position.x = 0;
							object.position.y = 0;
							object.position.z = 0;
							object.scale.set(1, 1, 1);
							scene.add( object );
						},

						function ( xhr ) {
							console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
						},

						function ( error ) {
							console.log( 'An error happened' );
						}
					);
				},

				undefined,

				function ( err ) {
					console.error( 'An error happened.' );
				}
			);

			//

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

			var animate = function () {
				requestAnimationFrame( animate );
				renderer.render( scene, camera );
			};

			animate();
		</script>
	</body>
</html>

化石原创文章,转载请注明来源并保留原文链接



化石原创文章,转载请注明来源并保留原文链接


three.js文档看起来有一定数量,但是组织方式和内容不算很好。找点东西不易。今日有人问到相关问题,遂把涉及的东西写下来。

在github上下载源码后,使用npm install, npm run build,在dist下会有three.js文件,这个文件只是包含了three.js的核心模块。有很多常见的模块,比如OBJLoader,都不在这个核心模块里面,而存在于examples\js目录下,这个examples字眼对很多老手来说,可能会栽坑。

所以,要使用three.js,包含的代码是three.js这个文件和examples\js下的你需要用到的类。

怎么知道哪个东西在哪里?这个根据经验,查手册的时候,看最底下的那行“Source”,以“src”开头的,说明three.js这个文件就有这个类了。如果以”examples/js“开头,那么你得去源码工程的examples\js下自行取。

另外,这篇文章才是three.js开始很重要的一篇文章,写到了怎么自己搭建本地服(http),写到了three.js怎么用原始的javasript包含方式,怎么用module方式

https://threejs.org/docs/#manual/en/introduction/Loading-3D-models

重点的地方它都没有高亮,都堆一块了。一不小心就会错过。


化石原创文章,转载请注明来源并保留原文链接