CODEWITHSUNDEEP
javascriptthree.js
Gab-Z
Gab-Z

Reputation: 1

First step's with THREE.js : issues trying to add a blender model to scene

I'm doing my first steps with THREE.js.

For now on I simply tried to modify a sample file found here : http://aerotwist.com/tutorials/getting-started-with-three-js/

The file creates a THREE scene, adds a sphere and a point light.

My issue is : I don't find how to replace the sphere by a model that I created using blender 2.63 and exported using the blender 2.63 exporter.

I guess my syntax is somehow wrong.

Here's my code below. Can someone tell me what to change to get my blender model to be displayed on stage?

thx.

<head>
    <meta charset="utf-8" />
    <title>Sample Three.js</title>
    <link rel="stylesheet" href="js/Styles.css" />
</head>
<body>

    <div id="container">
    </div>

</body>
<script src="js/Stats.js"></script>
<script src="js/Three.js"></script>
<script>

var WIDTH = 700,
    HEIGHT = 600;


var VIEW_ANGLE = 45,
    ASPECT = WIDTH / HEIGHT,
    NEAR = 0.1,
    FAR = 10000;

var container = window.document.getElementById('container');


var renderer = new THREE.WebGLRenderer();
var camera = new THREE.PerspectiveCamera(  VIEW_ANGLE,
                                ASPECT,
                                NEAR,
                                FAR  );
var scene = new THREE.Scene();


camera.position.z = 300;


renderer.setSize(WIDTH, HEIGHT);


container.appendChild(renderer.domElement);


var sphereMaterial = new THREE.MeshLambertMaterial(
{
    color: 0xCC0000
});


//var radius = 50, segments = 16, rings = 16;

var loader = new THREE.JSONLoader();

loader.load( 'js/ModelTest.js', function ( geometry ) {
    mesh = new THREE.Mesh( geometry, sphereMaterial );
    scene.add( mesh );
    mesh.position.x = 0;
    mesh.position.y = 0;
    mesh.position.z = 0;
alert(mesh.geometry.vertices.length)
} );

//var sphere = new THREE.Mesh(
//new THREE.SphereGeometry(radius, segments, rings),sphereMaterial);

//scene.add(sphere);

scene.add(camera);

var pointLight = new THREE.PointLight( 0xFFFFFF );

pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;

scene.add(pointLight);

renderer.render(scene, camera);

</script>

Upvotes: 0

Views: 471

Answers (2)

pietro909
pietro909

Reputation: 1861

Maybe a stupid answer, but I had the same problem and solved it scaling object. Try to add in your callback function, after mesh.position.z=0:

mesh.scale.x = mesh.scale.y = mesh.scale.z = 200;

for me it worked.

Hope to be useful. Pietro

Upvotes: 1

WestLangley
WestLangley

Reputation: 104833

Without a live example, it is hard to know...

The loading is occurring asynchronously. Move the render() call to the last line of the loader callback function. (replace your alert call).

Make sure the camera is close enough to the model to see it.

camera.lookAt( scene.position ) will ensure the camera is looking at the origin after you move it.

Upvotes: 0

Related Questions