static void btnTest_click(HtmlDomEventArgs e) { // set the scene size float WIDTH = 400; float HEIGHT = 300; // set some camera attributes float VIEW_ANGLE = 45; float ASPECT = WIDTH / HEIGHT; float NEAR = 0.1f; float FAR = 10000; // get the DOM element to attach to // - assume we've got jQuery to hand jQuery container = J("#container"); // create a WebGL renderer, camera // and a scene WebGLRenderer renderer = new WebGLRenderer(); Camera camera = new PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR); Scene scene = new Scene(); // the camera starts at 0,0,0 so pull it back camera.position.z = 300; // start the renderer renderer.setSize(WIDTH, HEIGHT); // attach the render-supplied DOM element container.append(renderer.domElement); // create the sphere's material MeshLambertMaterial sphereMaterial = new MeshLambertMaterial(new MeshLambertMaterialOptions { color = 0xcc0000 }); // set up the sphere vars int radius = 50, segments = 16, rings = 16; // create a new mesh with sphere geometry - // we will cover the sphereMaterial next! Mesh sphere = new Mesh(new SphereGeometry(radius, segments, rings), sphereMaterial); // add the sphere to the scene scene.add(sphere); // create a point light var pointLight = new PointLight(0xFFFFFF); // set its position pointLight.position.x = 10; pointLight.position.y = 50; pointLight.position.z = 130; // add to the scene scene.add(pointLight); // draw! renderer.render(scene, camera); }
private static void Init() { container = document.createElement("div"); document.body.appendChild(container); // var height = GetAvailableHeight(); var width = window.innerWidth; camera = new PerspectiveCamera(50, width / height, 1, 10000) { position = { y = 300 } }; cameraTarget = new Vector3(0, 150, 0); scene = new Scene { background = new Color(0xf0f0f0) }; // var light = new DirectionalLight(0xefefff, 1.5); light.position.set(1, 1, 1).normalize(); scene.add(light); light = new DirectionalLight(0xffefef, 1.5); light.position.set(-1, -1, -1).normalize(); scene.add(light); var loader = new JSONLoader(); loader.load("https://raw.githubusercontent.com/Retyped/Demos/master/ThreeJsDemo/ThreeJsDemo/dist/models/horse.js", (geometry, materials) => { var mesh = new Mesh(geometry, new MeshLambertMaterial(new MeshLambertMaterialParameters { vertexColors = FaceColors, morphTargets = true })); mesh.scale.set(1.5, 1.5, 1.5); scene.add(mesh); mixer = new AnimationMixer(mesh); var clip = AnimationClip.CreateFromMorphTargetSequence("gallop", geometry.morphTargets, 30, false); mixer.clipAction(clip).setDuration(1).play(); }); // renderer = new WebGLRenderer(); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(width, height); container.appendChild(renderer.domElement); // window.addEventListener("resize", (dom.Event e) => OnWindowResize(), false); }
private static void OnWindowResize() { var height = GetAvailableHeight(); var width = window.innerWidth; camera.aspect = width / height; camera.updateProjectionMatrix(); renderer.setSize(width, height); }