ThreeJs 学习踩坑

1.有个错误找了一上午…
代码如下：

//threeJs04 初始化js方法
import * as THREE from "three";
import { Clock, Color } from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
console.log(THREE);



//1.初始化场景
const scene = new THREE.Scene();

//2.初始化相机
const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    2000
);

//设置相机位置
camera.position.set(-50, 50, 130);
//更新摄像头宽高比
camera.aspect = window.innerWidth / window.innerHeight;
//更新摄像头投影矩阵
camera.updateProjectionMatrix();

scene.add(camera);
//初始化渲染器
const renderer = new THREE.WebGLRenderer({
    //设置抗锯齿
    antialias: true,
});

const material = new THREE.MeshBasicMaterial({color:0xfff})

const geo  = new THREE.BoxGeometry(1,1,1);
const mesh = new THREE.Mesh(geo,material);

scene.add(mesh);

renderer.setSize(window.innerWidth , window.innerHeight);
renderer.outputEncoding = THREE.sRGBEncoding;
//监听屏幕大小改变，修改渲染器的宽高和相机比例
window.addEventListener("resize", () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth / window.innerHeight);
});

document.body.appendChild(renderer.domElement);

function render() {
    //渲染场景
    renderer.render(scene, camera);
    //引擎自动更新渲染
    requestAnimationFrame(render);
}

render();

一个非常简单的创建场景的片段，运行后啥都没有，啥操作都没显示
因为renderer.setSize(window.innerWidth / window.innerHeight);参数写错了…看了一上午都没找到问题，一度怀疑是编辑器坏了.真难受…

2.JSON.parse 获取的json格式不正确。通过以下方法进行纠正
const font = scope.parse( JSON.parse( JSON.stringify(text) ) );

3. 字体引入

let myFont = require('three/examples/fonts/gentilis_bold.typeface.json')

通过这样去获取资源的时候。调用方法 获取字体时

const loader = new FontLoader();
    loader.load(myFont, function (response) {
        console.log(myFont);
        font = response;
        refreshText();
    });

会出现Uncaught TypeError: (0 , _fontLoaderDefault.default) is not a constructor 相关问题。
这是因为通过require直接获取的是文件对象。而不是一个url。
fontLoader中调用FileLoader 获取资源时，把myFont当成了一个url。所以出问题了。

因为fontLoader中初始化字体的具体方法为

loader.load( url, function ( text ) {
            const font = scope.parse( JSON.parse( JSON.stringify(text) ) );
            if ( onLoad ) onLoad( font );
        }, onProgress, onError );
    }
    parse( json ) {
        return new Font( json );

所以，将url当成text直接传入即可。

当然最好是传入url匹配原生方法，这样是最不容易出问题的。（我想js不能读取本地文件也是出于对主机的安全考虑，以及前端文件的轻量级—从在线服务器获取大部分资源）

4. 引入模型不显示
   常用的模型引入方法：

//引入FBX类型模型.并播放动作
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js';
let model= require('../model/model.FBX')
  // 加载模型并开启阴影和接受阴影
    fbxLoader = new FBXLoader();
    var model
    fbxLoader.load(guide, function(fbx) {
        fbx.rotation.set(0, 0, 0)
        fbx.scale.set(0.01, 0.01, 0.01)
        fbx.traverse(function (object) {
            if (object.isMesh) {
                modelMesh = object;
                mixer = new THREE.AnimationMixer(modelMesh);
                mixer.update(0.02);
                object.castShadow = true; //阴影
                object.receiveShadow = true; //接受别人投的阴影
            }
        });
        scene.add(fbx);
       model = fbx;
    }, function (res) {
        console.log(res.total, res.loaded)
    });
    const clips = model.animations;
    // 播放一个特定的动画
    const clip = clips[0];
    console.log(fbx);
    action = mixer.clipAction(clip);
    action.play();

可以看到上面设置了位置和大小。如果位置偏移可能会看不到模型。如果模型大小太离谱，也可能看不到。需要相应的调小模型的大小

//GLTF、GLB类型引入
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
let soldier = require('../assets/model/Soldier.glb')
   // 加载模型并开启阴影和接受阴影
   var gltfLoader = new GLTFLoader();
    gltfLoader.load(soldier, function (gltf) {
        scene.add(new AmbientLight(0xFFFFFF, 1));
        gltf.scene.name = 'soldier'
        scene.add(gltf.scene);
        gltf.scene.rotateY(Math.PI)
        gltf.scene.scale.set(5, 5, 5)
        const animationClip = gltf.animations.find(animationClip => animationClip.name === 'Walk');
        var action = mixer.clipAction(animationClip);
        console.log(mixer);
        action.play();
    }, function (res) {
        console.log(res.total, res.loaded)
    });

GLTF 模型的藏在scene里。在使用scene.add的时候要注意