Three.js 我很困惑为什么我的矩形区域灯赢了'；t目标，它刚刚赢了'；行不通
我已经试过多次瞄准我的矩形区域灯光，但都不起作用。我可以使用聚光灯和靶子，但我不明白为什么这样做有效而另一个不行。通常，如本例所示：threejs.org/examples/？q=obj#webgl_loader_obj2有一个对象平面。当我添加与目标相关的代码（如位置和矩阵）时，平原消失了，我的OBJ也消失了。老实说，我找不到任何关于矩形区域灯光的问题。如果你发现有什么问题，请帮忙，谢谢Three.js 我很困惑为什么我的矩形区域灯赢了'；t目标，它刚刚赢了'；行不通,three.js,Three.js,我已经试过多次瞄准我的矩形区域灯光，但都不起作用。我可以使用聚光灯和靶子，但我不明白为什么这样做有效而另一个不行。通常，如本例所示：threejs.org/examples/？q=obj#webgl_loader_obj2有一个对象平面。当我添加与目标相关的代码（如位置和矩阵）时，平原消失了，我的OBJ也消失了。老实说，我找不到任何关于矩形区域灯光的问题。如果你发现有什么问题，请帮忙，谢谢 身体{ 字体系列：Monospace； 背景色：#000； 颜色：#fff； 保证金：0； 填充：0
身体{
字体系列：Monospace；
背景色：#000；
颜色：#fff；
保证金：0；
填充：0；
边界：无；
游标：默认值；
}
#信息{
颜色：#fff；
位置：绝对位置；
顶部：10px；
宽度：100%；
文本对齐：居中；
z指数：100；
显示：块；
}
#信息a{
颜色：#f00；
字体大小：粗体；
文字装饰：下划线；
光标：指针
}
#全屏{
宽度：100%；
高度：100vh；
最小宽度：640px；
最小高度：360px；
位置：相对位置；
溢出：隐藏；
z指数：0；
}
#范例{
宽度：100%；
身高：100%；
排名：0；
左：0；
背景色：#000000；
}
#回馈{
颜色：暗红色；
}
#dat{
用户选择：无；
位置：绝对位置；
左：0；
排名：0；
z指数：200；
}
-OBJLoader2直接装载机测试
"严格使用",；
var OBJLoader2Example=（函数（）{
函数ObjLoader2示例（elementToBindTo）{
this.renderer=null；
this.canvas=elementToBindTo；
this.aspectRatio=1；
这是一个例子；
this.scene=null；
此.cameraDefaults={
posCamera：新的3.Vector3（0.0175.0500.0），
posCameraTarget：新的3.Vector3（0,0,0），
接近：0.1，
远：10000，
视野：45
};
this.camera=null；
this.cameraTarget=this.cameraDefaults.posCameraTarget；
this.controls=null；
this.smoothShading=true；
this.doubleSide=false；
this.cube=null；
this.pivot=null；
}
OBJLoader2Example.prototype.initGL=函数（）{
this.renderer=新的三个.WebGLRenderer（{
canvas:this.canvas，
反别名：是的，
自动清除：正确
} );
this.renderer.setClearColor（0x050505）；
this.scene=新的三个.scene（）；
this.camera=新的三个透视摄像头（this.cameraDefaults.fov，this.aspectRatio，this.cameraDefaults.near，this.cameraDefaults.far）；
这是resetCamera（）；
this.controls=新的三个.trackball控件（this.camera、this.renderer.doElement）；
var环境光=新的三个环境光（0xffffff）；
var directionalLight1=新的三个方向灯（0xC090.4）；
var directionalLight2=新的三个方向灯（0xC090.4）；
var directionalLight3=新的三个方向灯（0xC090.4）；
var directionalLight4=新的三个方向灯（0xC090.4）；
方向灯1.位置设置（-100，-50，100）；
方向灯2.位置设置（100,50，-100）；
方向灯3.位置设置（-100，-50，-100）；
方向灯4.位置设置（100,50,100）；
/*this.scene.add（directionalLight2）；
this.scene.add（directionalLight1）；
this.scene.add（directionalLight3）；
this.scene.add（directionalLight4）*/
var helper=新的三个.GridHelper（1200,60,0xFF4444,0x404040）；
this.scene.add（helper）；
var geometry=新的三个.BoxGeometry（.5、.5、.5）；
var material=新的三个.MeshNormalMaterial（）；
this.cube=新的三个网格（几何体、材质）；
this.pivot=new THREE.Object3D（）；
this.pivot.name='pivot'；
this.scene.add（this.pivot）；
var lighta=新的三个矩形区域灯（0xffffbb，82，1，2）；
lighta.position.set（0,0,1）；
此.scene.add（lighta）；
var helper=新的三个.RectAreaLightHelper（lighta）；
//光。目标。位置。设置（0，0，0）；
//lighta.target.matrixWorldNeedsUpdate（）；
this.scene.add（helper）；
};
OBJLoader2Example.prototype.initPostGL=函数（objDef）{
var范围=此；
var mtlLoader=new THREE.mtlLoader（）；
mtlLoader.setPath（objDef.texturePath）；
mtlLoader.setCrossOrigin（'anonymous'）；
加载（objDef.fileMtl，函数（物料）{
材料。预加载（）；
var objLoader=new THREE.OBJLoader2（）；
objLoader.setSceneGraphBaseNode（scope.pivot）；
objLoader.setMaterials（materials.materials）；
objLoader.setPath（objDef.path）；
objLoader.setDebug(
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #000;
color: #fff;
margin: 0 0 0 0;
padding: 0 0 0 0;
border: none;
cursor: default;
}
#info {
color: #fff;
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 100;
display:block;
}
#info a {
color: #f00;
font-weight: bold;
text-decoration: underline;
cursor: pointer
}
#glFullscreen {
width: 100%;
height: 100vh;
min-width: 640px;
min-height: 360px;
position: relative;
overflow: hidden;
z-index: 0;
}
#example {
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #000000;
}
#feedback {
color: darkorange;
}
#dat {
user-select: none;
position: absolute;
left: 0;
top: 0;
z-Index: 200;
}
</style>
</head>
<body>
<div id="glFullscreen">
<canvas id="example"></canvas>
</div>
<div id="dat">
</div>
<div id="info">
<a href="http://threejs.org" target="_blank">three.js</a> - OBJLoader2 direct loader test
<div id="feedback"></div>
</div>
<script src="Detector.js"></script>
<script src="http://threejs.org/build/three.min.js"></script>
<script src="TrackballControls.js"></script>
<script src="MTLLoader.js"></script>
<script src="dat.gui.min.js"></script>
<script src="OBJLoader2.js"></script>
<script>
'use strict';
var OBJLoader2Example = (function () {
function OBJLoader2Example( elementToBindTo ) {
this.renderer = null;
this.canvas = elementToBindTo;
this.aspectRatio = 1;
this.recalcAspectRatio();
this.scene = null;
this.cameraDefaults = {
posCamera: new THREE.Vector3( 0.0, 175.0, 500.0 ),
posCameraTarget: new THREE.Vector3( 0, 0, 0 ),
near: 0.1,
far: 10000,
fov: 45
};
this.camera = null;
this.cameraTarget = this.cameraDefaults.posCameraTarget;
this.controls = null;
this.smoothShading = true;
this.doubleSide = false;
this.cube = null;
this.pivot = null;
}
OBJLoader2Example.prototype.initGL = function () {
this.renderer = new THREE.WebGLRenderer( {
canvas: this.canvas,
antialias: true,
autoClear: true
} );
this.renderer.setClearColor( 0x050505 );
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera( this.cameraDefaults.fov, this.aspectRatio, this.cameraDefaults.near, this. cameraDefaults.far );
this.resetCamera();
this.controls = new THREE.TrackballControls( this.camera, this.renderer.domElement );
var ambientLight = new THREE.AmbientLight( 0xffffff );
var directionalLight1 = new THREE.DirectionalLight( 0xC0C090, .4 );
var directionalLight2 = new THREE.DirectionalLight( 0xC0C090, .4 );
var directionalLight3 = new THREE.DirectionalLight( 0xC0C090, .4 );
var directionalLight4 = new THREE.DirectionalLight( 0xC0C090, .4 );
directionalLight1.position.set( -100, -50, 100 );
directionalLight2.position.set( 100, 50, -100 );
directionalLight3.position.set( -100, -50, -100 );
directionalLight4.position.set( 100, 50, 100 );
/*this.scene.add(directionalLight2);
this.scene.add(directionalLight1);
this.scene.add(directionalLight3);
this.scene.add(directionalLight4);*/
var helper = new THREE.GridHelper( 1200, 60, 0xFF4444, 0x404040 );
this.scene.add( helper );
var geometry = new THREE.BoxGeometry( .5, .5, .5 );
var material = new THREE.MeshNormalMaterial();
this.cube = new THREE.Mesh( geometry, material );
this.pivot = new THREE.Object3D();
this.pivot.name = 'Pivot';
this.scene.add( this.pivot );
var lighta = new THREE.RectAreaLight( 0xffffbb, 82, 1, 2 );
lighta.position.set(0, 0, 1 );
this.scene.add( lighta);
var helper = new THREE.RectAreaLightHelper( lighta );
// light.target.position.set( 0, 0, 0 );
// lighta.target.matrixWorldNeedsUpdate();
this.scene.add( helper );
};
OBJLoader2Example.prototype.initPostGL = function ( objDef ) {
var scope = this;
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath( objDef.texturePath );
mtlLoader.setCrossOrigin( 'anonymous' );
mtlLoader.load( objDef.fileMtl, function( materials ) {
materials.preload();
var objLoader = new THREE.OBJLoader2();
objLoader.setSceneGraphBaseNode( scope.pivot );
objLoader.setMaterials( materials.materials );
objLoader.setPath( objDef.path );
objLoader.setDebug( false, false );
var onSuccess = function ( object3d ) {
console.log( 'Loading complete. Meshes were attached to: ' + object3d.name );
};
var onProgress = function ( event ) {
if ( event.lengthComputable ) {
var percentComplete = event.loaded / event.total * 100;
var output = 'Download of "' + objDef.fileObj + '": ' + Math.round( percentComplete ) + '%';
console.log(output);
}
};
var onError = function ( event ) {
console.error( 'Error of type "' + event.type + '" occurred when trying to load: ' + event.src );
};
objLoader.load( objDef.fileObj, onSuccess, onProgress, onError );
});
return true;
};
OBJLoader2Example.prototype.resizeDisplayGL = function () {
this.controls.handleResize();
this.recalcAspectRatio();
this.renderer.setSize( this.canvas.offsetWidth, this.canvas.offsetHeight, false );
this.updateCamera();
};
OBJLoader2Example.prototype.recalcAspectRatio = function () {
this.aspectRatio = ( this.canvas.offsetHeight === 0 ) ? 1 : this.canvas.offsetWidth / this.canvas.offsetHeight;
};
OBJLoader2Example.prototype.resetCamera = function () {
this.camera.position.copy( this.cameraDefaults.posCamera );
this.cameraTarget.copy( this.cameraDefaults.posCameraTarget );
this.updateCamera();
};
OBJLoader2Example.prototype.updateCamera = function () {
this.camera.aspect = this.aspectRatio;
this.camera.lookAt( this.cameraTarget );
this.camera.updateProjectionMatrix();
};
OBJLoader2Example.prototype.render = function () {
if ( ! this.renderer.autoClear ) this.renderer.clear();
this.controls.update();
this.cube.rotation.x += 0.05;
this.cube.rotation.y += 0.05;
this.renderer.render( this.scene, this.camera );
};
OBJLoader2Example.prototype.alterSmoothShading = function () {
var scope = this;
scope.smoothShading = ! scope.smoothShading;
console.log( scope.smoothShading ? 'Enabling SmoothShading' : 'Enabling FlatShading');
scope.traversalFunction = function ( material ) {
material.shading = scope.smoothShading ? THREE.SmoothShading : THREE.FlatShading;
material.needsUpdate = true;
};
var scopeTraverse = function ( object3d ) {
scope.traverseScene( object3d );
};
scope.pivot.traverse( scopeTraverse );
};
OBJLoader2Example.prototype.alterDouble = function () {
var scope = this;
scope.doubleSide = ! scope.doubleSide;
console.log( scope.doubleSide ? 'Enabling DoubleSide materials' : 'Enabling FrontSide materials');
scope.traversalFunction = function ( material ) {
material.side = scope.doubleSide ? THREE.DoubleSide : THREE.FrontSide;
};
var scopeTraverse = function ( object3d ) {
scope.traverseScene( object3d );
};
scope.pivot.traverse( scopeTraverse );
};
OBJLoader2Example.prototype.traverseScene = function ( object3d ) {
if ( object3d.material instanceof THREE.MultiMaterial ) {
var materials = object3d.material.materials;
for ( var name in materials ) {
if ( materials.hasOwnProperty( name ) ) this.traversalFunction( materials[ name ] );
}
} else if ( object3d.material ) {
this.traversalFunction( object3d.material );
}
};
return OBJLoader2Example;
})();
var app = new OBJLoader2Example( document.getElementById( 'example' ) );
// Init dat.gui and controls
var OBJLoader2Control = function() {
this.smoothShading = app.smoothShading;
this.doubleSide = app.doubleSide;
};
var objLoader2Control = new OBJLoader2Control();
var gui = new dat.GUI( {
autoPlace: false,
width: 320
} );
var menuDiv = document.getElementById( 'dat' );
menuDiv.appendChild(gui.domElement);
var folderQueue = gui.addFolder( 'OBJLoader2 Options' );
var controlSmooth = folderQueue.add( objLoader2Control, 'smoothShading' ).name( 'Smooth Shading' );
controlSmooth.onChange( function( value ) {
console.log( 'Setting smoothShading to: ' + value );
app.alterSmoothShading();
});
var controlDouble = folderQueue.add( objLoader2Control, 'doubleSide' ).name( 'Double Side Materials' );
controlDouble.onChange( function( value ) {
console.log( 'Setting doubleSide to: ' + value );
app.alterDouble();
});
folderQueue.open();
// init three.js example application
var resizeWindow = function () {
app.resizeDisplayGL();
};
var render = function () {
requestAnimationFrame( render );
app.render();
};
window.addEventListener( 'resize', resizeWindow, false );
console.log( 'Starting initialisation phase...' );
app.initGL();
app.resizeDisplayGL();
app.initPostGL( {
fileObj: 'ex.obj',
fileMtl: 'ex.mtl'
} );
//pp.position.set( 0, 0, 0 );
render();
</script>
</body>