Question

所以我正在使用Three.js和jQuery创建一个小型的可视化应用程序。目前，我想要的所有网格都出现在屏幕上。

问题：屏幕上没有任何网格出现。

例外：呈现渲染器的清晰颜色（0x00bfff），console.log（场景）确认所有网格都在场景中。

尝试修复：使用THREE.Projector，THREE.Raycaster，更改相机定位以及更多尝试次数。

我对Three.js和编程一般都很新，所以请对我的工作非常批评。一切都有帮助！谢谢！

WORLD.JS

$(document).ready(function() {
    initialize();
    animate();
});

var initialize = function() {
    clock = new THREE.Clock();  // timer used to calculate time between rendering frames

    scene = new THREE.Scene();  // list of objects that are to be "read" (rendered)

    camera = new THREE.PerspectiveCamera(35,    // FOV
                                         window.innerWidth / window.innerHeight,    // Aspect Ratio
                                         .1,    // Near
                                         10000);    // Far
    camera.position.set( 25, 25, 125 );
    camera.lookAt( scene.position );

    setupEnvironment();

    setupAI();

    renderer = new THREE.WebGLRenderer();   // renderer will draw as WebGL rather than HTML5 Canvas
    renderer.setSize( window.innerWidth, window.innerHeight );  // size of the canvas that renderer will draw on
    renderer.setClearColor( 0x00bfff, 1 );
    document.body.appendChild( renderer.domElement );   // adds the canvas to the document
};

var animate = function() {  // animates the scene with frames
    requestAnimationFrame(animate); // works recursively
    render();   // update and display
}

var render = function() {
    var delta = clock.getDelta()    // gets the seconds passed since the last call to this method

    // AI collision needed

    // AI update needed

    renderer.render( scene, camera )    // repaint
}

var setupEnvironment = function() {
    ground = new BoxMesh( 10, 0.1, 10, 0x6C4319, 1 );
    positionThenAdd( ground, [[ 0, 0 ]] );

    light1 = new THREE.PointLight( 0xFFFFFF, .5 );
    light1.position.set( 10, 10, 10 );
    scene.add( light1 );

    light2 = new THREE.PointLight( 0xFFFFFF, 1 );
    light2.position.set( -10, -10, 10 );
    scene.add( light2 );
};


var setupAI = function() {
    sheep = new BoxMesh( 1, 1, 1, 0xFFFFFF, 3 );
    positionThenAdd( sheep, [[ 0, 0 ],
                             [ 4.5, 0 ],
                             [ 9.5, 0 ]]);

    sheepHerder = new BoxMesh( 1, 1, 1, 0x996633, 1 );
    positionThenAdd( sheepHerder, [[ 4.5, 7.5 ]] );
};

function BoxMesh( width, height, depth, hexColor, amount ) {    // creates one or more box meshes
    this.width = width;
    this.height = height;
    this.depth = depth;
    this.hexColor = hexColor;
    this.amount = amount;   // amount of box meshes to be made

    boxSize = new THREE.BoxGeometry( width, height, depth );
    boxMaterial = new THREE.MeshLambertMaterial( { color: hexColor } );

    var all = [];   // will contain all of the box meshes
    for(var n = 1; n <= amount; n++) {  // adds a new box mesh to the end of the all array
        all.push(new THREE.Mesh( boxSize, boxMaterial ));   // uses the attributes given by the BoxMesh constructor's parameters
    }
    return all; // returns all of the created box meshes as an array;
}

var positionThenAdd = function( varMesh, posArrXByZ ) { // positions an object and then adds it to the scene
    this.varMesh = varMesh; // variable name of the mesh(es) array
    this.posArrXByZ = posArrXByZ;   // posArrXByZ stands for "array of positions in the format of X-by-Z"
    // posArrXByZ is a 2 dimensional array where the first dimension is for the specific mesh to be positioned...
    // and the second dimension is the positional coordinates.
    // posArrXByZ = [ [x0,z0], [x1,z1], ...[xn,zn] ]
    for(var mesh = 0; mesh < varMesh.length; mesh++) {  // mesh accesses the varMesh array
        varMesh[mesh].position.set( varMesh[mesh].geometry.parameters.width/2 + posArrXByZ[mesh][0],    // the x coordinate, varMesh[mesh].width/2 makes the x coordinate act upon the closest side
                                    varMesh[mesh].geometry.parameters.height/2 + ground.height,         // the y coordinate, which is pre-set to rest on top of the ground
                                    varMesh[mesh].geometry.parameters.depth/2 + posArrXByZ[mesh][1] );  // the z coordinate, varMesh[mesh].height/2 makes the y coordinate act upon the closest side
        scene.add( varMesh[mesh] ); // adds the specific mesh that was just positioned
    }
};

HTML文件

<!DOCTYPE html>
<html>
<head>
    <title>Taro's World</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            border: 0;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="mrdoob-three.js-d6384d2/build/Three.js"></script>
    <script src="mrdoob-three.js-d6384d2/examples/js/renderers/Projector.js"></script>
    <script src="world.js"></script>
</head>
<body></body>
</html>

Answer 1

你的剧本中有两件事情已经破裂：

在您positionThenAdd的{{1}}函数中，您在position.set(...)处写了一个地方ground.height。 ground是一个数组，您可能需要varMesh[mesh].geometry.parameters.height。
您的控制台应打印positionThenAdd不是函数。当您声明以前编写function myFunction(){....}的函数时，您以这种方式声明了这个函数：var positionThenAdd = function () { ... };。 javascript的不同之处在于，随着任何变量，positionThenAdd将在脚本顺序中可访问。既然你在最后写它，没有什么可以达到它。您只需将其声明修改为function positionThenAdd(){...}即可。请参阅var functionName = function() {} vs function functionName() {}

你的场景：http://jsfiddle.net/ba8vvkyg/1/

网格在场景中，但只显示渲染器的清晰颜色

1 个答案: