Blender基础建模 | 大帅老猿threejs特训

最近接触到了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)，一起交流学习