threeJs 起步案例

 安装

npm install three 

引入

// 导入整个 three.js核心库

import * as THREE from 'three'

 创建步骤

场景

想象一下，你要在网页中作出一个3D模型，网页是个平面，平面怎么能放三维物体呢？那么首先，你需要构建出一个三维场景

const scene = new THREE.Scene()

物体形状和材质

能放三维场景的空间建好了，现在里面是空的，我们需要放点三维物体进去，大部分真正开发需求是从专业建模软件导出的建模文件。当然threeJs也提供了一些几何体的API ， 比如，创建一个立方体

//创建一个长宽高都为100的立方体

const geometry = new THREE.BoxGeometry(100, 100, 100);

 几何体只是有了一个形状，这之后我们需要给你创建的几何体一个材质，材质不同，对光的反应不同，基础网格材质MeshBasicMaterial 对光没反应，后续如果需要灯光效果，使用这个材质则看不到

//创建材质（外观）MeshLambertMaterial 对光有反应

const material = new THREE.MeshLambertMaterial();

形状和材质都建造好之后，将这两个参数给mesh，创建一个网格模型，网格模型在三维空间中就是一个虚拟的物体了

//创建一个网格模型对象

const mesh = new THREE.Mesh(geometry, material);

//把网格模型添加到三维场景

scene.add(mesh);

光照 

光照有环境光、点光、平行光、聚光

//点光源：两个参数分别表示光源颜色和光照强度

// 参数1：0xffffff是纯白光,表示光源颜色

// 参数2：1000,表示光照强度，可以根据需要调整

const pointLight = new THREE.PointLight(0xffffff, 100000);

//点光源位置

pointLight.position.set(100, 200, 150);//点光源放在x轴上

scene.add(pointLight); //点光源添加到场景中

至此为止，场景和物体都建好了，我们已经拥有一个三维环境了，但是页面上什么也看不到，想要“看到”你的三维场景，还需要一个摄像机和一个渲染器。相当于摄像机在不停对你的三维场景拍照，然后渲染给你看，你才能在平面网页看到你的三维物品

相机

原文说的很清楚，这里只存一下代码

// 定义相机输出画布的尺寸(单位:像素px)

const width = 800; //宽度

const height = 500; //高度

// 实例化一个透视投影相机对象

// 30:视场角度, width / height:Canvas画布宽高比, 1:near, 3000：far

const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);

//相机在Three.js三维坐标系中的位置

// 根据需要设置相机位置具体值

camera.position.set(200, 200, 200);

//相机拍摄方向

camera.lookAt(0, 0, 0); //坐标原点

 渲染器

 

// 创建渲染器对象

const renderer = new THREE.WebGLRenderer();

// 定义threejs输出画布、渲染区域的尺寸(单位:像素px)

renderer.setSize(width, height);

//执行渲染操作

renderer.render(scene, camera);

完整代码

<template>
    <div id="my-three"></div>
</template>

<script lang='ts' setup>
    import * as THREE from 'three'
    import { onMounted  } from 'vue'

    //创建一个三维场景
    const scene = new THREE.Scene();
    //创建一个物体
    const geometry = new THREE.BoxGeometry(100, 100, 100);
    //创建材质（外观）MeshLambertMaterial 对光有反应
    const material = new THREE.MeshLambertMaterial();
    //创建一个网格模型对象
    const mesh = new THREE.Mesh(geometry, material);
    //把网格模型添加到三维场景
    scene.add(mesh);

    /**
     * 光源
     */
    //点光源：两个参数分别表示光源颜色和光照强度
    // 参数1：0xffffff是纯白光,表示光源颜色
    // 参数2：1000,表示光照强度，可以根据需要调整
    const pointLight = new THREE.PointLight(0xffffff, 100000);
    //点光源位置
    pointLight.position.set(100, 200, 150);//点光源放在x轴上
    scene.add(pointLight); //点光源添加到场景中


    /**
     * 相机
     */
    // 定义相机输出画布的尺寸(单位:像素px)
    const width = 800; //宽度
    const height = 500; //高度
    // 实例化一个透视投影相机对象
    // 30:视场角度, width / height:Canvas画布宽高比, 1:近裁截面距离, 3000：远裁截面距离
    const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
    //相机在Three.js三维坐标系中的位置
    // 根据需要设置相机位置具体值
    camera.position.set(200, 200, 200); 
    //相机拍摄方向
    camera.lookAt(0, 0, 0); //坐标原点

    /**
     * 渲染器
     */
    // 创建渲染器对象
    const renderer = new THREE.WebGLRenderer();
    // 定义threejs输出画布、渲染区域的尺寸(单位:像素px)
    renderer.setSize(width, height);
    //执行渲染操作
    renderer.render(scene, camera); 
   
    onMounted(()=>{
        document.getElementById('my-three')?.appendChild(renderer.domElement)
    })
</script>

 如果想加载外部三维模型，可以去官网代码里找例子，仿照loaders文件中提供的加载代码去写，不同文件格式可能会不一样，这里记录我比较常见的fbx文件格式 

// 引入fbx模型加载库

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

const loader = new FBXLoader()

loader.load('fbx文件地址', (object) => {

        console.log(object)

        //得到fbx物体，将物体放入三维场景中

        scene.add(object)

})

注意：fbx文件地址是相对于html文件，而不是你js代码的位置