vue3+threejs可视化项目——引入threejs加载钢铁侠模型（第二步）-阿里云开发者社区

⭐前言

大家好，我是yma16，本文分享 vue3+threejs可视化项目——引入threejs加载模型（第二步）。

背景

搭建一个模型可视化平台，可以对3d模型进行旋转、缩放、拖拽的基础操作。

threejs框架

Three.js是一个用于在Web浏览器上创建和显示3D图形的JavaScript库。它使用WebGL作为其底层渲染器，提供了一套简单易用的API，使开发者能够使用JavaScript创建复杂的3D场景和动画效果。Three.js包含了各种渲染、几何体、材质、动画、相机和灯光等组件，使开发者能够轻松地构建出令人惊叹的3D效果。

Three.js的主要特点包括：

简单易用：Three.js提供了一个直观的API，使得开发者能够快速上手并创建3D场景。
跨平台：Three.js可以在各种主流的Web浏览器上运行，包括桌面和移动设备。
强大的渲染能力：Three.js使用WebGL作为底层渲染器，可以利用硬件加速来实现高性能的3D渲染。
多样化的组件：Three.js提供了各种渲染、几何体、材质、动画、相机和灯光等组件，使开发者能够灵活地构建出各种复杂的3D效果。
社区活跃：Three.js拥有一个活跃的开发者社区，不仅提供了丰富的文档和示例，还有大量的第三方插件和工具可供使用。

总之，Three.js是一个功能强大的JavaScript库，可以帮助开发者在Web浏览器上创建出令人惊叹的3D图形和动画效果。无论是开发游戏、可视化应用还是创建交互式网站，Three.js都是一个非常有用的工具。

yarn 安装 threejs

yarn add  three

💖初始化一个场景scene

加载一个cube

<template>
    <div class="container-three-box">
        <div class="view-box" id="model-id">
        </div>
    </div>
</template>
<script setup lang="ts">
    import * as THREE from 'three';
    import {reactive,onMounted} from 'vue'
    const state:any=reactive({
        title:'加载模型',
        domId:'model-id'
    })
    const renderThree=()=>{
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.getElementById(state.domId).appendChild( renderer.domElement );
        const geometry = new THREE.BoxGeometry( 1, 1, 1 );
        const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
        // cube
        const cube = new THREE.Mesh( geometry, material );
        
        // cube加入场景
        scene.add( cube );
        camera.position.z = 5;
        // 旋转
        function animate() {
            requestAnimationFrame( animate );
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            renderer.render( scene, camera );
        }
        animate();
    }
    onMounted(()=>{
        renderThree()
    })
</script>
<style lang="less">
    .view-box{
        width:600px;
        height: 600px;
    }
</style>

初始化cube

💖 加载模型

loader一个模型之后加入场景scene

glb实例

const loader = new GLTFLoader();
loader.load( 'path/to/model.glb', function ( gltf ) {
  scene.add( gltf.scene );
}, undefined, function ( error ) {
  console.error( error );
} );

💖 加载钢铁侠模型

将模型放在public静态资源中

加载ob的代码块如下

<template>
    <div class="container-three-box">
        <div class="view-box" id="model-id">
        </div>
    </div>
</template>
<script setup lang="ts">
    import * as THREE from 'three';
    import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
    import {reactive,onMounted} from 'vue'
    const state:any=reactive({
        title:'加载模型',
        domId:'model-id'
    })
    const renderThree=()=>{
        let camera, scene, renderer;
        let object;
        function init() {
            camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 20 );
            camera.position.z = 2.5;
            // scene
            scene = new THREE.Scene();
            const ambientLight = new THREE.AmbientLight( 0xffffff );
            scene.add( ambientLight );
            const pointLight = new THREE.PointLight( 0xffffff, 15 );
            camera.add( pointLight );
            scene.add( camera );
            // manager
            function loadModel() {
                object.traverse( function ( child ) {
                    if ( child.isMesh ) child.material.map = texture;
                } );
                object.position.y = - 0.95;
                object.scale.setScalar( 0.0008 );
                scene.add( object );
                render();
            }
            const manager = new THREE.LoadingManager( loadModel );
            // texture
            const textureLoader = new THREE.TextureLoader( manager );
            const texture = textureLoader.load( '/static/iron_man/obj/textures/Octane_Albedo.jpg', render );
            texture.colorSpace = THREE.SRGBColorSpace;
            // model
            function onProgress( xhr ) {
                if ( xhr.lengthComputable ) {
                    const percentComplete = xhr.loaded / xhr.total * 100;
                    console.log( 'model ' + percentComplete.toFixed( 2 ) + '% downloaded' );
                }
            }
            function onError() {}
            const loader = new OBJLoader( manager );
            loader.load( '/static/iron_man/obj/source/Octane.obj', function ( obj ) {
                object = obj;
            }, onProgress, onError );
            //
            renderer = new THREE.WebGLRenderer( { antialias: true } );
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.getElementById(state.domId).appendChild( renderer.domElement );
            //
            const controls = new  OrbitControls( camera, renderer.domElement );
            controls.minDistance = 2;
            controls.maxDistance = 5;
            controls.addEventListener( 'change', render );
            //
            window.addEventListener( 'resize', onWindowResize );
        }
        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize( window.innerWidth, window.innerHeight );
        }
        function render() {
            renderer.render( scene, camera );
        }
        init()
    }
    onMounted(()=>{
        renderThree()
    })
</script>
<style lang="less">
    .view-box{
        width:600px;
        height: 600px;
    }
</style>

360度旋转模型

⭐总结

要在Three.js中加载模型有以下3点注意事项。

首先，确保已经包含了Three.js库文件。
创建一个空的HTML页面，并在页面中添加一个canvas元素，用于渲染Three.js场景，确认dom存在：
注意场景的光线配置和整体缩放

Three.js

Three.js是一个基于WebGL的JavaScript库，用于创建和显示3D图形。它提供了一些方法和工具，使得在网页上加载和展示模型变得更加简单和高效。

加载模型的原理如下：

创建一个场景（Scene）：首先，需要创建一个场景对象，用于存放加载的模型。
创建一个渲染器（Renderer）：接下来，需要创建一个渲染器对象，用于将场景中的模型渲染到屏幕上。渲染器可以通过调用WebGLRenderer类来创建。
创建一个相机（Camera）：在场景中显示模型需要使用一个相机对象。三.js提供了多种相机类型，如透视相机（PerspectiveCamera）和正交相机（OrthographicCamera）等。
加载模型文件：使用Loader类中的方法，如GLTFLoader、FBXLoader等，加载模型文件。这些方法接收模型文件的路径作为参数，并返回一个模型对象。
将模型添加到场景中：将加载的模型对象添加到场景中，使用add()方法将模型对象添加为场景的子对象。
设置光源（Lighting）：为了能够正确显示模型的材质和纹理，需要设置光源。可以使用AmbientLight、DirectionalLight等类来创建不同类型的光源。
渲染场景：最后，需要调用渲染器的render()方法将场景中的模型渲染到屏幕上。

以上就是使用Three.js加载模型的基本原理。通过创建场景、渲染器和相机，加载模型文件，并将模型添加到场景中，然后设置光源，最后渲染场景。

⭐结束

本文分享到这结束，如有错误或者不足之处欢迎指出！

vue3+threejs可视化项目——引入threejs加载钢铁侠模型（第二步）

⭐前言

💖vue3系列相关文章

💖threejs系列相关文章

⭐引入threejs

💖初始化一个场景scene

💖 加载模型

💖 加载钢铁侠模型

⭐总结

⭐结束

热门文章

最新文章

相关课程

相关电子书

相关实验场景