Texonom
Texonom
/
Application
Application
/Network Science/ICT/Computer Network/Internet/WWW/Web Development/Web API/Web Media API/WebGL/WebGL Framework/Three js/
Three js Resize
Search

Three js Resize

Creator
Creator
Seonglae Cho
Created
Created
2020 Jul 8 0:29
Editor
Editor
Seonglae Cho
Edited
Edited
2024 Mar 1 14:13
Refs
Refs
Three.js Resizing Canvas
I applied Shawn Whinnery's answer to my needs with React JS: Start listener onMount: componentDidMount() { window.addEventListener('resize', this.handleResize, false) } Remove listener onUnmount (because we like garbage collection): componentWillUnmount() { window.removeEventListener('resize', this.handleResize, false) } Install handler function: handleResize = () => { this.camera.aspect = window.innerWidth / window.innerHeight this.camera.updateProjectionMatrix() this.renderer.setSize(window.innerWidth, window.innerHeight) } Fat arrow syntax is used to avoid binding this.
Three.js Resizing Canvas
https://stackoverflow.com/questions/20290402/three-js-resizing-canvas
Three.js Resizing Canvas
 
 
 
 
 
 
 
 

Recommendations

Texonom
Texonom
/
Application
Application
/Network Science/ICT/Computer Network/Internet/WWW/Web Development/Web API/Web Media API/WebGL/WebGL Framework/Three js/
Three js Resize
Copyright Seonglae Cho