Three.js 调3D模型

3D使用blender 3.4版本导出gltf2.0  

Vue+Three.js:

        页面显示：

 

全部代码：

<template>

    <div id="container" style="width: 1000px; height: 1000px"></div>

</template>

<script>

import * as THREE from 'three'

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

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

export default {

    name: 'ThreeTest',

    data() {

        return {

            publicPath: process.env.BASE_URL,

            mesh: null,

            camera: null,

            scene: null,

            renderer: null,

            controls: null

        }

    },

    created() { },

    mounted() {

        this.init()

    },

    methods: {

        //初始化

        init() {

            this.createScene();  //创建场景

            this.load3D();  //加载3D

            this.createLight();   //创建光源

            this.createCamera();  //创建相机

            this.createRender();   //创建渲染器

            this.createControls();   //创建控件对象

            this.render();    //渲染

        },

        //创建场景

        createScene() {

            this.scene = new THREE.Scene();

        },

        //加载GLTF模型

        load3D() {

            // const THIS = this;

            const loader = new GLTFLoader();

            console.log(this.publicPath)

            loader.load(

                this.publicPath + 'static/test12.glb',

                (model) => {

                    console.log(model, 'gltf----->>>')

                    // model.scene.children[0].scale.set(50, 50, 50);

                    // this.scene.add(model.scene.children[0]);

                    model.scene.scale.set(10, 10, 10);

                    model.scene.position.set(0, 0, 0)

                    this.scene.add(model.scene);

                }

            );

        },

        //创建光源

        createLight() {

            //环境光

            const ambientLight = new THREE.AmbientLight(0x8de3c8); //创建环境光

            this.scene.add(ambientLight);      //将环境光添加到场景

            const spotLight = new THREE.SpotLight(0x2c421f);  //创建聚光灯

            spotLight.position.set(10, 30, -80)

            // spotLight.castShadow = true;

            this.scene.add(spotLight);

        },

        //创建相机

        createCamera() {

            const element = document.getElementById("container");

            const width = element.clientWidth;     //窗口宽度

            const height = element.clientHeight;    //窗口高度

            const k = width / height;         //窗口宽高比

            this.camera = new THREE.PerspectiveCamera(100, k, 0.1, 3000);

            this.camera.position.set(-50, 50, 50);   //设置相机位置

            this.camera.lookAt(new THREE.Vector3(15, 30, 30));  //设置相机方向

            this.camera.updateProjectionMatrix()

            this.scene.add(this.camera);

        },

        //创建渲染器

        createRender() {

            const element = document.getElementById("container");

            this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });

            this.renderer.setSize(element.clientWidth, element.clientHeight);  //设置渲染区域

            this.renderer.shadowMap.enabled = true;   //显示阴影

            this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;

            this.renderer.setClearColor(0x8cd3f8);  // 设置背景颜色

            element.appendChild(this.renderer.domElement);

        },

        render() {

            if (this.mesh) {

                this.mesh.rotation.z += 0.006;

            }

            this.renderer.render(this.scene, this.camera);

            requestAnimationFrame(this.render)

        },

        //创建控件对象

        createControls() {

            this.controls = new OrbitControls(this.camera, this.renderer.domElement)

        }

    }

}

</script>

3D模型文件：

  glb文件没法上传,