Skip to content

Instantly share code, notes, and snippets.

@miyataken999
Created March 1, 2018 15:48
Show Gist options
  • Save miyataken999/5f6e51bf81d5fb887e144e529dfc7b3d to your computer and use it in GitHub Desktop.
Save miyataken999/5f6e51bf81d5fb887e144e529dfc7b3d to your computer and use it in GitHub Desktop.
ThreeJS Gradient
<div id="canvas"></div>
var renderer, scene, camera, composer, circle, skelet, particle;
window.onload = function() {
init();
animate();
}
function init() {
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setPixelRatio((window.devicePixelRatio) ? window.devicePixelRatio : 1);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.autoClear = false;
renderer.setClearColor(0x000000, 0.0);
document.getElementById('canvas').appendChild(renderer.domElement);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 400;
scene.add(camera);
circle = new THREE.Object3D();
skelet = new THREE.Object3D();
particle = new THREE.Object3D();
scene.add(circle);
scene.add(skelet);
scene.add(particle);
var geometry = new THREE.TetrahedronGeometry(2, 0);
var geom = new THREE.IcosahedronGeometry(7, 1);
var geom2 = new THREE.IcosahedronGeometry(15, 1);
var material = new THREE.MeshPhongMaterial({
color: 0xffffff,
shading: THREE.FlatShading
});
for (var i = 0; i < 1000; i++) {
var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5).normalize();
mesh.position.multiplyScalar(90 + (Math.random() * 700));
mesh.rotation.set(Math.random() * 2, Math.random() * 2, Math.random() * 2);
particle.add(mesh);
}
var mat = new THREE.MeshPhongMaterial({
color: 0xffffff,
shading: THREE.FlatShading
});
var mat2 = new THREE.MeshPhongMaterial({
color: 0xffffff,
wireframe: true,
side: THREE.DoubleSide
});
var planet = new THREE.Mesh(geom, mat);
planet.scale.x = planet.scale.y = planet.scale.z = 16;
circle.add(planet);
var planet2 = new THREE.Mesh(geom2, mat2);
planet2.scale.x = planet2.scale.y = planet2.scale.z = 10;
skelet.add(planet2);
var ambientLight = new THREE.AmbientLight(0x999999 );
scene.add(ambientLight);
var lights = [];
lights[0] = new THREE.DirectionalLight( 0xffffff, 1 );
lights[0].position.set( 1, 0, 0 );
lights[1] = new THREE.DirectionalLight( 0x11E8BB, 1 );
lights[1].position.set( 0.75, 1, 0.5 );
lights[2] = new THREE.DirectionalLight( 0x8200C9, 1 );
lights[2].position.set( -0.75, -1, 0.5 );
scene.add( lights[0] );
scene.add( lights[1] );
scene.add( lights[2] );
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);
particle.rotation.x += 0.0000;
particle.rotation.y -= 0.0040;
circle.rotation.x -= 0.0020;
circle.rotation.y -= 0.0030;
skelet.rotation.x -= 0.0010;
skelet.rotation.y += 0.0020;
renderer.clear();
renderer.render( scene, camera )
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r77/three.min.js"></script>
html {
width: 100%;
height: 100%;
background: #11e8bb; /* Old browsers */
background: -moz-linear-gradient(top, #11e8bb 0%, #8200c9 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #11e8bb 0%,#8200c9 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #11e8bb 0%,#8200c9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#11e8bb', endColorstr='#8200c9',GradientType=0 ); /* IE6-9 */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment