// 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 );
}