@WestLangley, I stumbled upon that post a few hours before your response and managed to implement it successfully (shown below). However, I must admit that the mathematical concepts behind makeRotationAxis() and the necessity of an offset of -115 on the x and z axes for
tetrahedron.position.set( -115, 0, -115 )
still elude me when dealing with a tetrahedron encompassing 200 vectors. The journey involved a fair amount of trial and error; hence, it would be greatly beneficial if I could grasp the underlying calculations to modify sizes effortlessly.
<!-- language: lang-js -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - convex geometry</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 {
font-family: Monospace;
background-color: #000;
margin: 0px;
overflow: hidden;
}
canvas { width: 500px; height: 500px }
</style>
</head>
<body>
<script src="three.min.js"></script>
<script src="js/geometries/ConvexGeometry.js"></script>
<script src="js/Detector.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container;
var camera, scene, renderer;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.y = 400;
scene = new THREE.Scene();
var light, object, materials;
scene.add( new THREE.AmbientLight( 0x404040 ) );
light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 1, 0 );
scene.add( light );
materials = [
new THREE.MeshLambertMaterial( { color: 0xffffff, wireframe: false, transparent: false, opacity: 0.5, wireframeLinewidth: 2, wireframeLinejoin: "miter" } )
];
//dummy line object
var dummy = new THREE.Mesh( new THREE.CubeGeometry( 1, 500, 1 ), new THREE.MeshLambertMaterial() );
dummy.position.x = 0;
dummy.position.z = 0;
scene.add( dummy );
//tetrahedron points
var points = [
new THREE.Vector3( 0, 0, 200 ), //bottom right
new THREE.Vector3( 0, 200, 0 ), //top
new THREE.Vector3( 200, 0, 0 ), //bottom left
new THREE.Vector3( 200, 200, 200 ) //bottom back
];
tetrahedron = THREE.SceneUtils.createMultiMaterialObject( new THREE.ConvexGeometry( points ), materials );
//fix the rotation so that the point of the tetrahedron points up
tetrahedron.applyMatrix( new THREE.Matrix4().makeRotationAxis( new THREE.Vector3( 1, 0, -1 ).normalize(), Math.atan( Math.sqrt(2)) ) );
//fix the offset
tetrahedron.position.set( -115, 0, -115 );
//add the tetrahedron to the dummy line object
dummy.add( tetrahedron );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var timer = Date.now() * 0.0001;
camera.position.x = 800;
camera.position.y = 500;
camera.position.z = 800;
camera.lookAt( scene.position );
for ( var i = 0, l = scene.children.length; i < l; i ++ ) {
var object = scene.children[ i ];
object.rotation.y = timer * 2.5;
}
renderer.render( scene, camera );
}
</script>
</body>