[英]only part of gltf model appearing using three.js
我一直在嘗試使用threeJS'添加這個gltf model( https://poly.google.com/view/28RBIWE8jzc )。 下面的代碼是我能夠看到任何東西的唯一方法,我只看到 object 的一小部分。 如果有人知道需要更改什么,我將不勝感激。
import * as THREE from 'three';
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js';
import OrbitControls from 'three/examples/jsm/controls/OrbitControls.js'
import { Color } from 'three';
var camera, scene, renderer;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.set(0,10,20);
scene = new THREE.Scene();
// Instantiate a loader
var loader = new GLTFLoader();
// Load a glTF resource
loader.load( 'styles/baseball/Baseball.gltf', function ( gltf ) {
scene.add( gltf.scene );
} );
scene.background = new Color('blue')
var light = new THREE.AmbientLight(0x404040);
scene.add(light);
const light2 = new THREE.PointLight( 0xff0000, 1, 100 );
light2.position.set( 50, 50, 50 );
scene.add( light2 );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
document.body.addEventListener( 'keydown', onKeyDown, false );
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
function onKeyDown(){
console.log("press")
switch( event.keyCode ) {
case 83: // w
camera.position.z += 5;
break;
case 87: // s
camera.position.z -= 5;
break;
case 40: // down
camera.position.y -= 5;
break;
case 38: // up
camera.position.y += 5;
break;
}
}
棒球資產非常大,因此我建議您更改相機配置。 試試看:
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set( 0, 150, 350 );
或者,您也可以考慮在加載過程后縮小棒球的尺寸。 試試看:
gltf.scene.scale.setScalar( 0.01 );
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.