最近接触到了web3d相关的知识，特别感觉“大帅老猿”和“胖达老师”带我入门！
今天来和大家一起讲讲我建模的故事！顺便教大家一起实现建模自由！
一、首先下载一个免费软件Blender，知道为什么用它吧？因为免费！！！作为白嫖党怎么可能放着免费的东西哈哈！
二、新建一个免费的文件，刚建好它是这样子的：
虽然它给我们预置了一个正方体、一个相机、一个光，但是吧我们就是不用它的，诶嘿，我们右上角右击给它删了。
然后我们在左上角点击 添加->网格->柱体，然后我们自己就新建了一个柱体，切换到变换选项，就开始我们的造底盘操作吧！！！
拖成扁扁的它，然后按一下TAB（或者左上角改成编辑模式），然后选择最上边的面，如下：
然后按住Ctrl+B，拖动鼠标，向内挤它！
向里挤完了它，然后选中这个面，右击挤出面，就向下挤它，总之就是挤它！然后挤到我们得到了一个镂空的圆形场地！
这就是我们的元宇宙底盘了！！哦不行，没有门，打开我们的编辑模式，选中门口的几块墙，Delete删掉它们！
删完了，但是感觉空空的！算了 还是给它缝合一下吧 要不显得不好看，选中左侧边，右击，挤出边线！
左上角切换到顶点模式，选中我们挤出的面的没对齐的顶点，然后按住shift选中要对齐的点，右击，合并顶点->到末选点，
下边的点重复此操作，对面重复挤出面操作！OK！齐活，场地搭建完毕！
三、添加文字
左上角->添加->文本
刚添加完它是这样式的，默认还是英文，英文肯定不合适啊，堂堂大China，换成中文！
这样式的就是中文，不要问我为什么，我也不知道。。。。选择其中一个！然后选中文字按Tab，就可以打字咯！
是不是发现一个问题，输入法打不进去，Why，我也不知道，但是你只需要在其它地方打一下，然后复制就OK了！
然后给它拖成立着的，我们肯定要立体啊！再顺便右击，调整挤出！更立体了！完美！
四、放个大屏幕
简单，左上角添加面，拖动到一个你想放的位置，完活了！
五、放置到我们的Threejs中！
左上角->文件->导出->glb格式 代码引入：
import * as THREE from 'three';
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
let mixer;
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 100);
const renderer = new THREE.WebGLRenderer({ antialias: 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 directionLight = new THREE.DirectionalLight(0xffffff, 0.4);
scene.add(directionLight);
new GLTFLoader().load('../resources/models/ShiLi.glb', (gltf) => {
scene.add(gltf.scene);
gltf.scene.traverse((child)=>{
if (child.name === '大帅') {
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 === '平面') {
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;
}
})
mixer = new THREE.AnimationMixer(gltf.scene);
const clips = gltf.animations; // 播放所有动画
clips.forEach(function (clip) {
const action = mixer.clipAction(clip);
action.loop = THREE.LoopOnce;
action.clampWhenFinished = true;
action.play();
});
})
new RGBELoader()
.load('../resources/sky.hdr', function (texture) {
texture.mapping = THREE.EquirectangularReflectionMapping;
scene.environment = texture;
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.render(scene, camera);
});
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
controls.update();
if (mixer) {
mixer.update(0.02);
}
}
animate();
效果：
完活！ 和我一起加入猿创营 (v:dashuailaoyuan)，一起交流学习
