Three.js：纹理全黑

Question

Three.js：纹理全黑

我有一个简单的盒子几何形状，我试图用纹理来装饰它。然而，我的盒子根本不显示（或者可能是 100% 黑色）。当前的这个问题是从这个问题演变而来的。我已经更新了代码以反映gaitat对原始问题给出的答案。我编写了另一个简单的测试站点来演示这个新问题。这是该网站的内容：

"use strict";

// make DOM elements:
var container = document.createElement( 'div' );
document.body.appendChild( container );
var info = document.createElement( 'div' );
container.appendChild( info );

// a 'Box2' geometry instance:  (see geometry implementation below)
var myBox2geom = new THREE.BoxGeometry( 100, 100, 100, 10, 10, 10 );  // args: x,y,z-dimensions and width of their segments

// create scene:
var scene = new THREE.Scene();

// make a corresponding 'Box2' mesh:
new THREE.TextureLoader().load(
	"http://mrdoob.github.io/three.js/examples/textures/crate.gif",
	function ( texture ) {
		texture.minFilter = THREE.NearestFilter;
		var material = new THREE.MeshLambertMaterial( { map: texture, side: THREE.DoubleSide } );
		var myBox2mesh = new THREE.Mesh(myBox2geom, material);
		// add mesh to scene:
		scene.add( myBox2mesh );
	},
	function () {},  // onProgress function
	function ( error ) { console.log( error ) }  // no error gets logged
);

// make light:
var light = new THREE.PointLight( 0xffffff );
light.position.set(100, 200, 300);
light.lookAt( new THREE.Vector3( 0, 0, 0 ) );
scene.add( light );

// make camera:
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.x = 100;
camera.position.y = 200;
camera.position.z = 300;
camera.lookAt( new THREE.Vector3( 0, 0, 0 ) );
scene.add( camera );

// make renderer:
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );

// aaaand render!
renderer.render( scene, camera );



THREE.Box2Geometry = function ( width, height, depth, widthSegments, heightSegments, depthSegments ) {

	THREE.Geometry.call( this );

	this.parameters = {
		width: width,
		height: height,
		depth: depth,
		widthSegments: widthSegments,
		heightSegments: heightSegments,
		depthSegments: depthSegments
	};

	this.widthSegments = widthSegments || 1;
	this.heightSegments = heightSegments || 1;
	this.depthSegments = depthSegments || 1;

	var constructee = this;  // constructee = the instance currently being constructed by the Box2Geometry constructor

	var width_half = width / 2;    // width  = the distance along x in the absolute 3D space
	var height_half = height / 2;  // height = the distance along y in the absolute 3D space
	var depth_half = depth / 2;    // depth  = the distance along z in the absolute 3D space

	buildPlane( 'z', 'y', -1, -1, depth, height, width_half, 0 ); // px
	buildPlane( 'z', 'y',  1, -1, depth, height, -width_half, 1 ); // nx
	buildPlane( 'x', 'z',  1,  1, width, depth, height_half, 2 ); // py
	buildPlane( 'x', 'z',  1, -1, width, depth, -height_half, 3 ); // ny
	buildPlane( 'x', 'y',  1, -1, width, height, depth_half, 4 ); // pz
	buildPlane( 'x', 'y', -1, -1, width, height, -depth_half, 5 ); // nz

	function buildPlane( u, v, uDir, vDir, uDist, vDist, wDist_half, materialIndex ) {

		var w, iu, iv,
			segU = constructee.widthSegments,  // number of segments along u   // width  = x
			segV = constructee.heightSegments, // number of segments along v   // height = y
			uDist_half = uDist / 2,  // the extent of the plane along u, divided by two
			vDist_half = vDist / 2,  // the extent of the plane along v, divided by two
			offset = constructee.vertices.length;

		if ( ( u === 'x' && v === 'y' ) || ( u === 'y' && v === 'x' ) ) {

			w = 'z';

		} else if ( ( u === 'x' && v === 'z' ) || ( u === 'z' && v === 'x' ) ) {

			w = 'y';
			segV = constructee.depthSegments;

		} else if ( ( u === 'z' && v === 'y' ) || ( u === 'y' && v === 'z' ) ) {

			w = 'x';
			segU = constructee.depthSegments;

		}

		var segUi = segU + 1,  // i = inc = incremented (by one)
			segVi = segV + 1,  // i = inc = incremented (by one)
			segmentDist_u = uDist / segU,
			segmentDist_v = vDist / segV,
			normal = new THREE.Vector3();

		normal[ w ] = wDist_half > 0 ? 1 : -1;

		for ( iv = 0; iv < segVi; iv++ ) {

			for ( iu = 0; iu < segUi; iu++ ) {

				var vertex = new THREE.Vector3();
				vertex[ u ] = ( iu * segmentDist_u - uDist_half ) * uDir;
				vertex[ v ] = ( iv * segmentDist_v - vDist_half ) * vDir;
				vertex[ w ] = wDist_half;

				constructee.vertices.push( vertex );

			}

		}

		for ( iv = 0; iv < segV; iv++ ) {

			for ( iu = 0; iu < segU; iu++ ) {

				var a = iu         + segUi *   iv;
				var b = iu         + segUi * ( iv + 1 );
				var c = ( iu + 1 ) + segUi * ( iv + 1 );
				var d = ( iu + 1 ) + segUi *   iv;

				var uva = new THREE.Vector2(   iu       / segU, 1 -   iv       / segV );
				var uvb = new THREE.Vector2(   iu       / segU, 1 - ( iv + 1 ) / segV );
				var uvc = new THREE.Vector2( ( iu + 1 ) / segU, 1 - ( iv + 1 ) / segV );
				var uvd = new THREE.Vector2( ( iu + 1 ) / segU, 1 -   iv       / segV );

				var face1 = new THREE.Face3( a + offset, b + offset, d + offset );
				face1.normal.copy( normal );
				face1.vertexNormals.push( normal.clone(), normal.clone(), normal.clone() );
				face1.materialIndex = materialIndex;

				constructee.faces.push( face1 );
				constructee.faceVertexUvs[ 0 ].push( [ uva, uvb, uvd ] );

				var face2 = new THREE.Face3( b + offset, c + offset, d + offset );
				face2.normal.copy( normal );
				face2.vertexNormals.push( normal.clone(), normal.clone(), normal.clone() );
				face2.materialIndex = materialIndex;

				constructee.faces.push( face2 );
				constructee.faceVertexUvs[ 0 ].push( [ uvb.clone(), uvc, uvd.clone() ] );

			}

		}

	}

	this.mergeVertices();
};
THREE.Box2Geometry.prototype = Object.create( THREE.Geometry.prototype );

Run Code Online (Sandbox Code Playgroud)

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  </head>
  <body>
    <script src="https://raw.githubusercontent.com/mrdoob/three.js/master/build/three.js"></script>
    <script src="main2.js"></script>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 7

因此，代码结果包含三个错误，正如Falk Thiele和2pha / gaitat所指出的那样：

“跨域资源共享”(CORS) 问题，在 Firebug 中提示以下错误：
```
 SecurityError: The operation is insecure.
 gl.texImage2D.apply( gl, arguments );
```
Run Code Online (Sandbox Code Playgroud)
引用Falk Thiele的话，可以通过将 CrossOrigin 属性设置为空来修复此错误：
```
 var loader = new THREE.TextureLoader();
 loader.crossOrigin = "";
 loader.load(
     "http://mrdoob.github.io/three.js/examples/textures/crate.gif",
     function( texture ) {
         //...
     },
     function () {},  // onProgress function
     function ( error ) { console.log( error ) } // onError function
 );
```
Run Code Online (Sandbox Code Playgroud)
奇怪的是，在本地加载纹理时，也可能会出现 CORS 错误（在 Chrome 中）crate.gif。如果包含该loader.crossOrigin = "";行，就会发生这种情况。因此，似乎只有在确定来源确实是跨站点来源时才应该使用这一行。
仅scene渲染一次，并且这一次渲染发生在纹理加载之前。这是因为该TextureLoader.load()调用是异步进行的，从而让后面的代码行在的renderer.render( scene, camera );调用load完成之前执行。
该脚本无法在 Chrome 中运行，原因有两个：首先是上述 CORS 问题，其次是脚本由于某种原因无法加载三个库 ( Uncaught ReferenceError: THREE is not defined)。我不知道为什么三个无法在 Chrome 中加载，但在错误更正的代码中（见下文，以及此处），错误不再出现，因此目前原因仍然未知。

最后，我制作了一个JS 小提琴来演示运行代码。

以下是错误更正后的代码片段，错误 1、2 和 3 不再存在：

 SecurityError: The operation is insecure.
 gl.texImage2D.apply( gl, arguments );

Run Code Online (Sandbox Code Playgroud)

 var loader = new THREE.TextureLoader();
 loader.crossOrigin = "";
 loader.load(
     "http://mrdoob.github.io/three.js/examples/textures/crate.gif",
     function( texture ) {
         //...
     },
     function () {},  // onProgress function
     function ( error ) { console.log( error ) } // onError function
 );

Run Code Online (Sandbox Code Playgroud)

编辑：可能导致纹理变白（如果它本身发光）或变黑（如果不是）的第四种错误是如果没有灯光，或者灯光没有添加到场景，或者灯光指向错误的方向（提示：使用light.lookAt()）或者灯光距离网格太远。

编辑2：第五个原因是面法线是否没有从几何体指向外部。有关详细信息，请参阅问题Three.js：自定义几何体不会被纹理化。

归档时间：	9 年，9 月前
查看次数：	10232 次
最近记录：	2 年，1 月前