three实现可交互炫酷三维圣诞树丝带小球动画效果代码-html代码-BFW代码库

three实现可交互炫酷三维圣诞树丝带小球动画效果代码

代码语言：html

所属分类：三维

代码描述：three实现可交互炫酷三维圣诞树丝带小球动画效果代码，点击click可发射小球。

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

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

<head>
  <meta charset="UTF-8">
  

  
  
  
  
<style>
html,
body {
    padding: 0;
    margin: 0;
}

.container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #040229;
}

.title {
    position: fixed;
    top: 75%;
    left: 50%;
	 transform: translate(-50%, -50%);
    font-family: monospace;
    user-select: none;
    pointer-events: none;
    color: white;
}
</style>


  
  
</head>

<body translate="no">
  <div class="container">
    <canvas id="tree-canvas"></canvas>
</div>

<div class="title">
	click me!
</div>


    <script type="importmap">
  {
    "imports": {      
      "three": "//repo.bfw.wiki/bfwrepo/js/module/three/build/170/three.module.js",
      "three/addons/": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/170/jsm/"
    }
  }
</script>
  
      <script  type="module">
import * as THREE from 'three';

const containerEl = document.querySelector(".container");
const canvasEl = document.querySelector("#tree-canvas");

const params = {
  stripesNumber: 15,
  stripeWidth: .03 };


const pointer = new THREE.Vector2();

let renderer, scene, camera, orbit, lightHolder, touchPlane, raycaster;
let ballGeometry, stripeGeometry;
const stripes = [];
const balls = [];

initScene();
render();
window.addEventListener("resize", updateSceneSize);
window.addEventListener("click", e => {
  pointer.x = e.clientX / window.innerWidth * 2 - 1;
  pointer.y = -(e.clientY / window.innerHeight) * 2 + 1;
  raycaster.setFromCamera(pointer, camera);
  const intersects = raycaster.intersectObject(touchPlane);
  if (intersects) {
    addBall(intersects[0].point, balls.length - 1, performance.now());
  }
});

function initScene() {
  renderer = new THREE.WebGLRenderer({
    antialias: true,
    canvas: canvasEl,
    alpha: true });

  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  renderer.shadowMap.enabled = true;

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(45, containerEl.clientWidth / containerEl.clientHeight, .1, 10);
  camera.position.set(0, 1, 4);
  camera.lookAt(0, 0, 0);

  raycaster = new THREE.Raycaster();

  updateSceneSize();

  const ambientLight = new THREE.AmbientLight(0xffffff, 2.5);
  scene.add(ambientLight);
  const sideLight = new THREE.DirectionalLight(0xffffff, 1);
  sideLight.position.set(1, 2, 4);
  sideLight.castShadow = true;
  sideLight.shadow.mapSize.width = 2048;
  sideLight.shadow.mapSize.height = 2048;
  sideLight.shadow.camera.near = 3;
  sideLight.shadow.camera.far = 8;
  sideLight.shadow.camera.left = -1;
  sideLight.shadow.camera.right = 1;
  sideLight.shadow.camera.top = 1;
  sideLight.shadow.camera.bottom = -1;
  sideLight.shadow.bias = -.0001;
  sideLight.shadow.radius = 6;
  sideLight.shadow.normalBias = 0.02;

  lightHolder = new THREE.Group();
  lightHolder.add(sideLight);
  scene.add(lightHolder);

  const leftLight = new THREE.DirectionalLight(0xffffff, .5);
  leftLight.position.set(-2, 0, 0);
  scene.add(leftLight);


  stripeGeometry = new THREE.CylinderGeometry(1, 1, params.stripeWidth, 128, 32, true);
  ballGeometry = new THREE.IcosahedronGeometry(.06, 16);

  for (let i = 0; i < params.stripesNumber; i++) {
    const material = new THREE.MeshStandardMaterial({
      color: new THREE.Color().setHSL(.3, 1, .5),
      rou.........完整代码请登录后点击上方下载按钮下载查看