The renderer
This is the third day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021.”
The renderer
Three. Js document
Renderer plays the role of rendering page in three.js, which is equivalent to serving as a projection device in the process of movie showing. We can control its projection position, resolution, color channel, rendering size and so on. We also have properties in the renderer that manipulate these values.
Use of renderers
WebGLRenderer( parameters : Object )
Copy the codeThe WebGLRenderer constructor takes several parameters
Parameters - (Optional) The properties of this object define the behavior of the renderer. You can also pass no arguments at all. In all cases, it takes a reasonable default value when an argument is missing. The following are legal arguments: Canvas: A canvas on which the renderer draws its output, corresponding to the webglrenderer.domElement property. If this parameter is not passed, a new canvas is created. Context: can be used to attach a renderer to an existing RenderingContext. The default value isnullPrecision: precision of the shader. Can be"highp" ,"mediump"or"lowp". If the device supports this parameter, the default value is"highp"Alpha: Whether the canvas contains alpha (transparency). The default isfalsePremultipliedAlpha: Whether the renderer assumes that the color has premultiplied alpha defaulttrue. Antialias: Specifies whether to perform anti-aliasing. The default isfalseStencil: Whether the drawing cache has at least one8Bit stencil buffer. The default istruePreserveDrawingBuffer: Whether to keep the buffer until it is manually cleared or overwritten. The defaultfalsePowerPreference: prompts the user agent which configuration is most appropriate for the current WebGL environment. May be"high-performance" , "low-power"or"default". The default is"default". The depth; Whether the drawing cache has at least one6Bit depth buffer. The default istrue. Dsmmicdepthbuffer: Specifies whether to use logarithmic depth cache. This is necessary if you are dealing with large scale differences in a single scenario. The default isfalse.Copy the codeLet’s use the rotate square example to use some of the renderer’s parameters
<html>
<head>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<canvas id="oCanvas"></canvas>
<script src="three.js"></script>
<script>
var oCanvas = document.getElementById('oCanvas');
// Create a scene
var scene = new THREE.Scene();
// Create camera
var orgCamera = new THREE.OrthographicCamera( window.innerWidth / -2.window.innerWidth / 2.window.innerHeight / 2.window.innerHeight / -2.100.1000 );
/ / the renderer
var renderer = new THREE.WebGLRenderer({
canvas: oCanvas,
antialias: true.// Whether to perform anti-aliasing
alpha:true.// Canvas is transparent
premultipliedAlpha:false.// Whether there is pre-ride transparency, on by default
});
renderer.setSize( window.innerWidth, window.innerHeight );
// document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 100.100.100);
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00});var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
orgCamera.position.z = 700;
var animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, orgCamera );
};
animate();
</script>
</body>
</html>
Copy the code
