Threejs实现数字孪生, 高速收费站, 汽车模型

最新推荐文章于 2024-05-30 15:07:12 发布

一天28小时

最新推荐文章于 2024-05-30 15:07:12 发布

阅读量194

点赞数 2

文章标签：前端 three javascript

本文链接：https://blog.csdn.net/Programmerwhite/article/details/138837746

版权

threejs三大要素

场景相机渲染器

// 场景
const scene = new THREE.Scene();
scene.background = new THREE.Color("#cccccc")
scene.environment = "#cccccc"

// 相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 8, 45);

// 渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

开启灯光

// 灯光
// 前灯光
const light1 = new THREE.DirectionalLight(0xffffff, 1)
light1.position.set(0, 0, 10)
scene.add(light1)
// 后灯光
const light2 = new THREE.DirectionalLight(0xffffff, 1)
light2.position.set(0, 0, -10)
scene.add(light2)
// 左灯光
const light3 = new THREE.DirectionalLight(0xffffff, 1)
light3.position.set(-10, 0, 0)
scene.add(light3)
// 右灯光
const light4 = new THREE.DirectionalLight(0xffffff, 1)
light4.position.set(10, 0, 0)
scene.add(light4)
// 上灯光
const light5 = new THREE.DirectionalLight(0xffffff, 1)
light5.position.set(0, 10, 0)
scene.add(light5)

加载模型

const loader = new GLTFLoader()
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath("/draco/gltf/");
loader.setDRACOLoader(dracoLoader);
//后续可以加载各种模型
// 警车
let policeCars;
loader.load('/public/shoufeizhan/警车.glb', gltf => {
  policeCars = gltf.scene.children[0]
  scene.add(policeCars)
})
// 客车
let coachCar;
loader.load('/public/shoufeizhan/客车.glb', gltf => {
  coachCar = gltf.scene
  scene.add(coachCar)
})

loader.load('/public/shoufeizhan/收费站.glb', gltf => {
  console.log(gltf);
  const model = gltf.scene
  model.traverse(child => {
    if (child.name.includes('通行杆')) {
      child.castShadow = true
      child.receiveShadow = true
      child.children.forEach(c => {
        c.isRotated = false
      })
      passagePoleList = child.children
    }

动画 Tweenjs

// 栏杆抬起放下的动画
function railingRotation(target) {
  return new Promise((res, rej) => {
    const targetRotation = { z: target.isRotated ? 0 : Math.PI / 2 };
    const rotationTween = new Tween(target.rotation).to(targetRotation, 1000).easing(TWEEN.Easing.Quadratic.InOut).start()
    tweens.push(rotationTween)
    rotationTween.onComplete(() => {
      target.isRotated = !target.isRotated
    })
  })
}