THEE.JSONLoader对象作为公共变量

时间:2016-03-29 23:08:31

标签: json function variables three.js

我想知道是否有可能添加一个通过THREE.JSONLoader加载的对象作为公共变量?理想情况下,我希望我所有加载的纹理,材质创建和几何图形都是我脚本顶部的公共变量,以便于操作(我有强大的3D背景,但对js和webGL很新)。我发现我声明的公共变量 - 一旦被作为参数添加到函数中就不再公开了 - 在本例中是JSONLoader。但是,只需命名一个var,而不声明其值"运行"但是我无法理解THREE.min.js错误。我已将下面的代码包含在内 - 知道它还有其他问题 - 请随时告诉我它有多糟糕 - 这有助于我学习:)。

//webGL

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

camera.position.set(0, 16, 25);
camera.rotation.x += -0.32;

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

cubeCamera = new THREE.CubeCamera(1, 1000, 256); // parameters: near, far, resolution
cubeCamera.renderTarget.texture.minFilter = THREE.LinearMipMapLinearFilter; // mipmap filter
scene.add(cubeCamera);

///LOADERS
var loadTexture = new THREE.TextureLoader();
var loaderJs = new THREE.JSONLoader();


///TEXTURES
var skyTexture = loadTexture.load("textures/background.jpg");
var seatTexture = loadTexture.load("textures/abc_Diffuse.jpg");

///MATERIALS
var skyMaterial = new THREE.MeshBasicMaterial({
    side: THREE.DoubleSide,
    map: skyTexture
});
var frameMaterial = new THREE.MeshLambertMaterial({
    //envMap: cubeCamera.renderTarget,
    color: 0xffffff
});
var seatMaterial = new THREE.MeshLambertMaterial({
        map: seatTexture
});


///GEOMETRY and MESHES 
var frameGeo;

var skyGeo = new THREE.SphereGeometry(30, 30, 30);
var skySphere = new THREE.Mesh(skyGeo, skyMaterial);
scene.add(skySphere);

loaderJs.load("models/stoolFrame.js", function (){
    frameGeo = new THREE.Mesh(frameGeo, frameMaterial);
    frameGeo.scale.set(.5, .5, .5);
    barStool.add(frameGeo);
});

loaderJs.load("models/stoolSeat.js", function (seatGeo){
    seatGeo = new THREE.Mesh(seatGeo, seatMaterial);
    seatGeo.scale.set(.5, .5, .5);
    barStool.add(seatGeo);
});


var barStool = new THREE.Object3D();
scene.add(barStool);

    var render = function () {

        requestAnimationFrame(render);
        barStool.rotation.y += 0.01;

        frameGeo.visible = false;
        cubeCamera.position.copy(frameGeo.position);
        cubeCamera.updateCubeMap(renderer, scene);
        frameGeo.visible = true;


        renderer.render(scene, camera);
    };



render();

1 个答案:

答案 0 :(得分:0)

加载stoolFrame时,忘记添加回调函数的参数,请查看documentation示例。回调函数采用几何和材质。当你加载凳子座椅时,你也忘记了材料(如果你有粪便的材料)

var frameGeometry;
var frameMaterial;
var frameMesh;
loaderJs.load("models/stoolFrame.js", function (geometry, material){
    frameGeometry = geometry;
    frameMaterial = material
    frameMesh = new THREE.Mesh(frameGeometry, frameMaterial);
    frameMesh.scale.set(.5, .5, .5);
    barStool.add(frameMesh);
});

以上是如何将几何体,材质和网格物体转换为全局变量的示例。但是,您可能不需要将几何体和材质保存为全局变量(无论如何都可以从网格中访问它们:frameMesh.material; frameMesh.geometry)。

如果参数名称与全局变量名称相同,则javascript将在尝试访问时使用参数变量而不是全局参数变量。