three.js не оказывает пользовательскую форму

Я пытаюсь включить FirstPersonControls после этого example, который немного сложнее, чем мне нужно. Я еще не реализовал элементы управления, но я до сих пор не могу видеть содержимое загружаемого. Это мой код до сих пор:three.js не оказывает пользовательскую форму

<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();

Спасибо!

источник

2013-11-30 mauricioSanchez

Ваш код запущен до того, как браузер проанализировал документ HTML и построил DOM.
Наденьте свой код внутри нагрузки.

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

источник

2013-11-30 21:55:29

Не работает. Я все еще получаю белый экран и никаких ошибок :( – mauricioSanchez

@MauricioSanchez Можете ли вы предоставить [jsfiddle] (http://www.jsfiddle.net)? –

Там вы идете http://jsbin.com/axIxoQOT/1/ – mauricioSanchez

three.js не оказывает пользовательскую форму

ответ

Смежные вопросы