three.js自定义shader attribute代码示例

custom attribute with three.js

three, shader, attribute

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var renderer,
    scene,
    camera,
    myCanvas = document.getElementById('myCanvas');

//RENDERER
renderer = new THREE.WebGLRenderer({
  canvas: myCanvas, 
  antialias: true
});
renderer.setClearColor(0xffffff);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

//CAMERA
camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 300, 10000 );

//SCENE
scene = new THREE.Scene();

//LIGHTS
var light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);

var light2 = new THREE.PointLight(0xffffff, 0.5);
scene.add(light2);

//Custom Shader Material
/*
var material = new THREE.ShaderMaterial({
    uniforms: [],
    vertexShader: document.getElementById('vertexShader').textContent,
    fragmentShader: document.getElementById('fragmentShader').textContent
});
*/

var customUniforms = {
    delta: {value: 0}
};
var material = new THREE.ShaderMaterial({
    uniforms: customUniforms,
    vertexShader: document.getElementById('vertexShader2').textContent,
    fragmentShader: document.getElementById('fragmentShader2').textContent
});

var geometry = new THREE.BoxBufferGeometry(100, 100, 100, 10, 10, 10);
var mesh = new THREE.Mesh(geometry, material);
mesh.position.z = -1000;
mesh.position.x = -100;
scene.add(mesh);

var geometry2 = new THREE.SphereGeometry(50, 20, 20);
var mesh2 = new THREE.Mesh(geometry2, material);
mesh2.position.z = -1000;
mesh2.position.x = 100;
scene.add(mesh2);

var geometry3 = new THREE.PlaneGeometry(10000, 10000, 100, 100);
var mesh3 = new THREE.Mesh(geometry3, material);
mesh3.rotation.x = -90 * Math.PI / 180;
mesh3.position.y = -100;
scene.add(mesh3);

//attribute
var vertexDisplacement = new Float32Array(geometry.attributes.position.count);

for (var i = 0; i < vertexDisplacement.length; i ++) {
    vertexDisplacement[i] = Math.sin(i);
}

geometry.addAttribute('vertexDisplacement', new THREE.BufferAttribute(vertexDisplacement, 1));

//RENDER LOOP
render();

var delta = 0;
function render() {

delta += 0.1;

//uniform
    mesh.material.uniforms.delta.value = 0.5 + Math.sin(delta) * 0.5;

//attribute
    for (var i = 0; i < vertexDisplacement.length; i ++) {
        vertexDisplacement[i] = 0.5 + Math.sin(i + delta) * 0.25;
    }
    mesh.geometry.attributes.vertexDisplacement.needsUpdate = true;

renderer.render(scene, camera);

requestAnimationFrame(render);
}

编译

CSS

HTML

void main() 
{
vUv = position;
vOpacity = vertexDisplacement;

vec3 p = position;

p.x += sin(vertexDisplacement) * 50.0;
p.y += cos(vertexDisplacement) * 50.0;

vec4 modelViewPosition = modelViewMatrix * vec4(p, 1.0);
gl_Position = projectionMatrix * modelViewPosition;
}
</script>
<script type="x-shader/x-fragment" id="fragmentShader2">
uniform float delta;
varying float vOpacity;
varying vec3 vUv;

void main() {

float r = 1.0 + cos(vUv.x * delta);
float g = 0.5 + sin(delta) * 0.5;
float b = 0.0;
vec3 rgb = vec3(r, g, b);

gl_FragColor = vec4(rgb, vOpacity);
}
</script>

custom attribute with three.js

three, shader, attribute

编辑器支持Emmet

快捷键

custom attribute with three.js

three, shader, attribute

three.js gltf扩展（draco压缩，pbr，binary）模型加载代码示例

three.js octree 光线投射（raycasting）实现选择交互的代码示例

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：