我有一个简单的盒子几何体，想用纹理来装饰它。然而，我的盒子根本不显示（或者可能是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 );<!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>
animate()函数。这将解决你的问题。 - gaitat