冬奥快结束了还没有抢到冰墩墩？程序员一招让你不用排队不用愁！

importReactfrom'react';
import { OrbitControls } from"three/examples/jsm/controls/OrbitControls";
import { TWEEN } from"three/examples/jsm/libs/tween.module.min.js";
import { GLTFLoader } from"three/examples/jsm/loaders/GLTFLoader";
importbingdundunModelfrom'./models/bingdundun.glb';
// ...

<div><divid="container"></div>  {this.state.loadingProcess===100?'' : (
<divclassName="olympic_loading"><divclassName="box">{this.state.loadingProcess} %</div></div>  )}
</div>

container=document.getElementById('container');
renderer=newTHREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled=true;
container.appendChild(renderer.domElement);
scene=newTHREE.Scene();
scene.background=newTHREE.TextureLoader().load(skyTexture);
camera=newTHREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.set(0, 30, 100);
camera.lookAt(newTHREE.Vector3(0, 0, 0));

// 直射光constlight=newTHREE.DirectionalLight(0xffffff, 1);
light.intensity=1;
light.position.set(16, 16, 8);
light.castShadow=true;
light.shadow.mapSize.width=512*12;
light.shadow.mapSize.height=512*12;
light.shadow.camera.top=40;
light.shadow.camera.bottom=-40;
light.shadow.camera.left=-40;
light.shadow.camera.right=40;
scene.add(light);
// 环境光constambientLight=newTHREE.AmbientLight(0xcfffff);
ambientLight.intensity=1;
scene.add(ambientLight);

constmanager=newTHREE.LoadingManager();
manager.onStart= (url, loaded, total) => {};
manager.onLoad= () => { console.log('Loading complete!')};
manager.onProgress= (url, loaded, total) => {
if (Math.floor(loaded/total*100) ===100) {
this.setState({ loadingProcess: Math.floor(loaded/total*100) });
// 镜头补间动画Animations.animateCamera(camera, controls, { x: 0, y: -1, z: 20 }, { x: 0, y: 0, z: 0 }, 3600, () => {});
  } else {
this.setState({ loadingProcess: Math.floor(loaded/total*100) });
  }
};

varloader=newTHREE.GLTFLoader(manager);
loader.load(landModel, function (mesh) {
mesh.scene.traverse(function (child) {
if (child.isMesh) {
child.material.metalness= .1;
child.material.roughness= .8;
// 地面if (child.name==='Mesh_2') {
child.material.metalness= .5;
child.receiveShadow=true;
      }
  });
mesh.scene.rotation.y=Math.PI/4;
mesh.scene.position.set(15, -20, 0);
mesh.scene.scale.set(.9, .9, .9);
land=mesh.scene;
scene.add(land);
});

loader.load(bingdundunModel, mesh=> {
mesh.scene.traverse(child=> {
if (child.isMesh) {
// 内部if (child.name==='oldtiger001') {
child.material.metalness= .5child.material.roughness= .8      }
// 半透明外壳if (child.name==='oldtiger002') {
child.material.transparent=true;
child.material.opacity= .5child.material.metalness= .2child.material.roughness=0child.material.refractionRatio=1child.castShadow=true;
      }
    }
  });
mesh.scene.rotation.y=Math.PI/24;
mesh.scene.position.set(-8, -12, 0);
mesh.scene.scale.set(24, 24, 24);
scene.add(mesh.scene);
});