three.js - 三 JS - GLTF 模型暗
问题描述
我已成功使用 GLTFLoader 将我的模型加载到 ThreeJS 中,但我的模型很暗。我尝试将它上传到glTF Viewer和BabylonJS,它在那里完美运行。这是我的javascript代码:
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 )
const controls = new THREE.OrbitControls( camera )
const light = new THREE.AmbientLight( 0x404040 ); // soft white light
const renderer = new THREE.WebGLRenderer()
renderer.setSize( window.innerWidth, window.innerHeight )
renderer.setClearColor( 0xffffff )
document.body.appendChild( renderer.domElement )
// Instantiate a loader
const loader = new THREE.GLTFLoader();
// Load a glTF resource
loader.load(
// resource URL
'untitled2.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
}
// loading and error function
)
camera.position.y = 1
camera.position.z = 2
// Vertical
controls.minPolarAngle = 1; // radians
controls.maxPolarAngle = 1; // radians
//Horizontal
controls.minAzimuthAngle = - Infinity; // radians
controls.maxAzimuthAngle = Infinity; // radians
scene.add( light );
const animate = function () {
requestAnimationFrame( animate )
renderer.render( scene, camera )
}
animate()
我尝试添加环境照明,因为根据文档,它应该充当全局照明并更改背景颜色。
解决方案
Solved it finally! The solution was that I needed to add intensity to the ambient light.
推荐阅读
- typo3 - TYPO3 中翻译的错误本地化
- laravel-5.7 - Laravel 和 jenssegers mongodb 关系数据未保存
- c - 在 C 中使用数组结构函数
- python - 范围联合上的 xlsxwriter 条件格式
- java - 在java中找到一条主曲线
- python - 通过 min-max kwargs 过滤 pandas 数据帧
- excel - 如何解决运行时错误 1004;我们不能在合并的单元格中这样做
- c# - 我在 asp.net 中使用邮件代码。它在本地运行良好,但在 Godaddy 服务器上无法在线运行
- vaadin - 无法解析符号:import org.eclipse.jetty.server.Server;
- java - 如何将我的 API JSON 数据显示到回收站视图中