Breaking News: Grepper is joining You.com. Read the official announcement!

what is renderer in three.js

Mr.D answered on June 30, 2022 Popularity 8/10 Helpfulness 2/10

answer what is renderer in three.js

related Renderer in three js

what is renderer in three.js

Comment

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
)
camera.position.z = 2

const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

new OrbitControls(camera, renderer.domElement)

const geometry = new THREE.BoxGeometry()
const material = new THREE.MeshBasicMaterial({
    color: 0x00ff00,
    wireframe: true,
})

const cube = new THREE.Mesh(geometry, material)
scene.add(cube)

window.addEventListener('resize', onWindowResize, false)
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
    render()
}

function animate() {
    requestAnimationFrame(animate)

    cube.rotation.x += 0.01
    cube.rotation.y += 0.01

    render()
}

function render() {
    renderer.render(scene, camera)
}

animate()

Popularity 8/10 Helpfulness 2/10 Language javascript

Source: sbcode.net

Tags: javascript renderer three.js

Link to this answer
Share Copy Link

Contributed on Jun 30 2022

Mr.D

0 Answers Avg Quality 2/10

Closely Related Answers

Renderer in three js

Comment

//rendering all of the scene components into the canvas element. 
// define the renderer
  renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);

  // append the rendered to the dom
  document.body.appendChild(renderer.domElement);

  // render the scene
  renderer.render(scene, camera);

Popularity 8/10 Helpfulness 6/10 Language typescript

Source: Grepper

Tags: typescript renderer type

Link to this answer
Share Copy Link

Contributed on Sep 30 2022

Shirshak Kandel

0 Answers Avg Quality 2/10

what is renderer in three.js

Contents

More Related Answers

what is renderer in three.js

Closely Related Answers

Renderer in three js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.