Javascript 如何在threejs中添加gltf模型？

我正在搜索一种方法，如何将此模型添加到我的页面。因为现在，我只有一个没有眩光的黑瓶子。当我上传这个模型时，我不能给瓶子添加颜色和e.t。我在后面添加了一些代码。[1]: [2] :

var摄像机、场景、渲染器；
init（）；
函数init（）{
场景=新的三个。场景（）；
方向光=新的三个方向光（0xffffff，100）；
方向灯位置设置（0,1,0）；
directionalLight.castShadow=真；
场景。添加（方向光）；
场景。添加（light4）；
摄像头=新的三个透视摄像头（40，window.innerWidth/window.innerHeight，1500）；
摄像机位置x=1；
摄像机位置y=1.5；
摄像机位置z=2；
场景。添加（摄影机）；
renderer=new THREE.WebGLRenderer({
反别名：对
});
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
var loader=new THREE.GLTFLoader（）；
loader.load（'../ws_r_2-3.glb'，函数（gltf）{
gltf.scene.position.y=0；
scene.add（gltf.scene）；
render（）；
});
var controls=新的三个.OrbitControls（摄影机、渲染器.doElement）；
控件。addEventListener（'change'，render）；
控件更新（）；
addEventListener（'resize'，onWindowResize，false）；
}
函数onWindowResize（）{
renderer.setSize（window.innerWidth、window.innerHeight）；
render（）；
}
函数render（）{
渲染器。渲染（场景、摄影机）；
}

考虑将您的整个代码作为一个实例或GitHub repo进行共享。您的

方向光的强度太高了。现在是
100
。将其更改为
1
。此外，尝试将环境贴图应用到
场景。环境
与官方glTF示例类似，因为您模型的材质的金属度值为
1
。我可以将不透明添加到瓶子中吗？我在Blender中获得了一个很好的结果，可以考虑将您的整个代码作为一个实例或GitHub repo进行共享。您的
DirectionalLight
的强度太高了。现在是
100
。将其更改为
1
。此外，尝试将环境贴图应用到
场景。环境
与官方glTF示例类似，因为您模型的材质的金属度值为
1
。我可以将不透明添加到瓶子中吗？我在搅拌机方面有很好的成绩