threejs视频教程学习（7）：水晶小熊（改变模型的材质）

前言

老陈打码视频教程地址：3d水晶小熊

这次的视频教程最核心的在我看来是模型材质的修改，其他内容就不说了，感兴趣的可以自己去看视频

基础代码

<template>
    <div id="container"></div>
</template>

<script setup lang="ts">
import {
    
     onMounted } from 'vue';
import * as THREE from 'three';
// 引入轨道控制器
import {
    
     OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

onMounted(() => {
    
    
    // 创建场景
    const scene = new THREE.Scene();
    // 创建相机
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
    // 设置相机位置
    camera.position.set(2, 2, 1);
    // 设置相机视锥体的长宽比
    camera.aspect = window.innerWidth / window.innerHeight;
    // 更新相机投影矩阵
    camera.updateProjectionMatrix();
    // 将相机添加到场景中
    scene.add(camera);
    // 初始化渲染器
    const renderer = new THREE.WebGLRenderer({
    
    
        antialias: true // 抗锯齿
    });
    // 设置渲染的尺寸
    renderer.setSize(window.innerWidth, window.innerHeight);
    // 设置渲染的输出编码
    renderer.outputEncoding = THREE.sRGBEncoding;

    // 将渲染的内容输出到dom元素中
    document.getElementById('container')?.appendChild(renderer.domElement);
    // 监听窗口的变化
    window.addEventListener('resize', () => {
    
    
        // 重新设置
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    });
    // 使用渲染器，通过相机将场景渲染
    renderer.render(scene, camera);
    // 添加坐标辅助器
    const axesHelper = new THREE.AxesHelper(10);
    scene.add(axesHelper);

    // 创建轨道控制器
    const controls = new OrbitControls(camera, renderer.domElement);
    // 设置控制器阻尼
    controls.enableDamping = true;
    // 创建渲染函数
    const render = () => {
    
    
        controls.update();
        renderer.render(scene, camera);
        requestAnimationFrame(render);
    };
    render();
    
    // 加载小熊模型的逻辑
});
</script>

加载小熊模型

// 加载小熊模型
const gltfLoader = new GLTFLoader();
gltfLoader.load('../../../../public/bear.gltf', gltf => {
    
    
    const model = gltf.scene;
    scene.add(model);
});
// 添加环境光
const light = new THREE.AmbientLight(0x404040); // soft white light
scene.add(light);

修改小熊的材质

查看模型

 const gltfLoader = new GLTFLoader();
 gltfLoader.load('../../../../public/bear.gltf', gltf => {
    
    
     console.log('模型：', gltf);
     const model = gltf.scene;
     scene.add(model);
 });

最终效果、完整代码

效果

代码

<template>
    <div id="container"></div>
</template>

<script setup lang="ts">
import {
    
     onMounted } from 'vue';
import * as THREE from 'three';
// 引入轨道控制器
import {
    
     OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

// 导入模型加载器
import {
    
     GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

onMounted(() => {
    
    
    // 创建场景
    const scene = new THREE.Scene();
    // 创建相机
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
    // 设置相机位置
    camera.position.set(2, 2, 1);
    // 设置相机视锥体的长宽比
    camera.aspect = window.innerWidth / window.innerHeight;
    // 更新相机投影矩阵
    camera.updateProjectionMatrix();
    // 将相机添加到场景中
    scene.add(camera);
    // 初始化渲染器
    const renderer = new THREE.WebGLRenderer({
    
    
        antialias: true // 抗锯齿
    });
    // 设置渲染的尺寸
    renderer.setSize(window.innerWidth, window.innerHeight);
    // 设置渲染的输出编码
    renderer.outputEncoding = THREE.sRGBEncoding;

    // 将渲染的内容输出到dom元素中
    document.getElementById('container')?.appendChild(renderer.domElement);
    // 监听窗口的变化
    window.addEventListener('resize', () => {
    
    
        // 重新设置
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    });
    // 使用渲染器，通过相机将场景渲染
    renderer.render(scene, camera);
    // 添加坐标辅助器
    const axesHelper = new THREE.AxesHelper(10);
    scene.add(axesHelper);

    // 创建轨道控制器
    const controls = new OrbitControls(camera, renderer.domElement);
    // 设置控制器阻尼
    controls.enableDamping = true;
    // 创建渲染函数
    const render = () => {
    
    
        controls.update();
        renderer.render(scene, camera);
        requestAnimationFrame(render);
    };
    render();
    // 设置场景的背景
    const loader = new THREE.TextureLoader();
    const bgTexture = loader.load('../../../../public/4_f.jpg');
    bgTexture.mapping = THREE.EquirectangularRefractionMapping;

    scene.background = bgTexture;
    scene.environment = bgTexture;

    // 加载小熊模型
    const gltfLoader = new GLTFLoader();
    gltfLoader.load('../../../../public/bear.gltf', gltf => {
    
    
        console.log('模型：', gltf);
        const model = gltf.scene.children[0];
        // 设置小熊的材质，用于具有镜面高光的光泽表面的材质
        model.material = new THREE.MeshPhongMaterial({
    
    
            color: 0xffffff,
            // 环境贴图
            envMap: bgTexture,
            // 折射率
            refractionRatio: 0.7,
            // 反射率
            reflectivity: 0.9
        });
        scene.add(model);
    });
    // 添加环境光
    const light = new THREE.AmbientLight(0xffffff); // soft white light
    scene.add(light);
});
</script>