CODEWITHSUNDEEP
javascriptthree.js
Zheden
Zheden

Reputation: 593

Three.js Draw simple triangle

I'm trying to draw triangle with three.js:

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 100;
scene.add( camera );

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild( renderer.domElement );

var geom = new THREE.Geometry();
var v1 = new THREE.Vector3(0,0,0);
var v2 = new THREE.Vector3(30,0,0);
var v3 = new THREE.Vector3(30,30,0);

console.log(geom.vertices)
geom.vertices.push(new THREE.Vertex(v1));
geom.vertices.push(new THREE.Vertex(v2));
geom.vertices.push(new THREE.Vertex(v3));

geom.faces.push( new THREE.Face3( 0, 1, 2 ) );
geom.computeFaceNormals();

var mesh= new THREE.Mesh( geom, new THREE.MeshNormalMaterial() );
scene.add(mesh);

renderer.render( scene, camera );

But there is nothing on screen. However these examples are working: http://threejs.org/docs/58/#Manual/Introduction/Creating_a_scene https://github.com/tonylukasavage/jsstl (triangles here are created the same way I'm trying to do)

Could you please help me to find a problem? Thanks, Ievgeniia

Upvotes: 6

Views: 12851

Answers (1)

WestLangley
WestLangley

Reputation: 104783

Do this, instead:

geom.vertices.push( v1 );
geom.vertices.push( v2 );
geom.vertices.push( v3 );

Are you copying outdated code from the net -- or from an outdated book? Learn from the three.js examples that work with the current version of the library.

three.js r.58

Upvotes: 10

Related Questions