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

代码语言：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, 1.0 );

	}
	
</script>

<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.109.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/gsap.min.js"></script>
<script >
// Relax and enjoy 💖

// scene basics
let container, scene, camera, renderer;
let matcap = null;
let isTextureLoaded = false;

// global meshes
let ball, ball2, torus, torus2, disc2;
let boxes = [];

// hairy lines
let sphere = new THREE.Group();
let radius = 25;
let lines = 56;
let dots = 35;

// mouse interactivity
let mouseX = 0;
let mouseY = 0;
let hasEnteredRight = false;
const factor = 1.57;

let isMobile = /(Android|iPhone|iOS|iPod|iPad)/i.test(navigator.userAgent);

const colors = [

0xffffff, // white
0xffee94, // vanilla
0xffc0dd, // cotton candy
0xFF8AC0, // cotton candy darker
0xbffbcb, // green pastel
0x9ae3a9, // green pastel dark
0x8fcbea, // blue pastel
0xa3a3a3, // grey
0x222222, // black
0x010101 // black
];


function init() {

  loadTexture();

  container = document.querySelector('#scene');
  scene = new THREE.Scene();
  createCamera();
  createLights();
  createGeometries();
  createMaterials();
  createMeshes();
  createRenderer();
  createLines();

  requestAnimationFrame(render);

  document.addEventListener("mousemove", onMouseMove, false);
  window.addEventListener("resize", onResize);

}

init();

function loadTexture() {

  const textureLoader = new THREE.TextureLoader();
  matcap = textureLoader.load(
  'http://repo.bfw.wiki/bfwrepo/image/5e2b80eb53d22.png',
  function () {
    isTextureLoaded = true;
  });


}

function createCamera() {

  camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 10000);
  camera.position.set(0, 35, 120);
  camera.lookAt(0, 29, 0);
  camera.aspect = window.innerWidth / window.innerHeight;
  const cameraZ = 120;

  if (camera.aspect < 1 && camera.aspect > 0.75) {

    camera.position.z = cameraZ * 1.5;

  } else if (camera.aspect < 0.75) {

    camera.position.z = cameraZ * 2.5;

  } else {

    camera.position.z = cameraZ;

  }

}

function createLights() {

  const ambientLight = new THREE.HemisphereLight(0xddeeff, 0x202020, 3.25);
  ambientLight.position.set(-10, 200, 1000);

  const mainLight = new THREE.DirectionalLight(0xffffff, 1.5);
  mainLight.position.set(-50, 100, 10);

  const mainLight2 = new THREE.DirectionalLight(0xFF002d, 15);
  mainLight2.position.set(-50, 10, -10);

  scene.add(ambientLight, mainLight, mainLight2);

}

function createGeometries() {

  const torus = new THREE.TorusGeometry(18, 5.9, 24, 90);
  const torusThin = new THREE.TorusBufferGeometry(8, 1.25, 20, 90);
  const cylinder = new THREE.CylinderBufferGeometry(2, 2, 25, 32);
  cylinder.applyMatrix(new THREE.Matrix4().makeTranslation(0, 12.5, 0));
  const cylinderBig = new THREE.CylinderGeometry(10, 10, 6, 40, 6);
  cylinderBig.applyMatrix(new THREE.Matrix4().makeTranslation(0, 3, 0));
  const disc = new THREE.CylinderBufferGeometry(10, 10, 1.5, 32);
  disc.applyMatrix(new THREE.Matrix4().makeTranslation(0, 0.75, 0));
  const ball = new THREE.SphereBufferGeometry(5.5, 32, 32);
  const cone = new THREE.ConeBufferGeometry(8, 26, 32, 32);
  cone.applyMatrix(new THREE.Matrix4().makeTranslation(0, 15, 0));
  const cone2 = new THREE.ConeBufferGeometry(8, 17, 32);
  cone2.applyMatrix(new THREE.Matrix4().makeTranslation(0, 8.5, 0));
  const box = new THREE.BoxBufferGeometry(17, 1.5, 17);
  box.applyMatrix(new THREE.Matrix4().makeTranslation(0, 2, 0));

  return {

    torus,
    torusThin,
    cylinder,
    disc,
    ball,
    cone,
    cone2,
    cylinderBig,
    box };



}

function createMaterials() {

  const white = new THREE.MeshStandardMaterial({

    color: 0xffffff,
    roughness: 0.9,
    metalness: 0.2,
    flatShading: false });


  white.color.convertSRGBToLinear();

  const black = new THREE.MeshStandardMaterial({

    color: 0x141414,
    roughness: 0.2,
    metalness: 0.5,
    flatShading: false });


  black.color.convertSRGBToLinear();

  const blackBasic = new THREE.MeshLambertMaterial({ color: 0x000000 });
  blackBasic.color.convertSRGBToLinear();

  const blue = new THREE.MeshStandardMaterial({

    color: 0xa8daff,
    roughness: 0.9,
    metalness: 0.1,
    flatShading: false });


  blue.color.convertSRGBToLinear();

  const matcapGold = new THREE.ShaderMaterial({

    transparent: false,
    side: THREE.DoubleSide,
    uniforms: {
      tMatCap: {
        type: 't',
.........完整代码请登录后点击上方下载按钮下载查看