上文 WEB 3D技术 three.js 雾 基础使用讲解我们讲了雾的基本使用方法
但是 如果我们要做一个树林 一颗一颗树去加 那真的是要累死了
我们一定是在建模软件上 建模好这样的模型 然后将模型导入到场景中
官网中搜索 GLTFLoader
在我们日常WEB开发中 用的最多的3D格式 就是 GLTF
这里 我们需要一个glb 或者 gltf 文件
可以直接访问 https://www.webvrmodel.com/php/static/model-1666.html
或者下载我的资源
three.js GLTFLoader学习案例
首先 我们需要在代码中 带入 gltf加载器
//导入gltf加载器import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";然后 我们编写代码如下
import './style.css'import * as THREE from "three";import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";//导入gltf加载器import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";//创建场景const scene = new THREE.Scene();scene.fog = new THREE.Fog(0x999999,0.1,10);scene.background = new THREE.Color(0x999999);// 实例化加载器g1tfconst gltfLoader = new GLTFLoader();gltfLoader.load( // 模型路径 "/gltf/cityModel.gltf", // 加较完成同调 (gltf) =>{ console.log(gltf); })//创建相机const camera = new THREE.PerspectiveCamera( 45, //视角 视角越大 能看到的范围就越大 window.innerWidth / window.innerHeight,//相机的宽高比 一般和画布一样大最好 0.1, //近平面 相机能看到最近的距离 1000 //远平面 相机能看到最远的距离);//c创建一个canvas容器 并追加到 body上const renderer = new THREE.WebGLRenderer(0);renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);//设置相机位置 这里 我们设置Z轴 大家可以试试 S Y 和 Z 都是可以的camera.position.z = 5;//设置相机默认看向哪里 三个 0 代表 默认看向原点camera.lookAt(0, 0, 0);//将内容渲染到元素上renderer.render(scene, camera);const controls = new OrbitControls(camera, renderer.domElement);function animate() { controls.update(); requestAnimationFrame(animate); /*cube.rotation.x += 0.01; cube.rotation.y += 0.01;*/ renderer.render(scene, camera);}animate();不要什么几何体了 我们直接声明GLTFLoader实例
然后通过 实例的 load 函数导入 gltf格式文件
回调函数接收一个行参 即 gltf文件实例对象
我们运行代码 打开控制台
很明显 这里是拿到了的
scene 字段即为我们当前的场景
我们直接在回调函数中 编写代码
scene.add(gltf.scene)将 scene 添加进来
运行代码 场景就出来了
scene 下的 children 即是我们的物体 还有一个相机 当然 我们只展示物体 相机是不管的
但是 目前 我们所有物体 目前是个黑白的
是因为 他需要一个灯光的材质
虽然现在看着暗暗的
我们改成这样
const gltfLoader = new GLTFLoader();gltfLoader.load( // 模型路径 "/gltf/scene.glb", // 加较完成同调 (gltf) =>{ gltf.scene.traverse((child) => { if (child.isMesh) { child.frustumCulled = false; child.castShadow = true; child.material.emissive = child.material.color; child.material.emissiveMap = child.material.map; } }); scene.add(gltf.scene); })色彩就出来了
