3d展馆项目从3d设计到threejs使用 | 大帅老猿threejs特训

我们在开发一个threejs项目的时候，避免不了会碰到3d物料的使用，作为前端开发开发人员， 肯定是要懂得一些3d的一些基本知识，现在前端项目用到的3d物体的设计软件blender软件比较多，我们现在就大概了解一下，提醒一下，mac和windows两个系统的blender快捷键不一样。 如果是mac我会建议下载一个mac版的插件使用

github.com/machin3io/M… 可以下载bledner m3快捷键工具箱 更加方便

这边就简单说一些快捷键的使用

快捷键 前视图 左视图 右视图 1 3 7(windons)

快捷键 shift+d 复制物体

快捷键 a 全选

快捷键 x 删除

快捷键 shif+a键 新建物体

快捷键 shift+c键 游标回到原点

如果大家想熟练是使用blender需要大家每天高强度的练习，大家可以看www.bilibili.com/video/BV14D… b站的这个视频一共是3天的视频干货满满，关于blender就行介绍到这，

提醒一下，threejs线上的官网会比较卡，最好我们去github上把官网下载下来，juejin.cn/post/714043… 这篇文章里有详细步骤大家可以参考

我们接下来介绍一下threejs的一个展馆的项目，这个展馆就是我们使用blender制作出来的3d模型,

import * as THREE from 'three'; // 引入threejs 
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; // 导入摄像机
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; // 解析gltf 物体的方法

引入展馆3d模型，并且给相对应子模型添加相对应的材质

// 展馆
new GLTFLoader().load('../resources/models/zhanguan2.glb', (gltf) => {

    // console.log(gltf);
    scene.add(gltf.scene);

    gltf.scene.traverse((child) => {
        // console.log(child.name);

        child.castShadow = true;
        child.receiveShadow = true;

        if (child.name === '2023') {
            const video = document.createElement('video');
            // video.src = "./resources/yanhua.mp4";
            // video.muted = true;
            // video.autoplay = "autoplay";
            // video.loop = true;
            // video.play();

            const videoTexture = new THREE.VideoTexture(video);
            const videoMaterial = new THREE.MeshBasicMaterial({ map: videoTexture });

            child.material = videoMaterial;
        }
        if (child.name === '大屏幕1' || child.name === '大屏幕2' || child.name === '操作台屏幕' || child.name === '环形屏幕2') {
            const video = document.createElement('video');
            video.src = "./resources/video01.mp4";
            video.muted = true;
            video.autoplay = "autoplay";
            video.loop = true;
            video.play();

            const videoTexture = new THREE.VideoTexture(video);
            const videoMaterial = new THREE.MeshBasicMaterial({ map: videoTexture });

            child.material = videoMaterial;
        }
        if (child.name === '环形屏幕') {
            const video = document.createElement('video');
            video.src = "./resources/video02.mp4";
            video.muted = true;
            video.autoplay = "autoplay";
            video.loop = true;
            video.play();

            const videoTexture = new THREE.VideoTexture(video);
            const videoMaterial = new THREE.MeshBasicMaterial({ map: videoTexture });

            child.material = videoMaterial;
        }
    })

})

这是使用threejs展览馆一些基础

let mixer;
let playerMixer;

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 50);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.shadowMap.enabled = true;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

camera.position.set(5, 10, 25);

// const controls = new OrbitControls(camera, renderer.domElement);

scene.background = new THREE.Color(0.2, 0.2, 0.2);

const ambientLight = new THREE.AmbientLight(0xffffff, 0.1);
scene.add(ambientLight);

const directionLight = new THREE.DirectionalLight(0xffffff, 0.2);
scene.add(directionLight);

// directionLight.position.set (10, 10, 10);
directionLight.lookAt(new THREE.Vector3(0, 0, 0));

directionLight.castShadow = true;

directionLight.shadow.mapSize.width = 2048;
directionLight.shadow.mapSize.height = 2048;

const shadowDistance = 20;
directionLight.shadow.camera.near = 0.1;
directionLight.shadow.camera.far = 40;
directionLight.shadow.camera.left = -shadowDistance;
directionLight.shadow.camera.right = shadowDistance;
directionLight.shadow.camera.top = shadowDistance;
directionLight.shadow.camera.bottom = -shadowDistance;
directionLight.shadow.bias = -0.001;

效果棒棒哒，让我们一起加入猿创营 (v:dashuailaoyuan)，一起交流学习