As a newcomer to three.js, I have encountered an issue that I would appreciate some assistance with. I am attempting to draw a triangle and square next to each other, but the problem arises with the square mesh. Only the first vertex push seems to occur and it is not getting rendered. Is there something wrong in my approach here?
<!DOCTYPE html>
<html>
<head>
<script src="three.js" type="text/javascript"></script>
<script src="Detector.js" type="text/javascript"></script>
<script src="Projector.js" type="text/javascript"></script>
<script src="CanvasRenderer.js" type="text/javascript"></script>
</head>
<body>
<div id="myCanvas">
<script>
var scene;
var camera;
var renderer;
initializeScene();
renderScene();
function initializeScene()
{
if(Detector.webgl)
{
renderer=new THREE.WebGLRenderer({antialias:true});
}
else
{
renderer=new THREE.CanvasRenderer();
}
renderer.setClearColor(0x000000, 1);
canvasWidth=window.innerWidth;
canvasHeight=window.innerHeight;
renderer.setSize(canvasWidth,canvasHeight);
document.getElementById("myCanvas").appendChild(renderer.domElement);
scene=new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, canvasWidth / canvasHeight, 1, 100);
camera.position.set(0, 0, 10);
camera.lookAt(scene.position);
scene.add(camera);
var triangleGeometry=new THREE.Geometry();
triangleGeometry.vertices.push(new THREE.Vector3(0.0,1.0,0.0));
triangleGeometry.vertices.push(new THREE.Vector3(-1.0,-1.0,0.0));
triangleGeometry.vertices.push(new THREE.Vector3(1.0,-1.0,0.0));
triangleGeometry.faces.push(new THREE.Face3(0,1,2));
var triangleMaterial=new THREE.MeshBasicMaterial({
color:0xFFFFFF,
side:THREE.DoubleSide
});
var triangleMesh=new THREE.Mesh(triangleGeometry,triangleMaterial);
triangleMesh.position.set(-1.5,0.0,4.0);
scene.add(triangleMesh);
var squareGeometry=new THREE.Geometry();
squareGeometry.vertices.push(new THREE.Vector3(-1.0,1.0,0.0));
squareGeometry.vertices.push(new THREE.Vector3(1.0,1.0,0.0));
squareGeometry.vertices.push(new THREE.Vector3(1.0,-1.0,0.0));
squareGeometry.vertices.push(new THREE.Vector3(-1.0,-1.0,0.0)); // Updated vertices for square
squareGeometry.faces.push(new THREE.Face3(0,1,2));
squareGeometry.faces.push(new THREE.Face3(0,2,3));
var squareMaterial=new THREE.MeshBasicMaterial({
color:0xFFFFFF,
side:THREE.DoubleSide
});
var squareMesh=new THREE.Mesh(squareGeometry,squareMaterial);
squareMesh.position.set(1.5,0.0,4.0);
scene.add(squareMesh);
}
function renderScene()
{
renderer.render(scene,camera);
}
</script>
</div>
</body>
</html>