Implement the core of a 3D scene

  1. New three.scene () provides a virtual THREE-DIMENSIONAL Scene container
  2. The new THREE [‘ perspective camera ‘| |’ orthogonal camera] decided to finally see you 3 d scene effect
  3. New three.webglrenderer () : Render the content captured by the camera into the page

Effect of basis

/ / create a const scene scene = new THREE. The scene () / / dom = document. Finally the result of rendering containers let getElementsByClassName (' webgl - canvas) [0] / / PerspectiveCamera const camera = new THREE.PerspectiveCamera(75, dom.clientWidth/dom.clientheight, 0.1, Scene. add(camera) camera.position.set(50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50) Renderer = new THREE.WebGLRenderer() renderer.setClearColor(new THREE.Color(0xEEEEEE)); renderer.setSize(dom.clientWidth, dom.clientHeight); renderer.setPixelRatio(window.devicePixelRatio) dom.appendChild(renderer.domElement); Add (axes) // create a planeGeometry let planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1); let planeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff }); let plane = new THREE.Mesh(planeGeometry, planeMaterial); // Place plane.rotation. X = -0.5 * math.pi scene.add(plane); / / photo.. renderer.render(scene, camera)Copy the code