我有一个简单的盒子几何形状,我正在尝试用纹理对其进行装饰。但是,我的盒子根本没有显示(或者它可能是 100% 黑色)。当前的这个问题是从 this question 演变而来的.我更新了代码以反射(reflect) gaitat 给出的答案关于原来的问题。我写了another simple test site来演示这个新问题。这是该网站的内容:
"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 );
<!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>
最佳答案
因此,代码结果包含三个错误,每个错误都由 Falk Thiele 指出和 2pha/gaitat :
“跨源资源共享”(CORS) 问题,在 Firebug 中提示以下错误:
SecurityError: The operation is insecure. gl.texImage2D.apply( gl, arguments );
引自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 );
奇怪的是,在本地加载
crate.gif
纹理时,也会出现 CORS 错误(在 Chrome 中)。如果包含loader.crossOrigin = "";
行,就会发生这种情况。因此,如果确定来源确实是跨站点来源,似乎应该使用这一行。场景
只被渲染一次,而这一次渲染发生在纹理加载之前。这是因为TextureLoader.load()
调用是异步工作的,因此让后面的代码行renderer.render( scene, camera );
在调用之前执行load
已经完成。脚本无法在 Chrome 中运行,原因有两个:首先是上述 CORS 问题,其次,脚本由于某种原因未能加载三个库(
Uncaught ReferenceError: THREE is not已定义
)。我不知道为什么 THREE 在 Chrome 中加载失败,但在错误更正后的代码中(见下文,以及 here )错误不再出现,所以目前原因仍然未知。
最后,我做了一个JS fiddle demonstrating the running code .
这里是错误更正后的代码片段,错误 1、2 和 3 不再存在:
"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:
var loader = new THREE.TextureLoader();
loader.crossOrigin = "";
loader.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, continuously!
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
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 );
<!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="main3.js"></script>
</body>
</html>
编辑:第四种可能导致纹理变白(如果它本身是自发光的)或变黑(如果不是)的错误是没有灯光,或者没有灯光被添加到场景中,或者灯光指向错误的方向(提示:使用 light.lookAt()
)或者灯光离网格太远。
编辑 2:第五个原因是面法线没有从几何体指向外部。见问题three.js: custom geometry wont be textured了解详情。
关于javascript - three.js:纹理全黑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34411822/