componentDidMount() { this.mount.appendChild( this.renderer.domElement ); }
componentWillUnmount() { window.removeEventListener('resize'); this.stop(); this.mount.removeChild(this.renderer.domElement); }
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(); }
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.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 ); }
const Controls = ({ target, enableZoom }) => { const { camera, gl } = useThree(); const ref = useRef(); useRender(() => { /* eslint no-unused-expressions: ["error", { "allowShortCircuit": true }] */ ref.current && ref.current.update(); camera.updateMatrixWorld(); }); return ( <orbitControls ref={ref} autoRotate={false} enableZoom={enableZoom} // maxZoom={0} // maxDistance={3.6} enablePan // maxPolarAngle={Math.PI / 2} // minPolarAngle={0} target={target} enableDamping args={[camera, gl.domElement]} /> ); }
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(); }
var controls = new OrbitControls(this.camera, this.renderer.domElement );
enabled={!resetCamera} enableDamping args={[camera, gl.domElement]} /> );
this.mount.appendChild( renderer.domElement );
var controls = new OrbitControls(this.camera, this.renderer.domElement );
componentDidMount() { this.mount.appendChild( this.renderer.domElement ); requestAnimationFrame(this.animate); }
componentDidMount() { this.mount.appendChild( this.renderer.domElement ); this.animate(); }
componentDidMount() { this.mount.appendChild( this.renderer.domElement ); }