Three.js+Ramda.js 光影和隧道

Three.js+ramda.js Light and Shadow/Tunnel

3d，隧道

《使用js把svg图形转成png图像》申请公开！

第三方库
作品简介 2794
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

"use strict";
lib6.dbg = (function() {});
var TAU = Math.PI * 2;
var PI = Math.PI;
var rad2deg = 180 / PI,
    deg2rad = PI / 180;
var sin1 = lib6.sin1,
    cos1 = lib6.cos1;
var SW = 720,
    SH = SW,
    aspectRatio = SW / SH,
    CAM_Z = 8,
    NUM_RINGS = 20,
    NUM_OBJECTS_IN_RING = 32;
var mkCube = R.curry(function(scene, radius, color, emis) {
    var geometry = new THREE.BoxGeometry(radius, radius, radius);
    var material = new THREE.MeshPhongMaterial({
        color: color,
        emissive: emis,
        metal: true,
        shading: THREE.FlatShading
    });
    var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
    return mesh;
});
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(90, aspectRatio, 0.1, 11000);
var renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);
renderer.setSize(SW, SH);
camera.position.set(0, 0, CAM_Z);
var hedra = [];
var grad2red = lib6.Color.gradient(lib6.Color.hsl2hex, [0, 0.5, 0.5], [0, 1, 1]);

function serk(numObjects) {
    var group = new THREE.Object3D();
    var ico = mkCube(group);
    lib6.forCircle(10, numObjects, (function(x, y, rads, pct) {
        var h = ico(1, 0x808080, 0x000000);
        hedra.push(h);
        h.position.set(+x, +y, -10);
        h.d100phase = pct;
    }));
    return group;
}

function setRad(ring, radius) {
    var i = 0;
    lib6.forCircle(radius, NUM_OBJECTS_IN_RING, (function(x, y, rads, pct) {
        ring.children[i].position.x = x;
        ring.children[i].position.y = y;
        i++;
    }));
}
var light = new THREE.AmbientLight(0x010101);
scene.add(light);
var bulb = new THREE.PointLight(0xFFFFFF, 0.1, 0);
scene.add(bulb);
bulb.position.copy(camera.position);
var pinkLight = new THREE.PointLight(0xff00cc, 1, 10);
scene.add(pinkLight);
var lightPos = new THREE.Vector2(0, 0);

编译

CSS

HTML

Three.js+ramda.js Light and Shadow/Tunnel

3d，隧道

编辑器支持Emmet

快捷键

Three.js+ramda.js Light and Shadow/Tunnel

3d，隧道

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：