Help with three js

papelas · August 3, 2015

Hi I'm noob using three js and JS. But the thing is I've been trying to load a model using examples and just changing the URL from the files I use, but I have 1 error and I do'nt know how to sort it out...

Can anybody help me??? this is my code.

<head>

<title>three.js webgl - loaders - OBJ loader</title>

<style>

body {

font-family: Monospace;

background-color: #000;

color: #fff;

margin: 0px;

overflow: hidden;

}

#info {

color: #fff;

position: absolute;

top: 10px;

width: 100%;

text-align: center;

z-index: 100;

display:block;

}

#info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }

</style>

</head>

<body>

<a href="http://threejs.org" target="_blank">three.js</a> - OBJLoader test

</div>

var container;

var camera, scene, renderer;

var mouseX = 0, mouseY = 0;

var windowHalfX = window.innerWidth / 2;

var windowHalfY = window.innerHeight / 2;

init();

animate();

function init() {

container = document.createElement( 'div' );

document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );

camera.position.z = 100;

// scene

scene = new THREE.Scene();

var ambient = new THREE.AmbientLight( 0x101030 );

scene.add( ambient );

var directionalLight = new THREE.DirectionalLight( 0xffeedd );

directionalLight.position.set( 1, 1, 1 );

scene.add( directionalLight );

// texture

var manager = new THREE.LoadingManager();

manager.onProgress = function ( item, loaded, total ) {

console.log( item, loaded, total );

};

var texture = new THREE.Texture();

var onProgress = function ( xhr ) {

if ( xhr.lengthComputable ) {

var percentComplete = xhr.loaded / xhr.total * 100;

console.log( Math.round(percentComplete, 2) + '% downloaded' );

}

};

var onError = function ( xhr ) {

};

var loader = new THREE.ImageLoader( manager );

loader.load( 'textures/descarga.jpg', function ( image ) {

texture.image = image;

texture.needsUpdate = true;

} );

// model

var loader = new THREE.OBJLoader( manager );

loader.load( '3d/mikadosmall.obj', function ( object ) {

object.traverse( function ( child ) {

if ( child instanceof THREE.Mesh ) {

child.material.map = texture;

}

} );

object.position.y = - 80;

scene.add( object );

}, onProgress, onError );

//

renderer = new THREE.WebGLRenderer();

renderer.setPixelRatio( window.devicePixelRatio );

renderer.setSize( window.innerWidth, window.innerHeight );

container.appendChild( renderer.domElement );

document.addEventListener( 'mousemove', onDocumentMouseMove, false );

//

window.addEventListener( 'resize', onWindowResize, false );

}

function onWindowResize() {

windowHalfX = window.innerWidth / 2;

windowHalfY = window.innerHeight / 2;

camera.aspect = window.innerWidth / window.innerHeight;

camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

}

function onDocumentMouseMove( event ) {

mouseX = ( event.clientX - windowHalfX ) / 2;

mouseY = ( event.clientY - windowHalfY ) / 2;

}

//

function animate() {

requestAnimationFrame( animate );

render();

}

function render() {

camera.position.x += ( mouseX - camera.position.x ) * .05;

camera.position.y += ( - mouseY - camera.position.y ) * .05;

camera.lookAt( scene.position );

renderer.render( scene, camera );

}

</script>

</body>

</html>

and the error is the next:

[.WebGLRenderingContext-056A12F0]GL ERROR :GL_INVALID_OPERATION : glDrawArrays: attempt to access out of range vertices in attribute 2 (13:04:04:456 | warning, rendering)

at public_html/index.html

I don´t know what atribute it refers...

Thanks in adavanced!!!

Sign In

Help with three js

Recommended Posts

papelas

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Browse

Activity