three.js快速子表面（次表面）散射代码示例

three.js subsurface scattering example. Blinn Phong着色演示中的快速次表面散射

three, sss

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

import Stats from 'three/addons/libs/stats.module.js';

import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
  import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
  import { SubsurfaceScatteringShader } from 'three/addons/shaders/SubsurfaceScatteringShader.js';
  import { FBXLoader } from 'three/addons/loaders/FBXLoader.js';

let container, stats;
  let camera, scene, renderer;
  let model;

init();
  animate();

function init() {

container = document.createElement( 'div' );
      document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 5000 );
      camera.position.set( 0.0, 300, 400 * 4 );

scene = new THREE.Scene();

// Lights

scene.add( new THREE.AmbientLight( 0xc1c1c1 ) );

const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.03 );
      directionalLight.position.set( 0.0, 0.5, 0.5 ).normalize();
      scene.add( directionalLight );

const pointLight1 = new THREE.Mesh( new THREE.SphereGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xc1c1c1 } ) );
      pointLight1.add( new THREE.PointLight( 0xc1c1c1, 4.0, 300, 0 ) );
      scene.add( pointLight1 );
      pointLight1.position.x = 0;
      pointLight1.position.y = - 50;
      pointLight1.position.z = 350;

const pointLight2 = new THREE.Mesh( new THREE.SphereGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xc1c100 } ) );
      pointLight2.add( new THREE.PointLight( 0xc1c100, 0.75, 500, 0 ) );
      scene.add( pointLight2 );
      pointLight2.position.x = - 100;
      pointLight2.position.y = 20;
      pointLight2.position.z = - 260;

renderer = new THREE.WebGLRenderer( { antialias: true } );
      renderer.setPixelRatio( window.devicePixelRatio );
      renderer.setSize( window.innerWidth, window.innerHeight );
      container.appendChild( renderer.domElement );

stats = new Stats();
      container.appendChild( stats.dom );

const controls = new OrbitControls( camera, container );
      controls.minDistance = 500;
      controls.maxDistance = 3000;

window.addEventListener( 'resize', onWindowResize );

initMaterial();

}

function initMaterial() {

const loader = new THREE.TextureLoader();
      const imgTexture = loader.load( '/uploads/2306/white.jpg' );
      imgTexture.colorSpace = THREE.SRGBColorSpace;

const thicknessTexture = loader.load( '/uploads/2306/bunny_thickness.jpg' );
      imgTexture.wrapS = imgTexture.wrapT = THREE.RepeatWrapping;

const shader = SubsurfaceScatteringShader;
      const uniforms = THREE.UniformsUtils.clone( shader.uniforms );

uniforms[ 'map' ].value = imgTexture;

uniforms[ 'diffuse' ].value = new THREE.Vector3( 1.0, 0.2, 0.2 );
      uniforms[ 'shininess' ].value = 500;

uniforms[ 'thicknessMap' ].value = thicknessTexture;
      uniforms[ 'thicknessColor' ].value = new THREE.Vector3( 0.5, 0.3, 0.0 );
      uniforms[ 'thicknessDistortion' ].value = 0.1;
      uniforms[ 'thicknessAmbient' ].value = 0.4;
      uniforms[ 'thicknessAttenuation' ].value = 0.8;
      uniforms[ 'thicknessPower' ].value = 2.0;
      uniforms[ 'thicknessScale' ].value = 16.0;

const material = new THREE.ShaderMaterial( {
          uniforms: uniforms,
          vertexShader: shader.vertexShader,
          fragmentShader: shader.fragmentShader,
          lights: true
      } );
      material.extensions.derivatives = true;

// LOADER

const loaderFBX = new FBXLoader();
      loaderFBX.load( '/uploads/2306/stanford-bunny.fbx', function ( object ) {

model = object.children[ 0 ];
          model.position.set( 0, 0, 10 );
          model.scale.setScalar( 1 );
          model.material = material;
          scene.add( model );

} );

initGUI( uniforms );

}

function initGUI( uniforms ) {

const gui = new GUI( { title: 'Thickness Control' } );

const ThicknessControls = function () {

this.distortion = uniforms[ 'thicknessDistortion' ].value;
          this.ambient = uniforms[ 'thicknessAmbient' ].value;
          this.attenuation = uniforms[ 'thicknessAttenuation' ].value;
          this.power = uniforms[ 'thicknessPower' ].value;
          this.scale = uniforms[ 'thicknessScale' ].value;

};

const thicknessControls = new ThicknessControls();

gui.add( thicknessControls, 'distortion' ).min( 0.01 ).max( 1 ).step( 0.01 ).onChange( function () {

uniforms[ 'thicknessDistortion' ].value = thicknessControls.distortion;
          console.log( 'distortion' );

} );

gui.add( thicknessControls, 'ambient' ).min( 0.01 ).max( 5.0 ).step( 0.05 ).onChange( function () {

uniforms[ 'thicknessAmbient' ].value = thicknessControls.ambient;

} );

gui.add( thicknessControls, 'attenuation' ).min( 0.01 ).max( 5.0 ).step( 0.05 ).onChange( function () {

uniforms[ 'thicknessAttenuation' ].value = thicknessControls.attenuation;

} );

gui.add( thicknessControls, 'power' ).min( 0.01 ).max( 16.0 ).step( 0.1 ).onChange( function () {

uniforms[ 'thicknessPower' ].value = thicknessControls.power;

} );

gui.add( thicknessControls, 'scale' ).min( 0.01 ).max( 50.0 ).step( 0.1 ).onChange( function () {

uniforms[ 'thicknessScale' ].value = thicknessControls.scale;

} );

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

}

function animate() {

requestAnimationFrame( animate );

render();

stats.update();

}

function render() {

if ( model ) model.rotation.y = performance.now() / 5000;

renderer.render( scene, camera );

}

</script>

three.js subsurface scattering example. Blinn Phong着色演示中的快速次表面散射

three, sss

编辑器支持Emmet

快捷键

three.js subsurface scattering example. Blinn Phong着色演示中的快速次表面散射

three, sss

three.js点光源次表面散射代码示例

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

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：