Javascript 加载JSON对象时显示三个JS白色屏幕
我下载了Javascript 加载JSON对象时显示三个JS白色屏幕,javascript,three.js,webgl,Javascript,Three.js,Webgl,我下载了threejs,现在尝试创建一个3D环境,在那里你可以在某种“自我视角”中自由移动。我使用pointlock控件示例作为提交,现在我开始添加我自己的东西,从Blender中创建的汽车开始,并导出为JSON,但每次尝试加载它时,我都会看到一个白色屏幕。我希望你们能帮助我 代码: <style> html, body { width: 100%; height: 100%; }
threejs
,现在尝试创建一个3D环境
,在那里你可以在某种“自我视角”中自由移动。我使用pointlock控件示例作为提交,现在我开始添加我自己的东西,从Blender中创建的汽车开始,并导出为JSON
,但每次尝试加载它时,我都会看到一个白色屏幕。我希望你们能帮助我
代码:
<style>
html, body {
width: 100%;
height: 100%;
}
body {
background-color: #ffffff;
margin: 0;
overflow: hidden;
font-family: arial;
}
#blocker {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}
#instructions {
width: 100%;
height: 100%;
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
color: #ffffff;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<script src="../build/three.min.js"></script>
<script src="js/controls/PointerLockControls.js"></script>
<div id="blocker">
<div id="instructions">
<span style="font-size:40px">Click to move</span>
<br />
(WASD or Arrow Keys = Move, SPACE = Jump, MOUSE = Look around)
</div>
</div>
<script>
var camera, scene, renderer;
var geometry, material, mesh;
var loader;
var auto;
var loadModel;
var controls,time = Date.now();
var objects = [];
var ray;
var blocker = document.getElementById( 'blocker' );
var instructions = document.getElementById( 'instructions' );
// http://www.html5rocks.com/en/tutorials/pointerlock/intro/
var havePointerLock = 'pointerLockElement' in document || 'mozPointerLockElement' in document || 'webkitPointerLockElement' in document;
if ( havePointerLock ) {
var element = document.body;
var pointerlockchange = function ( event ) {
if ( document.pointerLockElement === element || document.mozPointerLockElement === element || document.webkitPointerLockElement === element ) {
controls.enabled = true;
blocker.style.display = 'none';
} else {
controls.enabled = false;
blocker.style.display = '-webkit-box';
blocker.style.display = '-moz-box';
blocker.style.display = 'box';
instructions.style.display = '';
}
}
var pointerlockerror = function ( event ) {
instructions.style.display = '';
}
// Hook pointer lock state change events
document.addEventListener( 'pointerlockchange', pointerlockchange, false );
document.addEventListener( 'mozpointerlockchange', pointerlockchange, false );
document.addEventListener( 'webkitpointerlockchange', pointerlockchange, false );
document.addEventListener( 'pointerlockerror', pointerlockerror, false );
document.addEventListener( 'mozpointerlockerror', pointerlockerror, false );
document.addEventListener( 'webkitpointerlockerror', pointerlockerror, false );
instructions.addEventListener( 'click', function ( event ) {
instructions.style.display = 'none';
// Ask the browser to lock the pointer
element.requestPointerLock = element.requestPointerLock || element.mozRequestPointerLock || element.webkitRequestPointerLock;
if ( /Firefox/i.test( navigator.userAgent ) ) {
var fullscreenchange = function ( event ) {
if ( document.fullscreenElement === element || document.mozFullscreenElement === element || document.mozFullScreenElement === element ) {
document.removeEventListener( 'fullscreenchange', fullscreenchange );
document.removeEventListener( 'mozfullscreenchange', fullscreenchange );
element.requestPointerLock();
}
}
document.addEventListener( 'fullscreenchange', fullscreenchange, false );
document.addEventListener( 'mozfullscreenchange', fullscreenchange, false );
element.requestFullscreen = element.requestFullscreen || element.mozRequestFullscreen || element.mozRequestFullScreen || element.webkitRequestFullscreen;
element.requestFullscreen();
} else {
element.requestPointerLock();
}
}, false );
} else {
instructions.innerHTML = 'Your browser doesn\'t seem to support Pointer Lock API';
}
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0xffffff, 0, 750 );
var light = new THREE.DirectionalLight( 0xffffff, 1.5 );
light.position.set( 1, 1, 1 );
scene.add( light );
var light = new THREE.DirectionalLight( 0xffffff, 0.75 );
light.position.set( -1, - 0.5, -1 );
scene.add( light );
controls = new THREE.PointerLockControls( camera );
scene.add( controls.getObject() );
ray = new THREE.Raycaster();
ray.ray.direction.set( 0, -1, 0 );
// floor
geometry = new THREE.PlaneGeometry( 2000, 2000, 100, 100 );
geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );
for ( var i = 0, l = geometry.vertices.length; i < l; i ++ ) {
var vertex = geometry.vertices[ i ];
vertex.x += Math.random() * 20 - 10;
vertex.y += Math.random() * 2;
vertex.z += Math.random() * 20 - 10;
}
for ( var i = 0, l = geometry.faces.length; i < l; i ++ ) {
var face = geometry.faces[ i ];
face.vertexColors[ 0 ] = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
face.vertexColors[ 1 ] = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
face.vertexColors[ 2 ] = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
face.vertexColors[ 3 ] = new THREE.Color().setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
}
material = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
// objects
loader = new THREE.JSONLoader( );
loadModel = function(geometry)
{
auto = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { envMap: THREE.ImageUtils.loadTexture( 'textures/metal.jpg', new THREE.SphericalReflectionMapping() ), overdraw: true, shading: THREE.SmoothShading } ) );
mesh.scale.set(1, 1, 1);
mesh.position.set(0, 150, 0);
//mesh.rotation.set(Math.PI/2, Mat.PI/2, Math.PI/2);
//mesh.matrix.setRotationFromEuler(mesh.rotation);
scene.add( auto );
};
loader.load('blender.js/auto.js', loadModel );
setInterval(render, 50);
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
controls.isOnObject( false );
ray.ray.origin.copy( controls.getObject().position );
ray.ray.origin.y -= 10;
var intersections = ray.intersectObjects( objects );
if ( intersections.length > 0 ) {
var distance = intersections[ 0 ].distance;
if ( distance > 0 && distance < 10 ) {
controls.isOnObject( true );
}
}
controls.update( Date.now() - time );
renderer.render( scene, camera );
time = Date.now();
}
</script>
</body>
html,正文{
宽度:100%;
身高:100%;
}
身体{
背景色:#ffffff;
保证金:0;
溢出:隐藏;
字体系列:arial;
}
#阻滞剂{
位置:绝对位置;
宽度:100%;
身高:100%;
背景色:rgba(0,0,0,0.5);
}
#指示{
宽度:100%;
身高:100%;
显示:-网络工具包盒;
显示器:-moz盒;
显示:框;
-webkit盒方向:水平;
-moz盒方向:水平;
盒子方向:水平;
-webkit盒包:中心;
-莫兹盒包装:中心;
盒式包装:中间;
-webkit框对齐:居中;
-moz框对齐:居中;
框对齐:居中;
颜色:#ffffff;
文本对齐:居中;
光标:指针;
}
点击移动
(WASD或箭头键=移动,空格=跳跃,鼠标=环视)
摄像机、场景、渲染器;
变量几何、材质、网格;
var装载机;
var自动;
var负荷模型;
var控件,time=Date.now();
var对象=[];
变异射线;
var blocker=document.getElementById('blocker');
var instructions=document.getElementById('instructions');
// http://www.html5rocks.com/en/tutorials/pointerlock/intro/
var havePointerLock='pointerLockElement'在文档| | |'mozPointerLockElement'在文档| | |'webkitPointerLockElement'中;
if(havePointerLock){
var元素=document.body;
var pointerlockchange=函数(事件){
if(document.pointerLockElement==元素| | document.mozPointerLockElement==元素| | document.webkitPointerLockElement==元素){
controls.enabled=true;
blocker.style.display='none';
}否则{
controls.enabled=false;
blocker.style.display='-webkit-box';
blocker.style.display='-moz-box';
blocker.style.display='box';
说明.style.display='';
}
}
var pointerlockerror=函数(事件){
说明.style.display='';
}
//钩子指针锁定状态更改事件
document.addEventListener('pointerlockchange',pointerlockchange,false);
document.addEventListener('mozpointerlockchange',pointerlockchange,false);
document.addEventListener('webkitpointerlockchange',pointerlockchange,false);
document.addEventListener('pointerlockerror',pointerlockerror,false);
document.addEventListener('mozpointerlockerror',pointerlockerror,false);
document.addEventListener('webkitpointerlockerror',pointerlockerror,false);
说明.addEventListener('click',函数(事件){
instructions.style.display='none';
//要求浏览器锁定指针
element.requestPointerLock=element.requestPointerLock | | element.mozRequestPointerLock | | element.webkitRequestPointerLock;
if(/Firefox/i.test(navigator.userAgent)){
var fullscreenchange=函数(事件){
if(document.fullscreenElement==元素| | document.mozFullscreenElement==元素| | document.mozFullscreenElement==元素){
文档。删除EventListener('fullscreenchange',fullscreenchange);
文档。removeEventListener('mozfullscreenchange',fullscreenchange);
元素。requestPointerLock();
}
}
文档。addEventListener('fullscreenchange',fullscreenchange,false);
文档.addEventListener('mozfullscreenchange',fullscreenchange,false);
element.requestFullscreen=element.requestFullscreen | | element.mozRequestFullscreen | | element.mozRequestFullscreen | | element.webkitRequestFullscreen;
元素。requestFullscreen();
}否则{
元素。requestPointerLock();
}
},假);
}否则{
instructions.innerHTML='您的浏览器似乎不支持指针锁定API';
}
init();
制作动画();
函数init(){
摄像头=新的三个透视摄像头(75,window.innerWidth/window.innerHeight,11000);
场景=新的三个。场景();
scene.fog=新的3.fog(0xffffff,0750);
var灯=新的三方向灯(0xffffff,1.5);
光。位置。设置(1,1,1);
场景。添加(灯光);
var灯光=新的三方向灯光(0xffffff,0.75);
光。位置。设置(-1,-0.5,-1);
场景。添加(灯光);
控件=新的三个指针锁定控件(摄像头);
添加(controls.getObject());
ray=新的三个。Raycaster();
射线方向集(0,-1,0);
//地板
几何体=新的3.Pl
loader = new THREE.JSONLoader();
loadModel = function (geometry) {
mesh2 = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
envMap : THREE.ImageUtils.loadTexture('textures/metal.refl.jpg', new THREE.SphericalReflectionMapping()),
overdraw : true,
shading : THREE.SmoothShading
}));
mesh2.scale.set(1, 1, 1);
mesh2.position.set(0, 0, 0);
//mesh.rotation.set(Math.PI/2, Mat.PI/2, Math.PI/2);
//mesh.matrix.setRotationFromEuler(mesh.rotation);
scene.add( mesh2 );
};