JSFiddle - React, Tailwind, and code Playground

by tezcancirakoglu

JavaScript

//The red cube is initial center point of the mesh. I need to rotate the mesh around its x axis, 
var scene = new THREE.Scene(); 

var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.001, 1000);  

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

var geom = new THREE.Geometry();
geom.vertices.push(new THREE.Vector3(-4.77353, 2.7, 0.660501));
geom.vertices.push(new THREE.Vector3(-0.521001, 2.7, 0.660501));
geom.vertices.push(new THREE.Vector3(-0.521, 2.7, -2.065922));

var normal = new THREE.Vector3(0, 1, 0);
var face = new THREE.Face3(0, 1, 2);
face.normal.copy(normal);
face.vertexNormals.push(normal.clone(), normal.clone(), normal.clone(), normal.clone());
geom.faces.push(face);

geom.computeCentroids();
geom.computeFaceNormals();
geom.computeVertexNormals();

var material = new THREE.MeshBasicMaterial( { color: 0xffaa00, side: THREE.DoubleSide, blending: THREE.AdditiveBlending });

var objMesh = new THREE.Mesh(geom, material);
scene.add(objMesh);

objMesh.centroid = new THREE.Vector3();
for (var i = 0, l = geom.vertices.length; i < l; i++) {
    objMesh.centroid.addSelf(
        geom.vertices[i].clone()
    );
}
objMesh.centroid.divideScalar(geom.vertices.length);

var sGeom = new THREE.CubeGeometry(0.1, 0.1, 0.1, 1, 1, 1);
var cubeMesh = new THREE.Mesh(sGeom, new THREE.MeshBasicMaterial( { color: 0xff0000} ) );
cubeMesh.position.set(objMesh.centroid.x, objMesh.centroid.y, objMesh.centroid.z);
scene.add(cubeMesh);

camera.position.set(-2, -1, 7);



var angle = 10;
function render() { 
    objMesh.rotation.x += 0.1
	requestAnimationFrame(render); 
    renderer.render(scene, camera); 
} 
render();