Geek Answers Handbook

Three.js draw a simple triangle

I am trying to draw a triangle using 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 the screen. However, these examples work: http://threejs.org/docs/58/#Manual/Introduction/Creating_a_scene https://github.com/tonylukasavage/jsstl (triangles are created in the same way as I try to do)

Could you help me find the problem? Thanks, Ievgeniia

+4
source share
1 answer

Do this, instead:

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

Are you copying outdated code from the network - or from an outdated book? Explore the three examples. Js that work with the current version of the library.

three.js r.58

+9
source

More articles:


All Articles