public override void Init() { var width = Width; var height = Height; var info = Document.CreateElement("div"); info.InnerHTML = "Drag to change the view"; Container.AppendChild(info); camera = new THREE.PerspectiveCamera(70, width / height, 1, 1000); camera.position.y = 150; camera.position.z = 500; controls = new THREE.TrackballControls(camera); scene = new THREE.Scene(); THREE.PointLight light = new THREE.PointLight(0xffffff); light.position.set(500, 500, 500); scene.add(light); THREE.MeshLambertMaterial mat = new THREE.MeshLambertMaterial(); mat.shading = THREE.ShadingType.FlatShading; sphere = new THREE.Mesh(new THREE.SphereGeometry(200, 20, 10), mat); scene.add(sphere); THREE.MeshBasicMaterial mat2 = new THREE.MeshBasicMaterial(); mat2.color = 0xe0e0e0; THREE.Mesh plane = new THREE.Mesh(new THREE.PlaneBufferGeometry(400, 400), mat2); plane.position.y = -200; plane.rotation.x = -Math.PI / 2; scene.add(plane); renderer = new THREE.CanvasRenderer(); renderer.setClearColor(0xf0f0f0); renderer.setSize(width, height); effect = new THREE.AsciiEffect(renderer, " +-Hgxyz"); effect.setSize(width, height); Container.AppendChild(effect.domElement); }
/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { Native.body.Clear(); Native.body.style.margin = "0px"; // http://www.highlander.co.uk/blog/2011/09/23/learning-three-js/ //this sets the canvas size. var WIDTH = Native.window.Width; var HEIGHT = Native.window.Height; // camera attributes var VIEW_ANGLE = 45; var ASPECT = WIDTH / HEIGHT; var NEAR = 0.1; var FAR = 10000; var renderer = new THREE.WebGLRenderer(); //I am choosing the WebGL renderer here, but you have others to choose from var camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR); //these variables have been set at the top of our script var scene = new THREE.Scene(); //create a new scene // the camera starts at 0,0,0 so we need to pull back camera.position.z = 200; // start the renderer renderer.setSize(WIDTH, HEIGHT); // http://www.highlander.co.uk/blog/2011/09/23/learning-three-js/ //create materials var material = new THREE.MeshLambertMaterial(new { color = 0xCC0000 }); //var material = new THREE.MeshBasicMaterial({color: 0xCC0000}); //gives you just a flat colour – ugly // create a new mesh with sphere geometry var radius = 50; var segments = 16; var rings = 16; var mesh = new THREE.Mesh(new THREE.SphereGeometry(radius, segments, rings), material).AttachTo(scene); //scene.addChild(mesh); scene.add(mesh); renderer.domElement.AttachToDocument(); var pointLight = new THREE.PointLight(0xFFFFFF); // set its position pointLight.position.x = 50; pointLight.position.y = 50; pointLight.position.z = 130; // add to the scene scene.add(pointLight); //scene.addLight(pointLight); // render our scene Native.window.onframe += delegate { renderer.render(scene, camera); }; }
void InitializeContent() { #region make sure we atleast have our invisible DOM var page_song = new nyanlooped { loop = true }; var page_song2 = new nyanslow { loop = true }; #endregion #region container Native.document.body.style.overflow = IStyle.OverflowEnum.hidden; var container = new IHTMLDiv(); container.AttachToDocument(); container.style.backgroundColor = "#003366"; container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height); #endregion var renderer = new THREE.WebGLRenderer(); renderer.setSize(Native.window.Width, Native.window.Height); renderer.domElement.AttachTo(container); var numStars = 10; var numRainChunks = 30; var mouseX = 0; var mouseY = 0; var clock = new Stopwatch(); clock.Start(); var deltaSum = 0f; //tick=0, var frame = 0; var running = true; #region onmousemove Native.document.onmousemove += e => { if (IsDisposed) return; var windowHalfX = Native.window.Width / 2; var windowHalfY = Native.window.Height / 2; mouseX = (e.CursorX - windowHalfX); mouseY = (e.CursorY - windowHalfY); }; #endregion Action PlaySomething = delegate { if (running) { page_song.play(); page_song2.pause(); } else { page_song.pause(); page_song2.play(); } }; #region onmousedown Native.document.onmousedown += e => { if (IsDisposed) return; running = !running; PlaySomething(); }; #endregion #region HasFocus var HasFocus = false; Native.window.onblur += delegate { HasFocus = false; page_song.pause(); page_song2.pause(); }; Native.window.onfocus += delegate { HasFocus = true; PlaySomething(); }; Native.Document.onmousemove += delegate { if (HasFocus) return; PlaySomething(); }; Native.Document.onmouseout += delegate { if (HasFocus) return; page_song.pause(); page_song2.pause(); }; #endregion #region helper Action<THREE.Object3D, f, f, f, f, f, f, int> helper = (o, x, y, z, w, h, d, c) => { // function helper(o, x, y, z, w, h, d, c){ var material = new THREE.MeshLambertMaterial(new { color = c }); var geometry = new THREE.CubeGeometry(w, h, d, 1, 1, 1); var mesh = new THREE.Mesh(geometry, material); mesh.position.x = x + (w / 2); mesh.position.y = y - (h / 2); mesh.position.z = z + (d / 2); o.add(mesh); }; #endregion #region buildStar Action<THREE.Object3D, int> buildStar = (star, state) => { #region dear JSC, please start supporting switch! if (state == 0) { helper(star, 0, 0, 0, 1, 1, 1, 0xffffff); } else if (state == 1) { helper(star, 1, 0, 0, 1, 1, 1, 0xffffff); helper(star, -1, 0, 0, 1, 1, 1, 0xffffff); helper(star, 0, 1, 0, 1, 1, 1, 0xffffff); helper(star, 0, -1, 0, 1, 1, 1, 0xffffff); } else if (state == 2) { helper(star, 1, 0, 0, 2, 1, 1, 0xffffff); helper(star, -2, 0, 0, 2, 1, 1, 0xffffff); helper(star, 0, 2, 0, 1, 2, 1, 0xffffff); helper(star, 0, -1, 0, 1, 2, 1, 0xffffff); } else if (state == 3) { helper(star, 0, 0, 0, 1, 1, 1, 0xffffff); helper(star, 2, 0, 0, 2, 1, 1, 0xffffff); helper(star, -3, 0, 0, 2, 1, 1, 0xffffff); helper(star, 0, 3, 0, 1, 2, 1, 0xffffff); helper(star, 0, -2, 0, 1, 2, 1, 0xffffff); } else if (state == 4) { helper(star, 0, 3, 0, 1, 1, 1, 0xffffff); helper(star, 2, 2, 0, 1, 1, 1, 0xffffff); helper(star, 3, 0, 0, 1, 1, 1, 0xffffff); helper(star, 2, -2, 0, 1, 1, 1, 0xffffff); helper(star, 0, -3, 0, 1, 1, 1, 0xffffff); helper(star, -2, -2, 0, 1, 1, 1, 0xffffff); helper(star, -3, 0, 0, 1, 1, 1, 0xffffff); helper(star, -2, 2, 0, 1, 1, 1, 0xffffff); } else if (state == 4) { helper(star, 2, 0, 0, 1, 1, 1, 0xffffff); helper(star, -2, 0, 0, 1, 1, 1, 0xffffff); helper(star, 0, 2, 0, 1, 1, 1, 0xffffff); helper(star, 0, -2, 0, 1, 1, 1, 0xffffff); } #endregion }; #endregion var r = new Random(); Func<f> Math_random = () => r.NextFloat(); var stars = new List<List<THREE.Object3D>>(); #region init var camera = new THREE.PerspectiveCamera(45, Native.window.Width / Native.window.Height, .1f, 10000); camera.position.z = 30; camera.position.x = 0; camera.position.y = 0; var scene = new THREE.Scene(); scene.fog = new THREE.FogExp2(0x003366, 0.0095f); #region POPTART var poptart = new THREE.Object3D(); // object x y z w h d color helper(poptart, 0, -2, -1, 21, 14, 3, 0x222222); helper(poptart, 1, -1, -1, 19, 16, 3, 0x222222); helper(poptart, 2, 0, -1, 17, 18, 3, 0x222222); helper(poptart, 1, -2, -1.5f, 19, 14, 4, 0xffcc99); helper(poptart, 2, -1, -1.5f, 17, 16, 4, 0xffcc99); helper(poptart, 2, -4, 2, 17, 10, .6f, 0xff99ff); helper(poptart, 3, -3, 2, 15, 12, .6f, 0xff99ff); helper(poptart, 4, -2, 2, 13, 14, .6f, 0xff99ff); helper(poptart, 4, -4, 2, 1, 1, .7f, 0xff3399); helper(poptart, 9, -3, 2, 1, 1, .7f, 0xff3399); helper(poptart, 12, -3, 2, 1, 1, .7f, 0xff3399); helper(poptart, 16, -5, 2, 1, 1, .7f, 0xff3399); helper(poptart, 8, -7, 2, 1, 1, .7f, 0xff3399); helper(poptart, 5, -9, 2, 1, 1, .7f, 0xff3399); helper(poptart, 9, -10, 2, 1, 1, .7f, 0xff3399); helper(poptart, 3, -11, 2, 1, 1, .7f, 0xff3399); helper(poptart, 7, -13, 2, 1, 1, .7f, 0xff3399); helper(poptart, 4, -14, 2, 1, 1, .7f, 0xff3399); poptart.position.x = -10.5f; poptart.position.y = 9; scene.add(poptart); #endregion #region FEET var feet = new THREE.Object3D(); helper(feet, 0, -2, .49f, 3, 3, 1, 0x222222); helper(feet, 1, -1, .49f, 3, 3, 1, 0x222222); helper(feet, 1, -2, -.01f, 2, 2, 2, 0x999999); helper(feet, 2, -1, -.01f, 2, 2, 2, 0x999999); helper(feet, 6, -2, -.5f, 3, 3, 1, 0x222222); helper(feet, 6, -2, -.5f, 4, 2, 1, 0x222222); helper(feet, 7, -2, -.99f, 2, 2, 2, 0x999999); helper(feet, 16, -3, .49f, 3, 2, 1, 0x222222); helper(feet, 15, -2, .49f, 3, 2, 1, 0x222222); helper(feet, 15, -2, -.01f, 2, 1, 2, 0x999999); helper(feet, 16, -3, -.01f, 2, 1, 2, 0x999999); helper(feet, 21, -3, -.5f, 3, 2, 1, 0x222222); helper(feet, 20, -2, -.5f, 3, 2, 1, 0x222222); helper(feet, 20, -2, -.99f, 2, 1, 2, 0x999999); helper(feet, 21, -3, -.99f, 2, 1, 2, 0x999999); feet.position.x = -12.5f; feet.position.y = -6; scene.add(feet); #endregion #region TAIL var tail = new THREE.Object3D(); helper(tail, 0, 0, -.25f, 4, 3, 1.5f, 0x222222); helper(tail, 1, -1, -.25f, 4, 3, 1.5f, 0x222222); helper(tail, 2, -2, -.25f, 4, 3, 1.5f, 0x222222); helper(tail, 3, -3, -.25f, 4, 3, 1.5f, 0x222222); helper(tail, 1, -1, -.5f, 2, 1, 2, 0x999999); helper(tail, 2, -2, -.5f, 2, 1, 2, 0x999999); helper(tail, 3, -3, -.5f, 2, 1, 2, 0x999999); helper(tail, 4, -4, -.5f, 2, 1, 2, 0x999999); tail.position.x = -16.5f; tail.position.y = 2; scene.add(tail); #endregion #region FACE var face = new THREE.Object3D(); helper(face, 2, -3, -3, 12, 9, 4, 0x222222); helper(face, 0, -5, 0, 16, 5, 1, 0x222222); helper(face, 1, -1, 0, 4, 10, 1, 0x222222); helper(face, 11, -1, 0, 4, 10, 1, 0x222222); helper(face, 3, -11, 0, 10, 2, 1, 0x222222); helper(face, 2, 0, 0, 2, 2, 1, 0x222222); helper(face, 4, -2, 0, 2, 2, 1, 0x222222); helper(face, 12, 0, 0, 2, 2, 1, 0x222222); helper(face, 10, -2, 0, 2, 2, 1, 0x222222); helper(face, 1, -5, .5f, 14, 5, 1, 0x999999); helper(face, 3, -4, .5f, 10, 8, 1, 0x999999); helper(face, 2, -1, .5f, 2, 10, 1, 0x999999); helper(face, 12, -1, .5f, 2, 10, 1, 0x999999); helper(face, 4, -2, .5f, 1, 2, 1, 0x999999); helper(face, 5, -3, .5f, 1, 1, 1, 0x999999); helper(face, 11, -2, .5f, 1, 2, 1, 0x999999); helper(face, 10, -3, .5f, 1, 1, 1, 0x999999); //Eyes helper(face, 4, -6, .6f, 2, 2, 1, 0x222222); helper(face, 11, -6, .6f, 2, 2, 1, 0x222222); helper(face, 3.99f, -5.99f, .6f, 1.01f, 1.01f, 1.01f, 0xffffff); helper(face, 10.99f, -5.99f, .6f, 1.01f, 1.01f, 1.01f, 0xffffff); //MOUTH helper(face, 5, -10, .6f, 7, 1, 1, 0x222222); helper(face, 5, -9, .6f, 1, 2, 1, 0x222222); helper(face, 8, -9, .6f, 1, 2, 1, 0x222222); helper(face, 11, -9, .6f, 1, 2, 1, 0x222222); //CHEEKS helper(face, 2, -8, .6f, 2, 2, .91f, 0xff9999); helper(face, 13, -8, .6f, 2, 2, .91f, 0xff9999); face.position.x = -.5f; face.position.y = 4; face.position.z = 4; scene.add(face); #endregion #region RAINBOW var rainbow = new THREE.Object3D(); for (var c = 0; c < numRainChunks - 1; c++) { var yOffset = 8; if (c % 2 == 1) yOffset = 7; var xOffset = (-c * 8) - 16.5f; helper(rainbow, xOffset, yOffset, 0, 8, 3, 1, 0xff0000); helper(rainbow, xOffset, yOffset - 3, 0, 8, 3, 1, 0xff9900); helper(rainbow, xOffset, yOffset - 6, 0, 8, 3, 1, 0xffff00); helper(rainbow, xOffset, yOffset - 9, 0, 8, 3, 1, 0x33ff00); helper(rainbow, xOffset, yOffset - 12, 0, 8, 3, 1, 0x0099ff); helper(rainbow, xOffset, yOffset - 15, 0, 8, 3, 1, 0x6633ff); } scene.add(rainbow); #endregion #region rainChunk var rainChunk = new THREE.Object3D(); helper(rainChunk, -16.5f, 7, 0, 8, 3, 1, 0xff0000); helper(rainChunk, -16.5f, 4, 0, 8, 3, 1, 0xff9900); helper(rainChunk, -16.5f, 1, 0, 8, 3, 1, 0xffff00); helper(rainChunk, -16.5f, -2, 0, 8, 3, 1, 0x33ff00); helper(rainChunk, -16.5f, -5, 0, 8, 3, 1, 0x0099ff); helper(rainChunk, -16.5f, -8, 0, 8, 3, 1, 0x6633ff); rainChunk.position.x -= (8 * (numRainChunks - 1)); scene.add(rainChunk); #endregion #region stars for (var state = 0; state < 6; state++) { stars.Add(new List<THREE.Object3D>()); for (var c = 0; c < numStars; c++) { var star = new THREE.Object3D(); star.position.x = Math_random() * 200 - 100; star.position.y = Math_random() * 200 - 100; star.position.z = Math_random() * 200 - 100; buildStar(star, state); scene.add(star); stars[state].Add(star); } } #endregion var pointLight = new THREE.PointLight(0xFFFFFF); pointLight.position.z = 1000; scene.add(pointLight); #endregion #region IsDisposed Dispose = delegate { if (IsDisposed) return; IsDisposed = true; page_song.pause(); page_song2.pause(); container.Orphanize(); }; #endregion Native.window.onframe += delegate { f delta = clock.ElapsedMilliseconds * 0.001f; clock.Restart(); if (running) deltaSum += delta; if (deltaSum > .07) { deltaSum = deltaSum % .07f; frame = (frame + 1) % 12; for (var c = 0; c < numStars; c++) { var tempX = stars[5][c].position.x; var tempY = stars[5][c].position.y; var tempZ = stars[5][c].position.z; for (var state = 5; state > 0; state--) { var star = stars[state][c]; var star2 = stars[state - 1][c]; star.position.x = star2.position.x - 8; star.position.y = star2.position.y; star.position.z = star2.position.z; if (star.position.x < -100) { star.position.x += 200; star.position.y = Math_random() * 200 - 100; star.position.z = Math_random() * 200 - 100; } } stars[0][c].position.x = tempX; stars[0][c].position.y = tempY; stars[0][c].position.z = tempZ; } #region dear JSC, please start supporting switch! if (frame == 0) { face.position.x++; feet.position.x++; } else if (frame == 1) { face.position.y--; feet.position.x++; feet.position.y--; poptart.position.y--; rainbow.position.x -= 9; rainChunk.position.x += (8 * (numRainChunks - 1)) - 1; } else if (frame == 2) { feet.position.x--; } else if (frame == 3) { face.position.x--; feet.position.x--; rainbow.position.x += 9; rainChunk.position.x -= (8 * (numRainChunks - 1)) - 1; } else if (frame == 4) { face.position.y++; } else if (frame == 5) { poptart.position.y++; feet.position.y++; rainbow.position.x -= 9; rainChunk.position.x += (8 * (numRainChunks - 1)) - 1; } else if (frame == 6) { face.position.x++; feet.position.x++; } else if (frame == 7) { poptart.position.y--; face.position.y--; feet.position.x++; feet.position.y--; rainbow.position.x += 9; rainChunk.position.x -= (8 * (numRainChunks - 1)) - 1; } else if (frame == 8) { feet.position.x--; } else if (frame == 9) { face.position.x--; feet.position.x--; rainbow.position.x -= 9; rainChunk.position.x += (8 * (numRainChunks - 1)) - 1; } else if (frame == 10) { face.position.y++; } else if (frame == 11) { poptart.position.y++; feet.position.y++; rainbow.position.x += 9; rainChunk.position.x -= (8 * (numRainChunks - 1)) - 1; } #endregion } camera.position.x += (mouseX - camera.position.x) * .005f; camera.position.y += (-mouseY - camera.position.y) * .005f; camera.lookAt(scene.position); renderer.render(scene, camera); }; #region AtResize Action AtResize = delegate { container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height); camera.aspect = Native.window.aspect; camera.updateProjectionMatrix(); renderer.setSize(Native.window.Width, Native.window.Height); }; Native.window.onresize += delegate { AtResize(); }; AtResize(); #endregion #region requestFullscreen Native.document.body.ondblclick += delegate { if (IsDisposed) return; // http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/ Native.document.body.requestFullscreen(); }; #endregion }
// no animation no more? /// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page = null) { // 20150527 i see a red blob. broken? var sw = Stopwatch.StartNew(); // X:\jsc.svn\examples\javascript\synergy\webgl\WebGLMD2MorphtargetExample\WebGLMD2MorphtargetExample\Application.cs Console.WriteLine("before three"); // fails with gallery? why? //Action Toggle = DiagnosticsConsole.ApplicationContent.BindKeyboardToDiagnosticsConsole(); Console.WriteLine("InitializeContent"); // http://oos.moxiecode.com/js_webgl/md5_test/ var oldTime = 0L; var cameraTarget = new THREE.Vector3 { x = 0, y = 300, z = 0 }; var positionVector = new THREE.Vector3(); var lookVector = new THREE.Vector3(); var lastframe = 0; var scene = new THREE.Scene(); scene.fog = new THREE.Fog(0x000000, 1000, 5000); var camera = new THREE.PerspectiveCamera(50, Native.window.aspect, 1, 10000); camera.position.z = 800; camera.position.y = 100; camera.lookAt(scene.position); scene.add(camera); // floor var plane = new THREE.PlaneGeometry(10000, 10000, 50, 50); var floorMaterial = new THREE.MeshBasicMaterial(new { wireframe = true, color = 0x333333 }); var floor = new THREE.Mesh(plane, floorMaterial); floor.rotation.x = -Math.PI / 2; scene.add(floor); // renderer var renderer = new THREE.WebGLRenderer(new { antialias = true }); //renderer.setClearColorHex(0x000000); renderer.domElement.AttachToDocument(); // 0200001f WebGLBossHarvesterByOutsideOfSociety.Application +<> c__DisplayClass2 // script: error JSC1000: unsupported flow detected, try to simplify. //Assembly V:\WebGLBossHarvesterByOutsideOfSociety.Application.exe //DeclaringType WebGLBossHarvesterByOutsideOfSociety.Application +<> c__DisplayClass2, //OwnerMethod <.ctor > b__5 //Offset 005b // did the problem just dissapear? var controls = new THREE.OrbitControls(camera, renderer.domElement); #region harvester_md5mesh new THREE.JSONLoader().load( new WebGLBossHarvesterByOutsideOfSociety.Models.harvester_md5mesh().Content.src, (Action<dynamic>) (geometry => { Console.WriteLine("geometry ready!"); //console.log("Number of bones: "+geometry.bones.length); var material = new THREE.MeshBasicMaterial(new { color = 0xffffff, wireframe = true, opacity = 0.25, transparent = true, skinning = true }); object geometry_object = geometry; var skin = new THREE.SkinnedMesh(geometry_object, material); scene.add(skin); object geometry_animation = geometry.animation; //THREE.AnimationHandler.add(geometry_animation); //var animation = new THREE.Animation(skin, "walk1"); //animation.play(); skin.rotation.x = -Math.PI / 2; skin.rotation.z = -Math.PI / 2; // view-source:http://threejs.org/examples/webgl_animation_skinning_morph.html var boneArray = new Dictionary<int, THREE.Mesh>(); var boneContainer = new THREE.Object3D(); boneContainer.rotation.x = -Math.PI / 2; boneContainer.rotation.z = -Math.PI / 2; scene.add(boneContainer); var index = 0; var pmaterial = new THREE.MeshPhongMaterial(new { color = 0xff0000 }); //for (var b = 1; b != skin.bones.Length; b++) //{ // var bone = skin.bones[b]; // var nc = bone.children.Length; // for (var c = 0; c != nc; c++) // { // var child = bone.children[c]; // var size = Math.Min(child.position.length() * 0.05, 8); // var cylinder = new THREE.CylinderGeometry(size, 0.1, child.position.length(), 6); // // ERROR: Matrix's .makeRotationFromEuler() now expects a Euler rotation rather than a Vector3 and order. Please update your code. // cylinder.applyMatrix( // new THREE.Matrix4().makeRotationFromEuler( // new THREE.Euler(Math.PI / 2, 0, 0) // ) // ); // cylinder.applyMatrix(new THREE.Matrix4().setPosition(new THREE.Vector3(0, 0, 0.5 * child.position.length()))); // var mesh = new THREE.Mesh(cylinder, pmaterial); // boneArray[child.id] = mesh; // boneContainer.add(mesh); // } //} #region render Native.window.onframe += delegate { Func<long> Date_now = () => (long)new IFunction("return Date.now();").apply(null); var time = Date_now(); double delta = time - oldTime; if (oldTime == 0) { delta = 1000 / 60.0; } oldTime = time; THREE.AnimationHandler.update(delta / 1000.0); // does not exist? //for (var b = 1; b != skin.bones.Length; b++) //{ // var bone = skin.bones[b]; // var nc = bone.children.Length; // for (var c = 0; c != nc; c++) // { // var child = bone.children[c]; // var child_bone = (THREE.Bone)(object)child; // var id = child.id; // var mesh = boneArray[id]; // positionVector.getPositionFromMatrix(child_bone.skinMatrix); // mesh.position.copy(positionVector); // var child_parent_bone = (THREE.Bone)(object)child.parent; // lookVector.getPositionFromMatrix(child_parent_bone.skinMatrix); // mesh.lookAt(lookVector); // } //} boneContainer.position.z = skin.position.z; //var frame = (int)Math.Floor(animation.currentTime * 24.0); var frame = (int)Math.Floor(sw.ElapsedMilliseconds * 24.0); if (frame >= 0 && lastframe > frame) { skin.position.z += 304.799987793; // got that from the root bone, total movement of one walk cycle } lastframe = frame; var speed = delta * 0.131; cameraTarget.z += speed; if (skin.position.z > floor.position.z + 1000.0) { floor.position.z += 1000.0; }; //camera.position.x = 800.0 * Math.Sin(time / 3000.0); //camera.position.z = cameraTarget.z + 800.0 * Math.Cos(time / 3000.0); //camera.lookAt(cameraTarget); controls.update(); camera.position = controls.center.clone(); renderer.render(scene, camera); }; #endregion } ) ); #endregion //var harvester_src = new WebGLBossHarvesterByOutsideOfSociety.Models.harvester().Content.src; //Console.WriteLine("before harvester " + new { harvester_src }); //loader.load(harvester_src, harvesterLoaded); // lights var pointLight = new THREE.PointLight(0xffffff, 1.0, 0); pointLight.AttachTo(camera); #region AtResize Action AtResize = delegate { camera.aspect = Native.window.aspect; camera.updateProjectionMatrix(); renderer.setSize(Native.window.Width, Native.window.Height); }; Native.window.onresize += delegate { AtResize(); }; AtResize(); #endregion Console.WriteLine("renderer ready!"); //#region onmousedown //Native.document.onmousedown += // e => // { // if (e.MouseButton == IEvent.MouseButtonEnum.Middle) // { // if (Native.document.pointerLockElement == Native.document.body) // { // // cant requestFullscreen while pointerLockElement // Console.WriteLine("exitPointerLock"); // Native.document.exitPointerLock(); // //Native.document.exitFullscreen(); // return; // } // Console.WriteLine("requestFullscreen"); // //Native.document.body.requestFullscreen(); // Native.document.body.requestPointerLock(); // return; // } // }; //#endregion #region ZeProperties var ze = new ZeProperties(); ze.Show(); ze.treeView1.Nodes.Clear(); ze.Add(() => renderer); ze.Add(() => controls); ze.Add(() => scene); ze.Left = 0; #endregion }
/// <summary> /// This is a javascript application. /// </summary> /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param> public Application(IApp page) { // SCENE scene = new THREE.Scene(); // CAMERA var SCREEN_WIDTH = Native.window.Width; var SCREEN_HEIGHT = Native.window.Height; var VIEW_ANGLE = 45; var ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT; var NEAR = 0.1; var FAR = 20000; // perspective cameras perspectiveCamera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR); perspectiveCamera.position.set(0,200,550); perspectiveCamera.lookAt(scene.position); scene.add(perspectiveCamera); // orthographic cameras mapCamera = new THREE.OrthographicCamera( Native.window.Width / -2, // Left Native.window.Width / 2, // Right Native.window.Height / 2, // Top Native.window.Height / -2, // Bottom -5000, // Near 10000 ); // Far mapCamera.up = new THREE.Vector3(0,0,-1); mapCamera.lookAt( new THREE.Vector3(0,-1,0) ); scene.add(mapCamera); renderer = new THREE.WebGLRenderer( new { antialias = true } ); // RENDERER renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); this.container = (IHTMLCanvas)renderer.domElement; this.container.AttachToDocument(); this.container.style.SetLocation(0, 0); // EVENTS //THREEx.WindowResize(renderer, mapCamera); //THREEx.FullScreen.bindKey({ charCode : 'm'.charCodeAt(0) }); // STATS //stats = new Stats(); //stats.domElement.style.position = 'absolute'; //stats.domElement.style.bottom = '0px'; //stats.domElement.style.zIndex = 100; //container.appendChild( stats.domElement ); // LIGHT var light = new THREE.PointLight(0xffffff); light.position.set(0,250,0); scene.add(light); // FLOOR var img = new uvgrid01(); var floorTexture = new THREE.Texture().With( async s => { s.image = await img; s.needsUpdate = true; }); floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping; floorTexture.repeat.set( 10, 10 ); var floorMaterial = new THREE.MeshBasicMaterial( new { map = floorTexture, side = THREE.DoubleSide } ); var floorGeometry = new THREE.PlaneGeometry(2000, 2000, 10, 10); var floor = new THREE.Mesh(floorGeometry, floorMaterial); floor.position.y = -0.5; floor.rotation.x = Math.PI / 2; scene.add(floor); //////////// // CUSTOM // //////////// // materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/xpos.png' ) })); //materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/xneg.png' ) })); //materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/ypos.png' ) })); //materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/yneg.png' ) })); //materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/zpos.png' ) })); //materialArray.push(new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'images/zneg.png' ) })); // create an array with six textures for cube var materialArray = new THREE.MeshBasicMaterial[6]; materialArray[0] = (new THREE.MeshBasicMaterial( new { map = new THREE.Texture().With( async s => { s.image = await new xpos(); s.needsUpdate = true; }) })); materialArray[1] = (new THREE.MeshBasicMaterial( new { map = new THREE.Texture().With( async s => { s.image = await new xneg(); s.needsUpdate = true; }) })); materialArray[2] = (new THREE.MeshBasicMaterial( new { map = new THREE.Texture().With( async s => { s.image = await new ypos(); s.needsUpdate = true; }) })); materialArray[3] = (new THREE.MeshBasicMaterial( new { map = new THREE.Texture().With( async s => { s.image = await new yneg(); s.needsUpdate = true; }) })); materialArray[4] = (new THREE.MeshBasicMaterial( new {map = new THREE.Texture().With( async s => { s.image = await new zpos(); s.needsUpdate = true; }) })); materialArray[5] = (new THREE.MeshBasicMaterial( new { map = new THREE.Texture().With( async s => { s.image = await new zneg(); s.needsUpdate = true; }) })); //var MovingCubeMat = new THREE.MeshFaceMaterial(new { material = materialArray }); var MovingCubeGeom = new THREE.CubeGeometry(50, 50, 50, 1, 1, 1); var MovingCube = new THREE.Mesh(MovingCubeGeom, new THREE.MeshBasicMaterial(new { color = new THREE.Color(0xFFFFFF) })); MovingCube.position.set(0, 25.1, 0); scene.add(MovingCube); // a little bit of scenery... var ambientlight = new THREE.AmbientLight(0x111111); scene.add( ambientlight ); // torus knot var colorMaterial = new THREE.MeshLambertMaterial(new { color = new THREE.Color(0xff3333) }); var shape = new THREE.Mesh(new THREE.TorusKnotGeometry(30, 6, 160, 10, 2, 5, 4), colorMaterial); shape.position.set(-200, 50, -200); scene.add(shape); // torus knot var colorMaterial2 = new THREE.MeshLambertMaterial(new { color = new THREE.Color(0x33ff33) }); var shape2 = new THREE.Mesh(new THREE.TorusKnotGeometry(30, 6, 160, 10, 3, 2, 4), colorMaterial2); shape2.position.set(200, 50, -200); scene.add(shape2); // torus knot var colorMaterial3 = new THREE.MeshLambertMaterial(new { color = new THREE.Color(0xffff33) }); var shape3 = new THREE.Mesh(new THREE.TorusKnotGeometry(30, 6, 160, 10, 4, 3, 4), colorMaterial3); shape3.position.set(200, 50, 200); scene.add(shape3); // torus knot var colorMaterial4 = new THREE.MeshLambertMaterial(new { color = new THREE.Color(0x3333ff) }); var shape4 = new THREE.Mesh(new THREE.TorusKnotGeometry(30, 6, 160, 10, 3, 4, 4), colorMaterial4); shape4.position.set(-200, 50, 200); scene.add(shape4); renderer.setSize(Native.window.Width, Native.window.Height); renderer.setClearColor( 0x000000, 1 ); renderer.autoClear = false; Native.window.onframe += e => { perspectiveCamera.updateProjectionMatrix(); render(); }; var isPushed = false; this.container.onkeydown += m => { isPushed = true; if (isPushed) { //var delta = clock.getDelta(); // seconds. var moveDistance = 200 * 2; // 200 pixels per second var rotateAngle = Math.PI / 2 * 2; // pi/2 radians (90 degrees) per second // local transformations // move forwards/backwards/left/right if (m.KeyCode == 87) MovingCube.translateZ(-moveDistance); if (m.KeyCode == 83) MovingCube.translateZ(moveDistance); if (m.KeyCode == 81) MovingCube.translateX(-moveDistance); if (m.KeyCode == 69) MovingCube.translateX(moveDistance); //// rotate left/right/up/down //var rotation_matrix = new THREE.Matrix4().identity(); //if (m.KeyCode == 65) // MovingCube.rotateOnAxis(new THREE.Vector3(0, 1, 0), rotateAngle); //if (m.KeyCode == 68) // MovingCube.rotateOnAxis(new THREE.Vector3(0, 1, 0), -rotateAngle); //if (m.KeyCode == 90) //{ // MovingCube.position.set(0, 25.1, 0); // MovingCube.rotation.set(0, 0, 0); //} } }; this.container.onkeyup += e => { isPushed = false; }; Native.window.onresize += delegate { //if (canvas.parentNode == Native.document.body) // are we embedded? if (page != null) renderer.setSize(); }; }