// Setup WebGL bullshit setup() { this.app = { width: this.width, height: this.height, view_angle: 15, aspect: this.width/this.height, near: 0.1, far: 2000, }; // Camera this.setupCamera(10.0, 10.0/this.app.aspect); // Scene + Renderer this.scene = new THREE.Scene(); this.renderer = new THREE.WebGLRenderer({ antialias : true, canvas: this.el, }); this.renderer.setSize(this.width, this.height); this.renderer.setPixelRatio(1.5); this.renderer.setClearColor(0xFFFFFF); // Adding things this.addObjects({ x_min: -Math.PI, x_max: +Math.PI, y_min: -Math.PI, y_max: +Math.PI, }); }
var initScene = function ( character, dom ) { // var loaderDiv = document.getElementById( 'loaderProgress' ); const width = dom.offsetWidth; const height = dom.offsetHeight; const clock = new THREE.Clock(); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 40, width / height, 1, 100 ); camera.position.set( 0, 0.8, 3 ); const renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setSize( width, height ); dom.appendChild( renderer.domElement ); // controls = new THREE.OrbitControls( camera, renderer.domElement ); // controls.enableDamping = true; // controls.dampingFactor = 0.25; // controls.enableZoom = false; // controls.target = new THREE.Vector3( 0, 0.8, 0 ); scene.add( new THREE.HemisphereLight( 0x443333, 0x332222, 2 ), new THREE.AmbientLight( 0x999999 ), character.mesh ); ( function anim () { const elapsed = clock.getElapsedTime(); // if ( elapsed > 20 ) { return; } requestAnimationFrame( anim ); character.update(); renderer.render( scene, camera ); } )(); window.addEventListener( 'resize', function () { const width = dom.offsetWidth; const height = dom.offsetHeight; renderer.setSize( width, height ); camera.aspect = width / height; camera.updateProjectionMatrix(); } ); }
resize(width, height) { this.app.width = width; this.app.height = height; this.app.aspect = width/height; this.setupCamera(); this.camera.updateProjectionMatrix(); this.renderer.setSize(this.app.width, this.app.height); }
function init(){ renderer = new THREE.WebGLRenderer({ antialias : true }); if(document.getElementsByTagName('canvas').length){ elem[0].removeChild(document.getElementsByTagName('canvas')[0]); } elem[0].appendChild(renderer.domElement); renderer.setClearColor(0xfffffff); scene = new THREE.Scene(); camera = new THREE.OrthographicCamera(-150,150,112.5,-112.5,-100,10000); //left, right, top, bottom, near, far camera.position.set(15,25,50); camera.lookAt(new THREE.Vector3(0,2,0)); scene.add(camera); var loader = new THREE.OBJLoader(); loader.load('/' + scope.modelUrl, function(obj){ obj.traverse(function(child){ if(child instanceof THREE.Mesh){ //child.material.side = THREE.DoubleSide; child.material = new THREE.MeshPhongMaterial({ color: "#ffffff", emissive:"#555555", shininess:80, specular:0xeeeeee, shading:THREE.SmoothShading }) } }); mesh = obj; scene.add(obj); var light1 = new THREE.DirectionalLight(0xffffff); light1.position.set(20,10,5); scene.add(light1); var light2 = new THREE.DirectionalLight(0xffffff); light2.position.set(200,100,50); scene.add(light2); var light3 = new THREE.DirectionalLight(0xffffff); light3.position.set(2000,1000,500); scene.add(light3); var ambientLight = new THREE.AmbientLight(0x222222); scene.add(ambientLight); setInterval(draw,20); }); }
window.addEventListener( 'resize', function () { const width = dom.offsetWidth; const height = dom.offsetHeight; renderer.setSize( width, height ); camera.aspect = width / height; camera.updateProjectionMatrix(); } );
( function anim () { const elapsed = clock.getElapsedTime(); // if ( elapsed > 20 ) { return; } requestAnimationFrame( anim ); character.update(); renderer.render( scene, camera ); } )();
initScene() { this.camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000); this.camera.position.z = 300; // this.controls = new THREE.OrbitControls(this.camera); this.scene = new THREE.Scene(); this.scene.fog = new THREE.Fog(0x000000, 100, 600); this.renderer = new THREE.WebGLRenderer(); this.renderer.setSize(window.innerWidth, window.innerHeight); let container = document.querySelector('.container'); container.appendChild(this.renderer.domElement); window.addEventListener('resize', this.onResize.bind(this)); // window.addEventListener('click', this.onClick.bind(this)); window.addEventListener('mousedown', this.onMouseDown.bind(this)); this.onMouseMove = this.onMouseMove.bind(this); this.onMouseUp = this.onMouseUp.bind(this); }
componentDidUpdate(oldProps) { const { wireframe, color = "#ffffff", src, dimensions: { width, height } } = this.props; if (width !== oldProps.dimensions.width) { this.renderer.setSize(width, height); this.camera.aspect = width / height; this.camera.updateProjectionMatrix(); } if (src !== oldProps.src) { while (this.objectGroup.children.length > 0) { if (this.objectGroup.children[0]) { this.objectGroup.remove(this.objectGroup.children[0]); } else { break; } } this.objLoader.load(src, obj => { obj.scale.set(0.3, 0.3, 0.3); obj.children.forEach(child => { child.material = this.material; const geo = new THREE.EdgesGeometry(child.geometry); // or WireframeGeometry const wireframeMesh = new THREE.LineSegments(geo, this.wireMat); wireframeMesh.scale.set(0.3, 0.3, 0.3); this.objectGroup.add(obj); this.objectGroup.add(wireframeMesh); }); }); } this.material.color.setHex(parseInt(color.replace("#", ""), 16)); this.wireMat.color.setHex(parseInt(color.replace("#", ""), 16)); this.material.opacity = wireframe ? 0.3 : 1; this.wireMat.visible = wireframe ? true : false; this.material.needsUpdate = true; this.wireMat.needsUpdate = true; }
configureRenderer(canvas) { this.renderer = new THREE.WebGLRenderer({ canvas }); this.renderer.setSize( window.innerWidth, window.innerHeight ); this.controls = new TrackballControls(this.camera, canvas); this.controls.rotateSpeed = 5.0; this.controls.zoomSpeed = 20; this.controls.panSpeed = 2; this.controls.noZoom = false; this.controls.noPan = false; this.controls.staticMoving = true; this.controls.dynamicDampingFactor = 0.3; // Create a render() method that can be called from anywhere this.render = () => { requestAnimationFrame( this.render ); this.controls.update(); this.renderer.render(this.scene, this.camera); }; this.queryDataModel.fetchData(); }
constructor( width = 1024, height = 576 , loadZ = 100 ) { // scene and camera this.scene = new THREE.Scene(); this.camera = new THREE.PerspectiveCamera( 75, width / height, 1, 10000 ); this.camera.position.z = loadZ; this.camera.lookAt( new THREE.Vector3(0,0,0) ); // initialize renderer this.renderer = new THREE.WebGLRenderer(); this.renderer.setSize( width, height ); // setup controls this.controls = new OrbitControls( this.camera, this.renderer.domElement ); this.controls.enableKeys = false; // add to DOM document.getElementById('umbrella').appendChild( this.renderer.domElement ); // begin loop this.loop(); }
animate() { if(constants.DEV_MODE) { this.statsFPS.begin(); this.statsMB.begin(); } var time = Date.now(); var delta = ( time - this.prevTime ) / 1000; this.prevTime = time; this.viewer.update(time, delta); this.controller.update(delta); this.renderer.render(this.scene, this.camera); if(constants.DEV_MODE) { this.statsFPS.end(); this.statsMB.end(); } requestAnimationFrame(util.bind(this, this.animate)); }
init() { // canvas this.canvas = document.getElementById('canvas') // clock this.clock = new THREE.Clock() // renderer this.renderer = new THREE.WebGLRenderer({ canvas: this.canvas, antialias: false }) //this.renderer.setPixelRatio(window.devicePixelRatio) this.renderer.setSize(this.screenWidth, this.screenHeight) // camera this.camera = new THREE.PerspectiveCamera(70, this.screenWidth / this.screenHeight, 1, 1000) this.camera.position.z = 500 // scene this.scene = new THREE.Scene() // create world this.createWorld(); // render & animation ticker TweenMax.ticker.fps(60) TweenMax.ticker.addEventListener('tick', () => { this.tick() }) // resize handler, resize once this.resizeHandler() $(window).resize(() => { this.resizeHandler() }) // sweep this.sweep() // fade out overlay TweenMax.to($('#overlay'), 2.0, {delay: 1.0, opacity: 0}); }
constructor () { this.clock = new THREE.Clock; this.stats = new Stats(); this.stats.domElement.style.position = 'absolute'; this.stats.domElement.style.top = '0px'; document.body.appendChild( this.stats.domElement ); this.scene = new THREE.Scene(); this.camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 ); this.camera.position.z = 1000; this.renderer = new THREE.WebGLRenderer({ antialias: true }); this.renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( this.renderer.domElement ); this.rtt = new RTT( frameSize.x, frameSize.y ); this.mesh = this.newMesh( this.rtt ); this.scene.add( this.mesh ); this.controls = new (OrbitControls(THREE))( this.camera, this.renderer.domElement ); //controls.addEventListener( 'change', render ); // add this only if there is no animation loop (requestAnimationFrame) this.controls.enableDamping = true; this.controls.dampingFactor = 0.25; this.controls.enableZoom = false; window.addEventListener( 'resize', this.onWindowResize.bind(this), false ); this.onWindowResize(); this.animate(); }
function render () { renderer.render(scene, camera) }
import THREE from 'three' const FACE_RENDER_WIDTH = 80 const FACE_RENDER_HEIGHT = 80 const camera = new THREE.PerspectiveCamera(70, FACE_RENDER_WIDTH / FACE_RENDER_HEIGHT, 1, 1000) camera.position.z = 3.2 const scene = new THREE.Scene() const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }) renderer.setPixelRatio(window.devicePixelRatio) renderer.setSize(FACE_RENDER_WIDTH, FACE_RENDER_HEIGHT) const ambient_light = new THREE.AmbientLight(0x333333) scene.add(ambient_light) const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5) directionalLight.position.set(0, -1, 0) scene.add(directionalLight) const point_light = new THREE.PointLight(0xffffff) point_light.position.x = 2 point_light.position.y = 5 point_light.position.z = 10 scene.add(point_light) const group = new THREE.Object3D() scene.add(group)
componentDidMount() { const { viewPort, size, camera, } = this.props; this.units = {}; this.selectedableUnits = {}; this.renderer = new THREE.WebGLRenderer({antialias: true}); this.cameraGroup = new THREE.Group(); this.camera = new THREE.OrthographicCamera( (viewPort.width / - 2) * camera.zoom, (viewPort.width / 2) * camera.zoom, (viewPort.height / 2) * camera.zoom, (viewPort.height / - 2) * camera.zoom, 1, 10000 ); this.cameraGroup.add(this.camera); this.scene = new THREE.Scene(); this.floor = new THREE.Mesh( new THREE.BoxGeometry(size.x, 1, size.z), new THREE.MeshLambertMaterial({color: 0x0A8F15}) ); this.group = new THREE.Group(); var ambient = new THREE.AmbientLight(0xffffff, 0.1); var directionalLight = new THREE.DirectionalLight(0xffffff, 1); var lightPosition = new THREE.Vector3(1000, 1500, 500); this.loadAssets() .then((assets) => { this.env.assets = assets; const id = this.props.addUnitAtPoint('deer', new THREE.Vector3(300, 0, 300)); this.props.findFood(id); }); this.renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0)); this.renderer.shadowMap.enabled = true; this.renderer.shadowMap.type = THREE.PCFSoftShadowMap; this.renderer.gammaInput = true; this.renderer.gammaOutput = true; this.cameraGroup.position.set(camera.position.x, camera.position.y, camera.position.z); this.cameraGroup.rotation.set(0, camera.rotation, 0); this.camera.position.set(camera.translate.x, camera.translate.y, camera.translate.z); this.camera.lookAt(new THREE.Vector3(0, 0, 0)); directionalLight.position.copy(lightPosition); directionalLight.target = this.floor; directionalLight.castShadow = true; directionalLight.shadow.camera.near = 2; directionalLight.shadow.camera.far = 10000; directionalLight.shadow.camera.left = -1000; directionalLight.shadow.camera.right = 1000; directionalLight.shadow.camera.top = 1000; directionalLight.shadow.camera.bottom = -1000; directionalLight.distance = 0; directionalLight.shadow.mapSize.Height = 1024; directionalLight.shadow.mapSize.Width = 1024; this.floor.receiveShadow = true; this.floor.position.set(size.x / 2, -0.5, size.z / 2); this.scene.add(this.cameraGroup); this.scene.add(this.floor); this.scene.add(ambient); this.scene.add(directionalLight); this.scene.add(this.group); this.refs.holder.appendChild(this.renderer.domElement); this.renderer.setSize(viewPort.width, viewPort.height); this.env = makeEnv(this.renderer, this.scene, this.camera, global.store, global.timeMachine); this.env.render(); this.env.timeMachine.subscribe(() => this.onTime()); }
componentWillReceiveProps(nextProps) { if (nextProps.mouseKey === 'LMB' && this.props.mouseKey !== nextProps.mouseKey) { const item = this.props.findItemUnderMouse(this.scene, this.camera); if (item && item.object !== this.floor) { const object = find(this.units, (unit) => unit.children[0] === item.object ); if (object) { object.children[1].visible = 1; } } else if (item) { this.props.cursorClicked(item.point); } } if (this.props.hotKey !== nextProps.hotKey) { if (nextProps.hotKey === 'KeyA') { this.props.moveCamera('left'); } else if (nextProps.hotKey === 'KeyW') { this.props.moveCamera('forward'); } else if (nextProps.hotKey === 'KeyS') { this.props.moveCamera('backward'); } else if (nextProps.hotKey === 'KeyD') { this.props.moveCamera('right'); } else if (nextProps.hotKey === 'KeyQ') { this.props.rotateCamera(-Math.PI / 32); } else if (nextProps.hotKey === 'KeyE') { this.props.rotateCamera(Math.PI / 32); } else if (nextProps.hotKey === 'KeyZ') { this.props.zoomCamera(-0.1); } else if (nextProps.hotKey === 'KeyC') { this.props.zoomCamera(0.1); } this.props.clearHotKey(); } if (nextProps.camera !== this.props.camera) { this.cameraGroup.position.set(nextProps.camera.position.x, nextProps.camera.position.y, nextProps.camera.position.z); this.cameraGroup.rotation.set(0, nextProps.camera.rotation, 0); this.camera.position.set(nextProps.camera.translate.x, nextProps.camera.translate.y, nextProps.camera.translate.z); this.env.render(); } if (nextProps.population !== this.props.population) { const modifiedUnits = difference( values(nextProps.population), values(this.props.population) ); const removedUnits = difference( Object.keys(this.props.population), Object.keys(nextProps.population) ); modifiedUnits.forEach((unit) => { if (!this.props.population[unit.id]) { const Unit = Units[unit.type]; const unitObject = new Unit(unit, this.env); this.group.add(unitObject.node); this.units[unit.id] = unitObject; } }); removedUnits.forEach((id) => { if (this.units[id]) { this.group.remove(this.units[id].node); delete this.units[id]; } }); } if (nextProps.viewPort !== this.props.viewPort || nextProps.camera.zoom !== this.props.camera.zoom) { const { width, height, } = nextProps.viewPort; this.camera.left = (width / - 2) * nextProps.camera.zoom; this.camera.right = (width / 2) * nextProps.camera.zoom; this.camera.top = (height / 2) * nextProps.camera.zoom; this.camera.bottom = (height / - 2) * nextProps.camera.zoom; this.renderer.setSize(width, height); this.camera.updateProjectionMatrix(); this.env.render(); } }
function init() { if(settings.useStats) { _stats = new Stats(); css(_stats.domElement, { position : 'absolute', left : '0px', top : '0px', zIndex : 2048 }); document.body.appendChild( _stats.domElement ); } _bgColor = new THREE.Color(settings.bgColor); settings.mouse = new THREE.Vector2(0,0); settings.mouse3d = _ray.origin; _renderer = new THREE.WebGLRenderer({ // transparent : true, // premultipliedAlpha : false, antialias : true }); _renderer.setClearColor(settings.bgColor); _renderer.shadowMap.type = THREE.PCFSoftShadowMap; _renderer.shadowMap.enabled = true; document.body.appendChild(_renderer.domElement); _scene = new THREE.Scene(); _scene.fog = new THREE.FogExp2( settings.bgColor, 0.001 ); _camera = new THREE.PerspectiveCamera( 45, 1, 10, 3000); _camera.position.set(300, 60, 300).normalize().multiplyScalar(1000); settings.camera = _camera; settings.cameraPosition = _camera.position; fboHelper.init(_renderer); postprocessing.init(_renderer, _scene, _camera); simulator.init(_renderer); particles.init(_renderer); _scene.add(particles.container); lights.init(_renderer); _scene.add(lights.mesh); floor.init(_renderer); floor.mesh.position.y = -100; _scene.add(floor.mesh); _control = new OrbitControls( _camera, _renderer.domElement ); _control.target.y = 50; _control.maxDistance = 1000; _control.minPolarAngle = 0.3; _control.maxPolarAngle = Math.PI / 2 - 0.1; _control.noPan = true; _control.update(); _gui = new dat.GUI(); if(settings.isMobile) { _gui.close(); _control.enabled = false; } var simulatorGui = _gui.addFolder('Simulator'); simulatorGui.add(settings.query, 'amount', settings.amountList).onChange(function(){ if (confirm('It will restart the demo')) { window.location.href = window.location.href.split('#')[0] + encode(settings.query).replace('?', '#'); window.location.reload(); } }); simulatorGui.add(settings, 'speed', 0, 3).listen(); simulatorGui.add(settings, 'dieSpeed', 0.0005, 0.05).listen(); simulatorGui.add(settings, 'radius', 0.2, 3); simulatorGui.add(settings, 'curlSize', 0.001, 0.05).listen(); simulatorGui.add(settings, 'attraction', -2, 2); simulatorGui.add(settings, 'followMouse').name('follow mouse'); simulatorGui.open(); var renderingGui = _gui.addFolder('Rendering'); renderingGui.add(settings, 'shadowDarkness', 0, 1).name('shadow'); renderingGui.add(settings, 'useTriangleParticles').name('new particle'); renderingGui.addColor(settings, 'color1').name('base Color'); renderingGui.addColor(settings, 'color2').name('fade Color'); renderingGui.addColor(settings, 'bgColor').name('background Color'); renderingGui.open(); var postprocessingGui = _gui.addFolder('Post-Processing'); postprocessingGui.add(settings, 'fxaa').listen(); motionBlur.maxDistance = 120; motionBlur.motionMultiplier = 7 ; motionBlur.linesRenderTargetScale = settings.motionBlurQualityMap[settings.query.motionBlurQuality]; var motionBlurControl = postprocessingGui.add(settings, 'motionBlur'); var motionMaxDistance = postprocessingGui.add(motionBlur, 'maxDistance', 1, 300).name('motion distance').listen(); var motionMultiplier = postprocessingGui.add(motionBlur, 'motionMultiplier', 0.1, 15).name('motion multiplier').listen(); var motionQuality = postprocessingGui.add(settings.query, 'motionBlurQuality', settings.motionBlurQualityList).name('motion quality').onChange(function(val){ motionBlur.linesRenderTargetScale = settings.motionBlurQualityMap[val]; motionBlur.resize(); }); var controlList = [motionMaxDistance, motionMultiplier, motionQuality]; motionBlurControl.onChange(enableGuiControl.bind(this, controlList)); enableGuiControl(controlList, settings.motionBlur); var bloomControl = postprocessingGui.add(settings, 'bloom'); var bloomRadiusControl = postprocessingGui.add(bloom, 'blurRadius', 0, 3).name('bloom radius'); var bloomAmountControl = postprocessingGui.add(bloom, 'amount', 0, 3).name('bloom amount'); controlList = [bloomRadiusControl, bloomAmountControl]; bloomControl.onChange(enableGuiControl.bind(this, controlList)); enableGuiControl(controlList, settings.bloom); postprocessingGui.open(); function enableGuiControl(controls, flag) { controls = controls.length ? controls : [controls]; var control; for(var i = 0, len = controls.length; i < len; i++) { control = controls[i]; control.__li.style.pointerEvents = flag ? 'auto' : 'none'; control.domElement.parentNode.style.opacity = flag ? 1 : 0.1; } } var preventDefault = function(evt){evt.preventDefault();this.blur();}; Array.prototype.forEach.call(_gui.domElement.querySelectorAll('input[type="checkbox"],select'), function(elem){ elem.onkeyup = elem.onkeydown = preventDefault; elem.style.color = '#000'; }); _logo = document.querySelector('.logo'); _instruction = document.querySelector('.instruction'); document.querySelector('.footer').style.display = 'block'; _footerItems = document.querySelectorAll('.footer span'); window.addEventListener('resize', _onResize); window.addEventListener('mousemove', _onMove); window.addEventListener('touchmove', _bindTouch(_onMove)); window.addEventListener('keyup', _onKeyUp); _time = Date.now(); _onResize(); _loop(); }
function init() { container = document.getElementById('container'); camera = new THREE.PerspectiveCamera(27, window.innerWidth / window.innerHeight, 5, 3500); camera.position.z = 2750; scene = new THREE.Scene(); scene.fog = new THREE.Fog(0x050505, 2000, 3500); var particles = 500000; var geometry = new THREE.BufferGeometry(); var positions = new Float32Array(particles * 3); var colors = new Float32Array(particles * 3); var color = new THREE.Color(); var n = 1000, n2 = n / 2; // particles spread in the cube for (var i = 0; i < positions.length; i += 3) { // positions var x = Math.random() * n - n2; var y = Math.random() * n - n2; var z = Math.random() * n - n2; positions[i] = x; positions[i + 1] = y; positions[i + 2] = z; // colors var vx = (x / n) + 0.5; var vy = (y / n) + 0.5; var vz = (z / n) + 0.5; color.setRGB(vx, vy, vz); colors[i] = color.r; colors[i + 1] = color.g; colors[i + 2] = color.b; } tree.initAsync(positions, listenToMouse); geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3)); geometry.addAttribute('color', new THREE.BufferAttribute(colors, 3)); geometry.computeBoundingSphere(); var material = new THREE.PointCloudMaterial({ size: 15, vertexColors: THREE.VertexColors }); particleSystem = new THREE.PointCloud(geometry, material); scene.add(particleSystem); particleArray = [particleSystem]; renderer = new THREE.WebGLRenderer({ antialias: false }); renderer.setClearColor(scene.fog.color); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); container.appendChild(renderer.domElement); stats = new Stats(); stats.domElement.style.position = 'absolute'; stats.domElement.style.top = '0px'; container.appendChild(stats.domElement); window.addEventListener('resize', onWindowResize, false); }
var Stats = require('stats.js'); var Dat = require('dat-gui'); var Level = require('../objects/level'); var Moveable = require('../objects/moveable'); global._ = _; global.THREE = THREE; require('../plugins/OrbitControls'); var width = window.innerWidth; var height = window.innerHeight; var clock = new THREE.Clock(); var scene = new THREE.Scene(); var renderer = new THREE.WebGLRenderer(); renderer.setClearColor(0xf0f0f0); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(width, height); document.body.appendChild(renderer.domElement); var camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 10000); // var camera = new THREE.OrthographicCamera(width / - 2, width / 2, height / 2, height / - 2, 1, 10000); camera.position.x = 200; camera.position.y = 200; camera.position.z = 200; var controls = new THREE.OrbitControls(camera); controls.damping = 0.2; var stats = new Stats();
resize() { this._width = window.innerWidth; this._height = window.innerHeight; this._renderer.setSize(this._width, this._height); this._game.resize(this._width, this._height); }
function init() { bindEventsAndPlugins() setupImageDropImport(document.body) container = document.createElement( 'div' ) document.body.appendChild( container ) camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 ) camera.position.x = radius * Math.sin( theta * Math.PI / 360 ) * Math.cos( phi * Math.PI / 360 ) camera.position.y = radius * Math.sin( phi * Math.PI / 360 ) camera.position.z = radius * Math.cos( theta * Math.PI / 360 ) * Math.cos( phi * Math.PI / 360 ) scene = new THREE.Scene() window.scene = scene // Grid var size = 500, step = 50 var geometry = new THREE.Geometry() for ( var i = - size; i <= size; i += step ) { geometry.vertices.push( new THREE.Vector3( - size, 0, i ) ) geometry.vertices.push( new THREE.Vector3( size, 0, i ) ) geometry.vertices.push( new THREE.Vector3( i, 0, - size ) ) geometry.vertices.push( new THREE.Vector3( i, 0, size ) ) } var material = new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) var line = new THREE.Line( geometry, material ) line.type = THREE.LinePieces grid = line scene.add( line ) // Plane projector = new THREE.Projector() plane = new THREE.Mesh( new THREE.PlaneGeometry( 1000, 1000 ), new THREE.MeshBasicMaterial() ) plane.rotation.x = - Math.PI / 2 plane.visible = false plane.isPlane = true scene.add( plane ) mouse2D = new THREE.Vector3( 0, 10000, 0.5 ) // Brush var brushMaterials = [ new CubeMaterial( { vertexColors: THREE.VertexColors, opacity: 0.5, transparent: true } ), new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true } ) ] brushMaterials[0].color.setRGB(colors[0][0], colors[0][1], colors[0][2]) brush = THREE.SceneUtils.createMultiMaterialObject( cube, brushMaterials ) brush.isBrush = true brush.position.y = 2000 brush.overdraw = false scene.add( brush ) // Lights var ambientLight = new THREE.AmbientLight( 0x606060 ) scene.add( ambientLight ) var directionalLight = new THREE.DirectionalLight( 0xffffff ); directionalLight.position.set( 1, 0.75, 0.5 ).normalize(); scene.add( directionalLight ); // var directionalLight = new THREE.DirectionalLight( 0xffffff ) // directionalLight.position.x = Math.random() - 0.5 // directionalLight.position.y = Math.random() - 0.5 // directionalLight.position.z = Math.random() - 0.5 // directionalLight.position.normalize() // scene.add( directionalLight ) // // var directionalLight = new THREE.DirectionalLight( 0x808080 ) // directionalLight.position.x = Math.random() - 0.5 // directionalLight.position.y = Math.random() - 0.5 // directionalLight.position.z = Math.random() - 0.5 // directionalLight.position.normalize() // scene.add( directionalLight ) var hasWebGL = ( function () { try { return !! window.WebGLRenderingContext && !! document.createElement( 'canvas' ).getContext( 'experimental-webgl' ); } catch( e ) { return false; } } )() if (hasWebGL) renderer = new THREE.WebGLRenderer({antialias: true}) else renderer = new THREE.CanvasRenderer() renderer.setSize( window.innerWidth, window.innerHeight ) container.appendChild(renderer.domElement) renderer.domElement.addEventListener( 'mousemove', onDocumentMouseMove, false ) renderer.domElement.addEventListener( 'mousedown', onDocumentMouseDown, false ) renderer.domElement.addEventListener( 'mouseup', onDocumentMouseUp, false ) document.addEventListener( 'keydown', onDocumentKeyDown, false ) document.addEventListener( 'keyup', onDocumentKeyUp, false ) window.addEventListener('DOMMouseScroll', mousewheel, false); window.addEventListener('mousewheel', mousewheel, false); function mousewheel( event ) { // prevent zoom if a modal is open if ($('.modal').hasClass('in')) return zoom(event.wheelDeltaY || event.detail) } window.addEventListener( 'resize', onWindowResize, false ) if ( window.location.hash ) buildFromHash() updateHash() }
animate(timestamp) { requestAnimationFrame( this.animate.bind(this) ); this._controls.update(); this._renderer.render( this._scene, this._camera ); }
updateSceneSize(width, height) { this.renderer.setSize(width, height, false); }
renderLoop() { this.requestId = window.requestAnimationFrame(this.renderLoop.bind(this)); this.renderer.render(this.scene, this.camera); }
import * as THREE from 'three'; import 'normalize.css'; import './styles/main.scss'; const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer(); const clearColor = CLEARCOLOR; camera.position.z = 10; renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(clearColor, 1); const objects = []; for (let a = 0; a <= 18; a++) { for (let b = 0; b <= 13; b++) { const geometry = new THREE.TorusGeometry(0.6, 0.2, 10, 6); const material = new THREE.MeshLambertMaterial({ color: COLOR1 }); const object = new THREE.Mesh(geometry, material); object.data = {a,b}; objects.push(object); scene.add(objects[objects.length - 1]); }
// Dumb draw draw() { this.renderer.render(this.scene, this.camera); }
window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }, false);
const tweenr = Tweenr({ defaultEase: 'expoOut' }) const vertShader = fs.readFileSync(__dirname + '/vert.glsl', 'utf8') const fragShader = fs.readFileSync(__dirname + '/frag.glsl', 'utf8') let files = fs.readdirSync(__dirname + '/svg/entypo-social') .filter(file => /\.svg$/.test(file)) files = shuffle(files) document.querySelector('.count').innerText = files.length const canvas = document.querySelector('canvas') canvas.addEventListener('touchstart', (ev) => ev.preventDefault()) canvas.addEventListener('contextmenu', (ev) => ev.preventDefault()) const renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true, devicePixelRatio: window.devicePixelRatio }) renderer.setClearColor(0x97c2c5, 1) const scene = new THREE.Scene() const camera = new THREE.PerspectiveCamera(50, 1, 0.01, 100) camera.position.set(0, 0, 5) let pointer = 0 createApp() nextSvgMesh() function nextSvgMesh (delay) { delay = delay || 0 var file = files[pointer++ % files.length]
onWindowResize() { this._camera.aspect = window.innerWidth / window.innerHeight; this._camera.updateProjectionMatrix(); this._renderer.setSize( window.innerWidth, window.innerHeight ); }