Три проблемы размера рендеринга JS. Попытка установить идеальный размер ⇐ CSS

[Anonymous]

Я работал над тремя моделью JS, чтобы встроить модель на мой сайт. Наконец, сделал это, но есть только одна проблема. Я не мог получить рендеринг. Setize (), чтобы соответствовать моему div. Другими словами, я вижу свиток, которую я не хочу видеть там. Как мне установить, чтобы он идеально подходил на мой холст? Я пытался следовать ответу, как указано в посте, но ничего не происходит. Затем я отправился в три документации JS, последовала за тем, что было указано там. < /p>

.setSize ( width : Integer, height : Integer, updateStyle : Boolean ) : null
< /code>

все еще не мог понять это. Почему даже код в документации не работает? Но я не уверен, что нашел ли я трюк, я просто играл с значениями SetSize. < /P>

renderer.setSize( window.innerWidth * 0.99 ,window.innerHeight * 0.99);
< /code>

Как вы можете видеть, я добавил * 0,99, и больше нет полосы прокрутки! Не хотел сделать это так, но какой правильный код для его настройки? Вот мой код < /p>





THEE JS BOX APP

body { margin: 0; width: 100%; height: 100% }









// CREATING AN EMPTY SCENE
var scene = new THREE.Scene();

// CAMERA
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 9000 );
camera.position.z = 200;

// ORBIT CONTROL
var controls = new THREE.OrbitControls( camera );

// RENDERER
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor("#ffffff");
renderer.setSize( window.innerWidth * 0.99 ,window.innerHeight * 0.99);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFShadowMap;

// APPEND RENDERER TO DOM
document.body.appendChild( renderer.domElement );

// WINDOW RESIZE
window.addEventListener( 'resize', onWindowResize, false );

function onWindowResize(){
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}

// instantiate a loader
var loader = new THREE.OBJLoader();

// load a resource
loader.load(
// resource URL
'img/logovoivode1.obj',
// called when resource is loaded
function ( object ) {
scene.add( object );
},
// called when loading is in progresses
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
// called when loading has errors
function ( error ) {
console.log( 'An error happened' );
}
);

// ***************************** LIGHTING **********************************//

// White directional light at half intensity shining from the top.
//var directionalLight = new THREE.DirectionalLight( 0xffffff, 5 );
//scene.add( directionalLight );

var light = new THREE.AmbientLight( 0xffffff, 0.5); // soft white light
scene.add( light );

var pointlight = new THREE.PointLight( 0xffffff, 0.5, 1000);
light.position.set(10, 0, 25);
scene.add(pointlight);

//var DLight = new THREE.DirectionalLight( 0xffffff, 50);
//scene.add(DLight);

// var spotlight = new THREE.SpotLight( 0xffffff, 0.5, 1000, 0.3);

// ************************ END-OF-LIGHTING *****************************//

// CREATING A BOX
// var geometry = new THREE.BoxGeometry(1, 1, 1);
// var material = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe:true});
// var cube = new THREE.Mesh( geometry, material);

// ADD CUBE TO THE SCENE
// scene.add(cube);
// ANIMATION LOOP

function animate() {
requestAnimationFrame( animate );
//scene.rotation.x += 0.01;
//scene.rotation.y += 0.01;
renderer.render( scene, camera );
}
animate();





Подробнее здесь: https://stackoverflow.com/questions/545 ... rfect-size