使用three.js的GLTFLoader加载外部模型的时候出现的报错，控制台不断的提示同一个错误信息，几秒钟就出现了几百个报错
<html>
<head>
<title>My first Three.js app</title>
<meta charset="UTF-8"/>
<script type="text/javascript" src="../node_modules/dat.gui/build/dat.gui.js"></script>
<style>
body { margin: 0;overflow: hidden; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<div id="render_div">
</div>
<div id="my_stats"></div>
<script type="module">
import * as THREE from '../node_modules/three/build/three.module.js';
import Stats from '../node_modules/stats.js/src/Stats.js';
import { GLTFLoader } from "https://cdn.jsdelivr.net/npm/three@0.121.1/examples/jsm/loaders/GLTFLoader.js";
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 1000);
camera.position.z = 40;
camera.position.x = 50;
camera.position.y = 200;
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);//设置渲染器大小
renderer.shadowMap.enabled = true;//开启渲染器阴影渲染
document.getElementById("render_div").appendChild(renderer.domElement);//在div中添加渲染器的dom元素
var axes = new THREE.AxesHelper(50);//定义坐标轴并设置轴长
scene.add(axes);
// 基本光源会-均匀照亮-场景中的物体
var ambientLight = new THREE.AmbientLight({color:0xAAAAAA});//创建lambert材质光源并设置颜色
scene.add(ambientLight);
// 聚光灯光源作为最常用的光源之一,是一种具有锥形效果的光源，和手电筒类似
var spotLight = new THREE.SpotLight(0xAAAAAA);
spotLight.castShadow = true;
spotLight.position.set(-70, 40, 50);
spotLight.shadow.mapSize = new THREE.Vector2(1024, 1024);
spotLight.shadow.camera.far = 1000;
spotLight.shadow.camera.near = 60;
scene.add(spotLight);
// 通过聚光灯对象添加两个聚光灯对象的辅助类
var lightHelper = new THREE.SpotLightHelper(spotLight);
scene.add(lightHelper);
var shadowCameraHelper = new THREE.CameraHelper(spotLight.shadow.camera);
scene.add(shadowCameraHelper);
var planeGeometry = new THREE.PlaneGeometry(200, 200);
var planeMaterial = new THREE.MeshLambertMaterial({color: 0xcccccc});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
plane.rotation.x = -Math.PI * 0.5;
scene.add(plane);
var boxGeometry = new THREE.BoxGeometry(20, 20, 20);
var boxMaterial = new THREE.MeshLambertMaterial({color : 0x0000ff});
var box = new THREE.Mesh(boxGeometry, boxMaterial);
box.castShadow = true;
box.position.x = 0;
box.position.y = 0;
box.position.z = 0;
scene.add(box);
function addStats() {
var stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
stats.setMode(0);
document.getElementById("my_stats").appendChild(stats.domElement);
return stats;
}
// 设置监听器
var stats = addStats();
// 设置三维场景自适应大小：场景自适应和相机自适应
function onwindowResize() {
camera.aspect = window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();//相机的某些属性变化了，需要更新相机的投影矩阵属性
renderer.setSize(window.innerWidth, window.innerHeight);
}
// 设置监听并调用自适应方法
window.addEventListener("resize", onwindowResize, false);
// 封装加载模型的方法------------------**错误出现在这个方法里面**
function loadModel() {
new GLTFLoader().setPath("../asset/")//GLTFLoader类可以用来加载gltf类型的模型
.load("skyscraperF.glb",function(gltf) {
debugger
gltf.scene.scale.set(10, 10, 10);
scene.add(gltf.scene);
})
}
loadModel();
// 以下注释内容取自官网example
// var loader = new GLTFLoader();
// THREE.DRACOLoader.setDecoderPath( '/examples/js/libs/draco' );
// loader.setDRACOLoader( new THREE.DRACOLoader() );
// // Optional: Pre-fetch Draco WASM/JS module, to save time while parsing.
// THREE.DRACOLoader.getDecoderModule();
// // Load a glTF resource
// loader.load(
// // resource URL
// 'models/gltf/duck/duck.gltf',
// // called when the resource is loaded
// function ( gltf ) {
// scene.add( gltf.scene );
// gltf.animations; // Array<THREE.AnimationClip>
// gltf.scene; // THREE.Scene
// gltf.scenes; // Array<THREE.Scene>
// gltf.cameras; // Array<THREE.Camera>
// gltf.asset; // Object
// },
// // called while loading is progressing
// function ( xhr ) {
// console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
// },
// // called when loading has errors
// function ( error ) {
// console.log( 'An error happened' );
// }
// );
var ctrlObj = {
rotationSpeed: 0.01,
positionX : 0,
positionY : 0,
positionZ : 0,
ambientLightIntensity: 1,
ambientLightColor: 0xffffff,
spotLightIntensity: 1,
spotLightColor: 0xffffff,
spotLightDistance: 100,
spotLightAngle: Math.PI/2,
spotLightPenumbra: 0,
spotLightDecay: 0,
}
var gui = new dat.GUI();
gui.add(ctrlObj, "rotationSpeed", 0, 1);
gui.add(ctrlObj, "positionX", -30, 30);
gui.add(ctrlObj, "positionY", -30, 30);
gui.add(ctrlObj, "positionZ", -30, 30);
var ambientLightFolder = gui.addFolder("ambientLight");
var spotLightFolder = gui.addFolder("spotLight");
ambientLightFolder.add(ctrlObj, "ambientLightIntensity", 0, 5);
ambientLightFolder.addColor(ctrlObj, "ambientLightColor").onChange(function(clr) {
ambientLight.color = new THREE.Color(clr);
});
spotLightFolder.add(ctrlObj, "spotLightIntensity", 0, 5);
spotLightFolder.addColor(ctrlObj, "spotLightColor").onChange(function(clr) {
spotLight.color = new THREE.Color(clr);
});
spotLightFolder.add(ctrlObj, "spotLightDistance", 0, 500).onChange(function(dis) {
spotLight.distance = dis;
});
spotLightFolder.add(ctrlObj, "spotLightAngle", 0, Math.PI*2).onChange(function(ang) {
spotLight.angle = ang;
});
spotLightFolder.add(ctrlObj, "spotLightPenumbra", 0, 1).onChange(function(pnb) {
spotLight.penumbra = pnb;
});
spotLightFolder.add(ctrlObj, "spotLightDecay", 0, 5).onChange(function(dcy) {
spotLight.decay = dcy;
});
function renderScene() {
stats.update();
shadowCameraHelper.update();
lightHelper.update();
requestAnimationFrame(renderScene);//创建一个循环，进行高效的绘制
box.position.set(ctrlObj.positionX, ctrlObj.positionY, ctrlObj.positionZ);
ambientLight.intensity = ctrlObj.ambientLightIntensity;
spotLight.intensity = ctrlObj.spotLightIntensity
box.rotation.x += ctrlObj.rotationSpeed;
camera.lookAt(box.position);
renderer.render(scene, camera);
}
renderScene();
</script>
</body>
</html>
一直提示Uncaught TypeError: material.onBeforeRender is not a function
试过了官网提供的example，但是貌似存在一些其他问题导致没有明显的效果
希望能够成功在场景中导入模型