WebGL Three.js绒线球（毛球）

用来模拟毛发类的柔性三维物体。

webgl, ball, hair

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3674
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

console.clear();

var ww = window.innerWidth,
    wh = window.innerHeight;

var renderer = new THREE.WebGLRenderer({
    canvas: document.querySelector("canvas"),
    antialias: true
});
renderer.setSize(ww, wh);
renderer.setClearColor(0xffffff);

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(45, ww / wh, 0.1, 2000);
camera.position.z = 200;

var container = new THREE.Object3D();
scene.add(container);

var objectLines = new THREE.Object3D();
scene.add(objectLines);

var loader = new THREE.TextureLoader();
loader.crossOrigin = 'Anonymous';
var mat = new THREE.PointsMaterial({
    color: 0x000000,
    map: loader.load('https://s3-us-west-2.amazonaws.com/s.cdpn.io/127738/dotTexture.png'),
    transparent: true,
    alphaTest: 0.5,
    sizeAttenuation: false
});
var lines = [];
var dotsPerLine = 250;
var amountLines = 500;

this.geometry.verticesNeedUpdate = true;
};

function init() {

for (var i = 0; i < amountLines; i++) {
        lines.push(new Line());
        objectLines.add(lines[i].mesh);
    }

requestAnimationFrame(render);

window.addEventListener("resize", onResize);
}

function render(a) {
    requestAnimationFrame(render);

objectLines.rotation.y = (a * 0.0001);
    objectLines.rotation.x = (-a * 0.0001);

for (var i = 0; i < amountLines; i++) {
        lines[i].update(a);
    }
    renderer.render(scene, camera);
}

function onResize() {
    ww = window.innerWidth;
    wh = window.innerHeight;
    camera.aspect = ww / wh;
    camera.updateProjectionMatrix();
    renderer.setSize(ww, wh);
}

init();

编译

CSS

HTML

用来模拟毛发类的柔性三维物体。

webgl, ball, hair

编辑器支持Emmet

快捷键

用来模拟毛发类的柔性三维物体。

webgl, ball, hair

WebGL Three.js浑浊的球体 | GLSL光线行进（raymarching）着色器代码演示

使用WebGL Three.js创造毛茸茸（毛绒绒）的生物

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：