three完全开源扩展案例03-模型加载

最新推荐文章于 2024-07-19 11:16:54 发布

threelab

最新推荐文章于 2024-07-19 11:16:54 发布

阅读量242

点赞数 3

分类专栏： threejs完全开源扩展案例文章标签：开发语言 webgl 3d threejs 开源

本文链接：https://blog.csdn.net/huhuan123456/article/details/140478282

版权

threejs完全开源扩展案例专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在这里插入图片描述
https://www.threelab.cn/three-cesium-examples/public/index.html#/codeMirror?navigation=Three.js%E6%A1%88%E4%BE%8B[r166]&classify=basic&id=modelLoad

更多内容：https://threelab.cn/

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js'

const box = document.getElementById('box')

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(75, box.clientWidth / box.clientHeight, 0.1, 1000)

camera.position.set(5, 5, 5)

const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true })

renderer.setSize(box.clientWidth, box.clientHeight)

box.appendChild(renderer.domElement)

new OrbitControls(camera, renderer.domElement)

window.onresize = () => {

    renderer.setSize(box.clientWidth, box.clientHeight)

    camera.aspect = box.clientWidth / box.clientHeight

    camera.updateProjectionMatrix()

}

animate()

function animate() {

    requestAnimationFrame(animate)

    renderer.render(scene, camera)

}

scene.add(new THREE.AmbientLight(0xffffff, 4))

scene.add(new THREE.AxesHelper(1000))

// 加载模型 gltf/ glb  draco解码器
const loader = new GLTFLoader()

loader.setDRACOLoader(new DRACOLoader().setDecoderPath('/three-cesium-examples/public/js/three/draco/'))

loader.load(

    '/three-cesium-examples/public/files/model/car.glb',

    gltf => {

        scene.add(gltf.scene)

    }

)

// 加载模型 fbx
new FBXLoader().load('/three-cesium-examples/public/files/model/city.FBX', (object3d) => {

    scene.add(object3d)

    object3d.scale.set(0.0005, 0.0005, 0.0005)

})

// 加载模型 obj/ mtl
const objLoader = new OBJLoader()

const mtlLoader = new MTLLoader()

mtlLoader.load('/three-cesium-examples/public/files/model/house/house.mtl', (mtl) => {

    mtl.preload()

    objLoader.setMaterials(mtl)

    objLoader.load(

        '/three-cesium-examples/public/files/model/house/house.obj',

        (obj) => {

            scene.add(obj)

            obj.position.x += 3

        }

    )

})