I've been struggling to understand why my triangle isn't rotating around the center as I expected. My goal is to have two triangles side by side, with one rotated 60 degrees. However, when I rotate them, all corners should remain the same size.
Below is a snippet of my code. Why is the blue triangle moving to the left? It seems that the top right corner of the orange triangle is larger than the other two...
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - geometries</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
color: #eee;
font-family:Monospace;
font-size:13px;
text-align:center;
background-color: #ffffff;
margin: 0px;
padding: 0px;
overflow: hidden;
}
#info {
position: absolute;
top: 0px; width: 100%;
padding: 5px;
}
a {
color: #0080ff;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/103/three.js"></script>
<script>
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
var camera, scene, renderer, stats;
var frustumSize = 100000;
function init() {
camera = new THREE.OrthographicCamera( 0.5 * frustumSize * aspect / - 2, 0.5 * frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, -1000, 10000 );
camera.position.y = 400;
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xf0f0f0 );
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 0, 0, 2 );
camera.lookAt(0, 0, 0)
scene.add( camera );
var light = new THREE.PointLight( 0xffffff, 0.8 );
camera.add( light );
drawSquare()
var margin = 0.2;
var t = new triangle(0.5);
t.draw();
t.createSides(margin);
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//
window.addEventListener( 'resize', onWindowResize, false );
}
class triangle {
constructor(length){
this.length = length;
}
draw(color='orange'){
var h = this.length * (Math.sqrt(3)/2);
var shape = new THREE.Shape();
shape.moveTo( 0,-h/2 );
shape.lineTo( -this.length / 2, h / 2 );
shape.lineTo( this.length / 2, h / 2 );
var extrudeSettings = {
steps: 2,
depth: 0.4,
bevelEnabled: false
};
var geometry = new THREE.ExtrudeBufferGeometry( shape, extrudeSettings );
geometry.center();
var line2 = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( {color: color} ) );
line2.position.set(0, 0, 0);
scene.add(line2);
this.mesh = line2;
}
createSides(margin){
for(var i = 0;i<3;i++){
var t = new triangle(this.length);
t.draw('blue');
//t.mesh.position.x += this.length;
t.mesh.geometry.rotateZ(THREE.Math.degToRad(60));
}
}
}
function drawSquare(){
var size = 1;
var geometry = new THREE.Geometry();
geometry.vertices.push(
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(size, 0, 0),
new THREE.Vector3(size, size, 0),
new THREE.Vector3(0, size, 0),
new THREE.Vector3(0, 0, 0));
var line2 = new THREE.Line(geometry, new THREE.LineBasicMaterial({color: "red"}));
line2.position.set(-size/2, -size/2, 0);
scene.add(line2);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
renderer.render( scene, camera );
}
init();
animate();
</script>
</body>
</html>