constructor(props) { super(props); this.state = {}; this.animate = this.animate.bind(this); this.scene = new THREE.Scene(); this.camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); this.camera.position.set( 0, 0, 60 ); this.renderer = new THREE.WebGLRenderer(); this.renderer.setSize( window.innerWidth, window.innerHeight ); }
function buildRender({ width, height }) { const renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true, alpha: true }); const DPR = window.devicePixelRatio ? window.devicePixelRatio : 1; renderer.setPixelRatio(DPR); renderer.setSize(width, height); renderer.gammaInput = true; renderer.gammaOutput = true; return renderer; }
constructor(scene, canvas) { // Properties this.scene = scene this.canvas = canvas // Create WebGL renderer and set its antialias this.threeRenderer = new THREE.WebGLRenderer({ antialias: false, canvas: this.canvas }) // Set clear color to fog to enable fog or to hex color for no fog this.threeRenderer.setClearColor(scene.fog.color) this.threeRenderer.setPixelRatio(window.devicePixelRatio) // For retina this.threeRenderer.setSize(canvas.clientWidth, canvas.clientHeight, false) // Get anisotropy for textures // Config.maxAnisotropy = this.threeRenderer.capabilities.getMaxAnisotropy() // Initial size update set to canvas container this.updateSize() // Listeners document.addEventListener('DOMContentLoaded', this.updateSize, false) }
componentDidMount() { const width = this.mount.clientWidth; const height = this.mount.clientHeight; this.scene = new THREE.Scene(); this.camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000); this.renderer = new THREE.WebGLRenderer({ antialias: true }); this.loader = new GLTFLoader(); this.controls = new OrbitControls(this.camera, this.renderer.domElement); // Add a light source!!! // const light = new THREE.HemisphereLight(0xffffbb, 0x080820, 1); this.scene.add(light); this.camera.position.z = 2; this.camera.position.y = 0.7; this.camera.position.x = 0.7; this.loadModel(); this.renderer.setSize(width, height); window.addEventListener('resize', this.handleResize); this.mount.appendChild(this.renderer.domElement); this.init(); }
constructor(scene, container) { // Properties this.scene = scene; this.container = container; // Create WebGL renderer and set its antialias this.threeRenderer = new THREE.WebGLRenderer({antialias: true}); // Set clear color to fog to enable fog or to hex color for no fog this.threeRenderer.setClearColor(scene.fog.color); this.threeRenderer.setPixelRatio(window.devicePixelRatio); // For retina // Appends canvas container.appendChild(this.threeRenderer.domElement); // Shadow map options this.threeRenderer.shadowMap.enabled = true; this.threeRenderer.shadowMap.type = THREE.PCFSoftShadowMap; // Get anisotropy for textures Config.maxAnisotropy = this.threeRenderer.capabilities.getMaxAnisotropy(); // Initial size update set to canvas container this.updateSize(); // Listeners document.addEventListener('DOMContentLoaded', () => this.updateSize(), false); window.addEventListener('resize', () => this.updateSize(), false); }
constructor(props) { super(props); this.state = {}; this.scene = new t3.Scene(); this.camera = new t3.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); this.renderer = new t3.WebGLRenderer(); this.renderer.setSize( window.innerWidth, window.innerHeight ); // Load the Orbitcontroller // eslint-disable-next-line var controls = new OrbitControls(this.camera, this.renderer.domElement ); const geometry = new t3.BoxGeometry( 4, 1 , 1); const material = new t3.MeshBasicMaterial( { color: 0x00ff00, wireframe: true } ); this.cube = new t3.Mesh( geometry, material ); this.scene.add( this.cube ); this.camera.position.z = 5; const animate = () => { requestAnimationFrame( animate ); this.cube.rotation.x += 0.01; this.cube.rotation.y += 0.01; this.renderer.render( this.scene, this.camera ); }; animate(); }
this.rootTransform = transform2mapbox([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]); // identity matrix tranformed to mapbox scale this.renderer = new THREE.WebGLRenderer({ canvas: map.getCanvas(), context: gl
constructor(props) { super(props); this.state = {}; this.scene = new t3.Scene(); this.camera = new t3.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); this.camera.position.set( 0, 0, 100 ); this.camera.lookAt( 0, 0, 0 ); this.renderer = new t3.WebGLRenderer(); this.renderer.setSize( window.innerWidth, window.innerHeight ); // Load the Orbitcontroller // eslint-disable-next-line var controls = new OrbitControls(this.camera, this.renderer.domElement ); const material = new t3.LineBasicMaterial( { color: 0xff0000} ); const geometry = new t3.Geometry(); geometry.vertices.push(new t3.Vector3( -10, 0, 0) ); geometry.vertices.push(new t3.Vector3( 0, 10, 0) ); geometry.vertices.push(new t3.Vector3( 10, 0, 0) ); var line = new t3.Line( geometry, material ); this.scene.add( line ); this.renderer.render( this.scene, this.camera ); }
this.renderer = new t3.WebGLRenderer(); this.renderer.setSize( window.innerWidth, window.innerHeight ); this.renderer.setClearColor( 0xfff6e6 );
componentDidMount() { var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight );
renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setClearColor("#000000"); renderer.setSize(width, height);
renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setClearColor("#000000"); renderer.setSize(width, height);
this.renderer = new THREE.WebGLRenderer(); this.renderer.setSize( window.innerWidth, window.innerHeight );
renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setClearColor("#000000"); renderer.setSize(width, height);