three实现可拖动三维模型和阴影投射场景效果代码-html代码-BFW代码库

three实现可拖动三维模型和阴影投射场景效果代码

代码语言：html

所属分类：三维

代码描述：three实现可拖动三维模型和阴影投射场景效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
<style>
body {
  padding: 0;
  margin: 0;
}
</style>



</head>

<body >
  <canvas id="canvas"></canvas>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.143.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.143.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TransformControls.js"></script>
      <script>


const vertexShader = `
#include <common>
#include <shadowmap_pars_vertex>

varying vec3 vNormal;
varying vec3 vViewDir;

void main() {
    #include <beginnormal_vertex>
    #include <defaultnormal_vertex>

    #include <begin_vertex>

    #include <worldpos_vertex>
    #include <shadowmap_vertex>

    vec4 modelPosition = modelMatrix * vec4(position, 1.0);
    vec4 viewPosition = viewMatrix * modelPosition;
    vec4 clipPosition = projectionMatrix * viewPosition;

    vNormal = normalize(normalMatrix * normal);
    vViewDir = normalize(-viewPosition.xyz);

    gl_Position = clipPosition;

}
`;
const fragmentShader = `
#include <common>
#include <packing>
#include <lights_pars_begin>
#include <shadowmap_pars_fragment>
#include <shadowmask_pars_fragment>

uniform vec3 uColor;
uniform float uGlossiness;

varying vec3 vNormal;
varying vec3 vViewDir;

void main() {
  // shadow map
  DirectionalLightShadow directionalShadow = directionalLightShadows[0];

  float shadow = getShadow(
    directionalShadowMap[0],
    directionalShadow.shadowMapSize,
    directionalShadow.shadowBias,
    directionalShadow.shadowRadius,
    vDirectionalShadowCoord[0]
  );

  // directional light
  float NdotL = dot(vNormal, directionalLights[0].direction);
  float lightIntensity = smoothstep(0.0, 0.01, NdotL * shadow);
  vec3 directionalLight = directionalLights[0].color * lightIntensity;
  
  // specular reflection
  vec3 halfVector = normalize(directionalLights[0].direction + vViewDir);
  float NdotH = dot(vNormal, halfVector);

  float specularIntensity = pow(NdotH * lightIntensity, 1000.0 / uGlossiness);
  float specularIntensitySmooth = smoothstep(0.05, 0.1, specularIntensity);

  vec3 specular = specularIntensitySmooth * directionalLights[0].color;
  
  // rim lighting
  float rimDot = 1.0 - dot(vViewDir, vNormal);
  float rimAmount = 0.6;

  float rimThreshold = 0.2;
  float rimIntensity = rimDot * pow(NdotL, rimThreshold);
  rimIntensity = smoothstep(rimAmount - 0.01, rimAmount + 0.01, rimIntensity);

  vec3 rim = rimIntensity * directionalLights[0].color;
  
  gl_FragColor = vec4(uColor * (ambientLightColor + directionalLight + specular + rim), 1.0);
}
`;
window.addEventListener("load", init, false);
function init() {
    const gui = new dat.GUI();
    gui.close();
    const canvas = document.querySelector("#canvas");
    const scene = new THREE.Scene();
    const params = {
        color: "#6495ED",
        directionalLight: "#f8f1e6",
        ambientLight: "#ffffff"
    };
    // Sphere
    const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
    const uniforms = {
        uColor: { value: new THREE.Color(params.color) },
        uGlossiness: { value: 4 }
    };
    const shaderMaterial = new THREE.ShaderMaterial({
        lights: true,
        uniforms: Object.assign(Object.assign({}, THREE.UniformsLib.lights), uniforms),
        vertexShader,
        fragmentShader
    });
    const sphere = new THREE.Mesh(sphereGeometry, shaderMaterial);
    sphere.ca.........完整代码请登录后点击上方下载按钮下载查看