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)，一起交流学习