使用聚光灯作为示例，了解使用“全局变量”访问加载到three.js中的模型(Understanding accessing a model loaded into three.js with a &#

使用聚光灯作为示例，了解使用“全局变量”访问加载到three.js中的模型(Understanding accessing a model loaded into three.js with a 'global variable' using a spotlight as an example)

我试图了解three.js如何访问加载的模型。 这是我正在努力尝试和理解的例子：

我加载了一个模型，一个带有纹理和聚光灯的简单Blender立方体。 我在加载器之前声明'box'：

var box; // load in geometry and textures var loader = new THREE.JSONLoader(); loader.load('../models/two textures on cube 03.js', function (geometry, material) { box = new THREE.Mesh(geometry, material[2]); //position, scale box.position.set (0,0,0); box.rotation.set (0,-1.2,0); box.scale.set (2,2,2); box.receiveShadow = true; scene.add(box); // add spotlight for the shadows var spotLight = new THREE.SpotLight( 0xffffff ); spotLight.position.set( -10, 14, 14 ); spotLight.target = box; spotLight.castShadow = true; scene.add( spotLight ); }, '../models');

这很有效。 但是如果我将聚光灯编码移动到装载器支架之外（在它之后）聚光灯不起作用，即使我已经在括号外声明了“盒子”。

我知道如果我以这种方式将聚光灯添加到渲染功能：

if (box) { //all spotlight coding added in here, exactly as used above }

然后这个工作。 但我不知道为什么。

我也知道，如果我没有直接向场景中添加框，而是将框放在加载器之前声明的Object3D中，那么我可以在加载器之后添加聚光灯并将目标聚焦在Object3D并且它可以工作。

为什么聚光灯'看到'在加载器之前声明的Object3D但没有看到'var box'？ 如果我在渲染函数中使用if语句，为什么它能“看到”框？ 是否与完成加载器功能需要多长时间有关？

谢谢你的帮助。

I'm trying to understand how three.js accesses a loaded model. This is the example I'm working on to try and understand:

I load a model, a simple Blender cube with a texture and a spotlight. I declare 'box' before the loader:

var box; // load in geometry and textures var loader = new THREE.JSONLoader(); loader.load('../models/two textures on cube 03.js', function (geometry, material) { box = new THREE.Mesh(geometry, material[2]); //position, scale box.position.set (0,0,0); box.rotation.set (0,-1.2,0); box.scale.set (2,2,2); box.receiveShadow = true; scene.add(box); // add spotlight for the shadows var spotLight = new THREE.SpotLight( 0xffffff ); spotLight.position.set( -10, 14, 14 ); spotLight.target = box; spotLight.castShadow = true; scene.add( spotLight ); }, '../models');

This works. But if I move the spotlight coding outside of the loader brackets (after it) the spotlight doesn't work, even though I've declared 'box' outside of the brackets.

I know that if I add the spotlight to the render function in this way:

if (box) { //all spotlight coding added in here, exactly as used above }

then this works. But I don't know why.

I also know that if I don't add box directly to the scene but place the box within an Object3D which is declared before the loader, then I can add the spotlight after the loader and target the spotlight at the Object3D and it works.

Why does the spotlight 'see' the Object3D declared before the loader but doesn't see 'var box'? And why can it 'see' the box if I use that if statement within the render function? Is it something to do with how long it takes to complete the loader function?

Thanks for any help.

最满意答案

模型的加载是异步的，因此您不确定在调用执行后模型是否真正加载。 所以你应该拥有的是：

var loader = new THREE.JSONLoader(); loader.onLoadComplete = function () { // here you know that the model has loaded scene.add (box); } loader.load ...

聚光灯代码应该是完全独立的，不与加载代码混合。 您可以在http://threejs.org/docs/index.html#Reference/Loaders/Loader找到有关loader.onLoad*方法的更多信息。

The loading of the model is asynchronous so you are not sure that after the call has executed the model is really loaded. So what you should have is:

var loader = new THREE.JSONLoader(); loader.onLoadComplete = function () { // here you know that the model has loaded scene.add (box); } loader.load ...

The spotlight code should be totally separate and not mixed with the loading code. You can find more about the loader.onLoad* methods at http://threejs.org/docs/index.html#Reference/Loaders/Loader