I'm basically new to Three.js I find Three.js intersting because I can animate 3D without using any Flash or whatever.
But my problem is that I don't know how to merge 2 simple triangles as one.
So here's my code:
<body>
<script src="js/three.min.js"></script>
<script type=text/javascript>
var camera, scene, renderer;
var geometry, geometry1, material, mesh;
var FrontSide, Backside;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 10, 10000);
camera.position.z = 1000;
scene = new THREE.Scene();
geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vertex ( new THREE.Vector3( -100, 100, 100 ) ) );
geometry.vertices.push( new THREE.Vertex ( new THREE.Vector3( -100, -100, 100 ) ) );
geometry.vertices.push( new THREE.Vertex ( new THREE.Vector3( 100, 100, 100 ) ) );
geometry.faces.push( new THREE.Face3( 0, 1, 2 ) );
geometry1 = new THREE.Geometry();
geometry1.vertices.push( new THREE.Vertex ( new THREE.Vector3( -100, 100, 100 ) ) );
geometry1.vertices.push( new THREE.Vertex ( new THREE.Vector3( -100, -100, 100 ) ) );
geometry1.vertices.push( new THREE.Vertex ( new THREE.Vector3( 100, 100, 100 ) ) );
geometry1.faces.push( new THREE.Face3( 0, 1, 2 ) );
material = new THREE.MeshBasicMaterial({
color: 0x00ff00,
wireFrame: true,
wireFrameLinewidth: 3
});
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xffffff, 1);
document.body.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
//mesh.rotation.x += 0.01;
//mesh.rotation.y -= 0.04;
renderer.render(scene, camera);
}
</script>