three实现在三维迷雾森林中穿越飞行第一视角动画效果代码-html代码-BFW代码库

three实现在三维迷雾森林中穿越飞行第一视角动画效果代码

代码语言：html

所属分类：三维

代码描述：three实现在三维迷雾森林中穿越飞行第一视角动画效果代码

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

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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
canvas {
  display: block;
  width: 100%;
  height: 100vh;
  cursor: -webkit-grab;
  cursor: grab;
}
body {
  overflow: hidden;
}
</style>

  


</head>

<body>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/es-module-shims.js"></script>
<script type='importmap-shim'>
  {
    "imports": {
      "three": "//repo.bfw.wiki//bfwrepo/js/module/three/build/three.module.js",
      "three/": "//repo.bfw.wiki/bfwrepo/js/module/three/",
      "omega/":  "//repo.bfw.wiki/bfwrepo/js/module/omega/"
    }
  }
</script>
<script defer type='module-shim'>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import * as Curves from 'three/examples/jsm/curves/CurveExtras.js'
import { Strip, StripGeometry, StripHelper, UvPreset } from 'omega/Strip.js'

// ----
// main
// ----

const renderer = new THREE.WebGLRenderer();
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, 2, .1, 100);
const controls = new OrbitControls(camera, renderer.domElement);

scene.background = new THREE.Color('tan');
scene.fog = new THREE.FogExp2(scene.background, .1);
scene.add(new THREE.AmbientLight('white', .2));

// track // 114. https://codepen.io/ycw/pen/OJOzWjm
const [strip_geom, frames, curve] = (() => {
  const N_SEG = 2000;
  const curve = new Curves.TorusKnot();
  const radius = (i, I) => 2 * Math.abs(i / I - 0.5) * 10 + 1;
  const strip = new Strip(new Curves.TorusKnot(), radius);
  const frames = (() => {
    const _frames = strip.computeFrames(N_SEG); // [B,N,T,O][]
    const n0 = _frames[0][1]; // first normal
    const n1 = _frames[_frames.length - 1][1]; // last normal
    const da = n0.angleTo(n1); // delta angle 
    strip.tilt = (i, I) => i / I * -da; // update strip
    return strip.computeFrames(N_SEG); // new frames
  })();

  const geom = new StripGeometry(strip, N_SEG);
  const mat = new THREE.MeshLambertMaterial({ color: 'black', side: THREE.DoubleSide });
  const mesh = new THREE.Mesh(geom, mat);
  scene.add(mesh);
  return [geom, frames, curve];
})();

{ // grass // texture by Lena Albers - https://unsplash.com/photos/px-JsA27fbQ
  const url = '//repo.bfw.wiki/bfwrepo/image/623f092d2c669.png';
  const tex = new THREE.TextureLoader().load(url);
  const N_INST = 5000;
  const strip = new Strip(new THREE.CatmullRomCurve3([
    new THREE.Vector3(.2, 1, 0),
    new THREE.Vector3(0, 2, .6),
    new THREE.Vector3(.1, 1, 0),
    new THREE.Vector3(0, 0, 0),
  ]), (i, I) => 2 * (i / I), (i, I) => Math.PI * 0.4 * i / I);
  const geom = new StripGeometry(strip, 16, UvPreset.strip[0]);
  const mat = new THREE.MeshLambertMaterial({ map: tex, side: THREE.DoubleSide, alphaMap: tex, alphaTest: .3 });
  const mesh = new THREE.InstancedMesh(geom, mat, N_INST);

  const tris.........完整代码请登录后点击上方下载按钮下载查看