图形化开发（六）03 |
您所在的位置：网站首页 › js引入后如何使用指定文件 › 图形化开发（六）03 |
图形化开发（六）03
|
图形化开发（六）03-Three.js之导入模型——glTF格式文件导入，3D模型的使用 & vs code之glTF Tools插件的使用方法
glTF格式文件导入
glTF格式的3D格式文件是官方推荐的使用的格式，这种格式的文件我们可以在sketchfab官网下载，这是一个国外比较知名的模型网站。 loader地址： https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/GLTFLoader.js 下载地址： https://sketchfab.com/3d-models?date=week&features=downloadable&sort_by=-likeCount 首先，将GLTFLoader加载器插件引入到页面，插件在官方包的地址/examples/js/loaders/，一些文件的导入插件都在这一个文件夹内，大家有兴趣可以研究一下： 然后创建一个加载器： var loader = new THREE.GLTFLoader();使用加载器去加载模型，并调节一下模型大小在场景内展示： loader.load('../js/models/gltf/scene.gltf', function (gltf) { gltf.scene.scale.set(.1,.1,.1); scene.add(gltf.scene); });只要碰到loader，一定要使用dev server 3D模型使用步骤实例文件夹
https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/GLTFLoader.js index.html DOCTYPE html> 我的第一个Three.js案例 body { margin: 0; } canvas { width: 100%; height: 100%; display: block; } 2、打开模型地址，进行选择模型https://sketchfab.com/3d-models?date=week&features=downloadable&sort_by=-likeCount 3、选中一个进入，进行下载
下载的3D模型文件
使用加载器去加载模型，并调节一下模型大小在场景内展示： loader.load('../js/models/gltf/scene.gltf', function (gltf) { gltf.scene.scale.set(.1,.1,.1); scene.add(gltf.scene); });只要碰到loader，一定要使用dev server index.js var renderer, camera, scene, gui, stats, ambientLight, directionalLight, control; function initRender() { renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); //告诉渲染器需要阴影效果 renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 默认的是，没有设置的这个清晰 THREE.PCFShadowMap document.body.appendChild(renderer.domElement); } function initCamera() { camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 100, 200); camera.lookAt(new THREE.Vector3(0, 0, 0)); } function initScene() { scene = new THREE.Scene(); } function initGui() { //声明一个保存需求修改的相关数据的对象 gui = {}; var datGui = new dat.GUI(); //将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值） } function initLight() { ambientLight = new THREE.AmbientLight("#111111", 20); // 环境光 scene.add(ambientLight); directionalLight = new THREE.DirectionalLight("#ffffff", 100); // 太阳 directionalLight.position.set(40, 60, 10); directionalLight.shadow.camera.near = 1; //产生阴影的最近距离 directionalLight.shadow.camera.far = 400; //产生阴影的最远距离 directionalLight.shadow.camera.left = -50; //产生阴影距离位置的最左边位置 directionalLight.shadow.camera.right = 50; //最右边 directionalLight.shadow.camera.top = 50; //最上边 directionalLight.shadow.camera.bottom = -50; //最下面 //这两个值决定生成阴影密度 默认512 directionalLight.shadow.mapSize.height = 1024; directionalLight.shadow.mapSize.width = 1024; //告诉平行光需要开启阴影投射 directionalLight.castShadow = true; scene.add(directionalLight); } function initModel() { //底部平面 var planeGeometry = new THREE.PlaneGeometry(100, 100); var planeMaterial = new THREE.MeshLambertMaterial({ color: '#fff', side: THREE.DoubleSide }); var plane = new THREE.Mesh(planeGeometry, planeMaterial); plane.rotation.x = -0.5 * Math.PI; plane.position.y = -.1; plane.receiveShadow = true; //可以接收阴影 scene.add(plane); // 创建gltf加载器 var loader = new THREE.GLTFLoader(); loader.load('./3d/scene.gltf', function (gltf) { gltf.scene.scale.set(50, 50, 50); scene.add(gltf.scene); }); } function initStats() { stats = new Stats(); document.body.appendChild(stats.dom); } function initControl() { control = new THREE.OrbitControls(camera, renderer.domElement); } function render() { control.update(); renderer.render(scene, camera); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { //更新控制器 render(); //更新性能插件 stats.update(); requestAnimationFrame(animate); } function draw() { initGui(); initRender(); initScene(); initCamera(); initLight(); initModel(); initStats(); initControl(); animate(); renderer.setClearColor('rgb(135,206,250)', 1.0); window.onresize = onWindowResize; } 4、直接本地打开index.html文件，会存在跨域问题
附 因为是感光材料，可以修改属性，改变效果 index.js function initLight() { ambientLight = new THREE.AmbientLight("#111111", 20); // 环境光 scene.add(ambientLight); directionalLight = new THREE.DirectionalLight("#ffffff", 100); // 太阳 } |
【本文地址】
今日新闻 |
推荐新闻 |