Question

我一直试图在example之后加入FirstPersonControls，这对我需要的东西来说有点复杂。我还没有实现控件，但我仍然无法看到我正在加载的内容。到目前为止，这是我的代码：

<html>

<head>
    <title> Prototype 2 </title>
    <meta charset="utf-8">
    <!--Include this one if the code doesn't work <script src="js/keyboard.js"></script>-->

    <style>
        body {
    background-color: #ffffff;
    margin: 0;
    overflow: hidden;
    font-family: arial;
        }

        #container {                
            position: absolute;
          /*left: 0;
            right: 0;
            top: 0;
            bottom: 0;*/
            width: 100%;
            height: 100%;
            /*background-color: rgba(0,0,0,0.5);*/
        }


    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="js/three.min.js" type="text/javascript" ></script>
    <script src="js/FirstPersonControls.js"></script>

</head>


<body>
    <div id="container" >


    </div >



    <script src="js/main2.js"> </script>


</body>



</html>

这是main2.js

var container, scene, camera, renderer, controls, mesh;

function init() {

container = $('#container');
var WIDTH = container.width(),
    HEIGHT = container.height();

//Scene
scene = new THREE.Scene();      

//Render
renderer = new THREE.WebGLRenderer( {antialias: true} );
renderer.setClearColor( 0x000000 );
renderer.setSize( WIDTH, HEIGHT);
container.append( renderer.domelement);

//Camera
camera = new THREE.PerspectiveCamera( 45, WIDTH / HEIGHT, 0.1, 20000 );
//Might need this stuff later
camera.position.z = 10;
camera.position.y = 10;
camera.position.x = 20;
scene.add(camera);

//Create a light
var light = new THREE.PointLight(0xffffff);
light.position.set(-100,200,100);
scene.add(light);

//Here we load our custom shape
var loader = new THREE.JSONLoader();
loader.load("threejs_objects/lightwave.js", function( geometry){
    // var material = new THREE.MeshLambertMaterial({color: 0xff0000});
    var material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true} );
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
    objects.push( mesh );

});

//If Window resizing...
window.addEventListener('resize', function(){ 

var WIDTH = window.innerWidth,
    HEIGHT = window.innerHeight;

    renderer.setSize( WIDTH, HEIGHT);
    camera.aspect = WIDTH / HEIGHT;
    camera.updateProjectionMatrix();
});

}

function render(){


 renderer.render( scene, camera);

}

function animate() {

requestAnimationFrame( animate );
render();
}

init();
animate();

谢谢！

Answer 1

在浏览器解析HTML文档并构建DOM之前，您的代码正在运行。
把你的代码放在onload上。

window.onload = function() {
  // your js code ( all the code inside the main2.js )
};

three.js不呈现自定义形状

1 个答案: