Three Js Icosahedron
A rotating icosahedron made with Three.js
HTML
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/TrackballControls.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.110/examples/js/controls/OrbitControls.js"></script>
<div id="container"></div>
CSS
canvas{
width: 100%;
height:100%;
}
JavaScript
const settings = {
// Make the loop animated
animate: true,
// Get a WebGL canvas rather than 2D
context: "webgl"
};
let cont = document.getElementById('container');
let can = document.createElement('canvas');
let ctx = can.getContext('webgl')
cont.appendChild(can)
const sketch = () => {
// Create a renderer
const renderer = new THREE.WebGLRenderer({
canvas: can
});
// WebGL background color
renderer.setClearColor("#000", 1);
// Setup a camera
const camera = new THREE.PerspectiveCamera(50, 1, 0.01, 100);
camera.position.set(0, 0, -4);
camera.lookAt(new THREE.Vector3());
// Setup camera controller
const controls = new THREE.OrbitControls(camera, renderer.domElement);
// Setup your scene
const scene = new THREE.Scene();
// Setup a geometry
const geometry = new THREE.SphereGeometry(1, 32, 16);
const baseGeometry = new THREE.IcosahedronGeometry(1, 1);
const points = baseGeometry.vertices;
// console.log(points)
// List of points we will pass to the shader
// Setup a material
const material = new THREE.ShaderMaterial({
// defines: {
// // POINT_COUNT: points.length
// },
uniforms: {
color: { value: new THREE.Color("tomato") },
pointColor: { value: new THREE.Color("white") },
points: { value: points }
},
/* vertexShader: glsl `
varying vec3 vPosition;
void main () {
vPosition = position;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`, */
/* fragmentShader: glsl `
varying vec3 vPosition;
uniform vec3 color;
uniform vec3 pointColor;
uniform vec3 points[POINT_COUNT];
void main () {
float dist = 1000.0;
for (int i = 0; i < POINT_COUNT; i++) {
vec3 point = points[i];
float curDist = distance(vPosition, point);
dist = min(curDist, dist);
}
float inside = dist < 0.1 ? 1.0 : 0.0;
vec3 fragColor =...