'Resizing THREE.js Object using HTML div
I have two divs that I want to place side-by-side, and one of them contains my THREE.JS window/canvas. Basically, I don't want the THREE.js to take up the entire screen (only 50% of the width or however I adjust it), and so I want to do this with the div I put it in (threejs-container) or with HTML if there's another way. On the left side beside it, I want to be able to put an image or text. For some reason, the renderer canvas is not obeying my div and resizing. How do I fix this?
P.S. I know I can resize it manually using THREE.js, but I also want to be able to easily right-adjust my canvas, so I want to try to avoid doing that. The canvas centers itself on the page, and I also don't know how to change that.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>VRChat</title>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">
<div class="nav-wrapper">
<!-- WIP -->
</div>
<!-- This is everything below the nav bar -->
<div class="content-wrapper">
<div class="two-column-wrapper">
<div class="profile-image-wrapper">
<img src="https://data.whicdn.com/images/350807092/original.jpg">
</div>
<div id="threejs-container" style="width: 50%">
<script type="module">
import * as THREE from 'https://cdn.skypack.dev/[email protected]/build/three.module.js';
import { OrbitControls } from 'https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls.js';
import { FBXLoader } from 'https://cdn.skypack.dev/[email protected]/examples/jsm/loaders/FBXLoader.js';
let camera, scene, renderer;
init();
animate();
function init() {
// https://www.youtube.com/watch?v=FwcXultcBl4
camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.set(0, 1.3, 3);
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xa0a0a0 );
const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
hemiLight.position.set( 0, 200, 0 );
scene.add( hemiLight );
const dirLight = new THREE.DirectionalLight( 0xffffff );
dirLight.position.set( 0, -50, 100 ); // Adjust the direction from which light shines
dirLight.castShadow = true;
dirLight.shadow.camera.top = 180;
dirLight.shadow.camera.bottom = -100;
dirLight.shadow.camera.left = -120;
dirLight.shadow.camera.right = 120;
scene.add( dirLight );
// Ground
const mesh = new THREE.Mesh( new THREE.PlaneGeometry( 100, 100 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false} ) );
mesh.rotation.x = - Math.PI / 2;
mesh.receiveShadow = true;
scene.add(mesh);
const grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
grid.material.opacity = 0.2;
grid.material.transparent = true;
scene.add(grid);
// Model
const loader = new FBXLoader();
loader.load( 'model/minoru_utsugi_v1.8_Quest.fbx', function ( object ) {
object.traverse( function ( child ) {
if ( child.isMesh ) {
child.castShadow = true;
child.receiveShadow = true
}
} );
scene.add(object);
} );
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.getElementById("threejs-container").appendChild(renderer.domElement);
const controls = new OrbitControls( camera, renderer.domElement );
controls.target.set(0, 0.8, 0); // Change this to move camera position
controls.update();
window.addEventListener('resize', onWindowResize);
}
function onWindowResize() {
// Adjust three.js object size on window resize
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
</script>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|