three.js导入模型

DRACOLoader

Draco库（一个用于压缩和解压缩3D模型的开源库）压缩的几何加载器，用来解码模型的。

GLTFLoader

载入glTF 2.0资源的加载器。用来加载模型内容的，模型的文件格式可以是：JSON（.gltf）格式或二进制（.glb）格式， 外部文件存储贴图（.jpg、.png）和额外的二进制数据（.bin）。

以上两种加载器都可以创建一个重复利用。

使用：

• 导入加载器（两个）
• 设置解码器dracoLoader的文件库路径（在three.js的包里node_modules/three/examples/jsm/libs/draco/gltf）
• gltfloader使用dracoLoader
• 使用gltfloader加载模型，这里的路径注意不要写错了

import * as THREE from "three"

import Stat from "./node_modules/three/examples/jsm/libs/stats.module"

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"

import { DRACOLoader } from "three/examples/jsm/loaders/dracoloader"

  
  


const stat = new Stat()

let w = window.innerWidth

let h = window.innerHeight

  


const scene = new THREE.Scene()

const axis = new THREE.AxesHelper()

scene.add(axis)

  


// //初始化模型
const dracoloader = new DRACOLoader()
dracoloader.setDecoderPath('../node_modules/three/examples/jsm/libs/draco/gltf/')
//dracoloader.setDecoderConfig({ type: 'js' })//使用js方式解压
//dracoloader.preload()//初始化解码器

const gltfLoader = new GLTFLoader()
gltfLoader.setDRACOLoader(dracoloader)//gltfloader使用dracoLoader
//加载模型
gltfLoader.load('./model/scene.glb', (gltf) => {
    const model = gltf.scene
    scene.add(model)
}, undefined, function (err) {
    console.log(err);
})



//light
const ambientLight = new THREE.AmbientLight(0xffffff, 0.1)
scene.add(ambientLight)
  


const directionLight = new THREE.DirectionalLight(0xffffff, 0.5)

directionLight.position.set(2, 3, 4)

directionLight.castShadow = true

directionLight.shadow.mapSize.width = 2048

directionLight.shadow.mapSize.height = 2048

const helper = new THREE.DirectionalLightHelper(directionLight)

scene.add(directionLight, helper)

  
  


//Camera

const camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 100)

camera.position.set(0, 3, 4)

camera.lookAt(0, 0, 0)

  
  


//Renderer - 渲染器

const renderer = new THREE.WebGL1Renderer()

renderer.setSize(w, h)

//渲染器开启阴影渲染

renderer.setClearColor(0x95e4e8)

renderer.shadowMap.enabled = true

renderer.render(scene, camera)

const canvas = renderer.domElement

document.body.append(canvas)

document.body.append(stat.dom)

  
  


const orbitControls = new OrbitControls(camera, canvas)

/**

 * clock对象是three里对date对象的封装

 */

const clock = new THREE.Clock()

tick()

function tick() {

    //.getElapsedTime()，获取自时钟启动后的秒数，并且将oldTime设置为当前时间，

    //如果autoStart设置为true且时钟并未运行，则该方法同时启动时钟

    const time = clock.getElapsedTime()

    // cloudGroup.position.x = Math.sin(time * 0.1) * 7

    // treeGroup.position.y = -time * 0.2 % 2

    // dottedLineGroup.position.y = -time * 0.2 % 3

    requestAnimationFrame(tick)

    renderer.render(scene, camera)

    stat.update()

    orbitControls.update()

    // 更新相机放大缩小

    camera.updateProjectionMatrix()

}

  


/*

 *  监听窗口大小变化，自动更新画面

 */

window.addEventListener('resize', () => {

    w = window.innerWidth

    h = window.innerHeight

  


    camera.aspect = w / h

    camera.updateProjectionMatrix()

  


    renderer.setSize(w, h)

})

  


/**

 * 鼠标移动mousemove控制camera，简单实现轨道控制功能

 */

  


window.addEventListener('mousemove',(e)=>{

    const mousePosx = (e.clientX/w-0.5)*2

    const mousePosy = e.clientY/h*2-0.5

    camera.position.x = mousePosx

    camera.position.y = mousePosy

    console.log(e.clientX,e.clientY);

})