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