threejs打造三维物体交互效果-html代码-BFW代码库

threejs打造三维物体交互效果

代码语言：html

所属分类：三维

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
@import url('https://fonts.googleapis.com/css?family=Ovo&text=cCdehmnoprsty&display=swap');

body {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  background: rgb(238,238,238);
  background: radial-gradient(circle, rgba(238,238,238,1) 0%, rgba(186,195,193,1) 75%, rgba(126,199,189,1) 100%);
  font-family: 'Ovo', Arial;
  font-size: 16px;
}

.credits {
  position: fixed;
  left: 50%;
  bottom: 1px;
  transform: translate(-50%, -50%);
/*   margin: 2px auto; */
}

a {
  color: rgba(0, 0, 0, 0.0);
  backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-block;
}

a:link { 
  color: rgba(0, 0, 0, 0.0); 
}

.fade-in {
  animation: fadeIn 2s ease-out 6s forwards;
  -moz-animation: fadeIn 2s ease-out 6s forwards;
  -webkit-animation: fadeIn 2s ease-out 6s forwards;
}

@keyframes fadeIn {
  
    0% { color: rgba(0, 0, 0, 0.1); }
    100% { color: rgba(0, 0, 0, 0.85); }   
}

@-moz-keyframes fadeIn {
  
    0% { color: rgba(0, 0, 0, 0.1); }
    100% { color: rgba(0, 0, 0, 0.85); }   
}

@-webkit-keyframes fadeIn {
  
    0% { color: rgba(0, 0, 0, 0.1); }
    100% { color: rgba(0, 0, 0, 0.85); }   
}
</style>

</head>
<body translate="no">
<div class="container">
<canvas id="scene"></canvas>
</div>

<script type="x-shader/x-vertex" id="matcap-vs">

	varying vec2 vN;

	void main() {

		vec3 e = normalize( vec3( modelViewMatrix * vec4( position, 1.0 ) ) );
		vec3 n = normalize( normalMatrix * normal );

		vec3 r = reflect( e, n );
		float m = 2. * sqrt( pow( r.x, 2. ) + pow( r.y, 2. ) + pow( r.z + 1., 2. ) );
		vN = r.xy / m + .5;

		gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1. );

	}

</script>
<script type="x-shader/x-vertex" id="matcap-fs">
	
	uniform sampler2D tMatCap;

	varying vec2 vN;

	void main() {
		
		vec3 base = texture2D( tMatCap, vN ).rgb;
		gl_FragColor = vec4( base, .........完整代码请登录后点击上方下载按钮下载查看