-
Alfakhori authored274ec007
<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>Cube Demo</title> <!-- three.js --> <script src="https://unpkg.com/three@0.126.0/build/three.js"></script></head><body><!-- Starting an immersive WebXR session requires user interaction. We start this one with a simple button. --><script> // create a Sceneconst scene = new Scene();// Set the background colorscene.background = new Color('skyblue');// Create a cameraconst fov = 35; // AKA Field of Viewconst aspect = container.clientWidth / container.clientHeight;const near = 0.1; // the near clipping planeconst far = 100; // the far clipping planeconst camera = new PerspectiveCamera(fov, aspect, near, far);// every object is initially created at ( 0, 0, 0 )// move the camera back so we can view the scenecamera.position.set(0, 0, 10);// create a geometryconst geometry = new BoxBufferGeometry(2, 2, 2);// create a default (white) Basic materialconst material = new MeshBasicMaterial();// create a Mesh containing the geometry and materialconst cube = new Mesh(geometry, material);// add the mesh to the scenescene.add(cube);// create the rendererconst renderer = new WebGLRenderer();// next, set the renderer to the same size as our container elementrenderer.setSize(container.clientWidth, container.clientHeight);// finally, set the pixel ratio so that our scene will look good on HiDPI displaysrenderer.setPixelRatio(window.devicePixelRatio);// add the automatically created <canvas> element to the pagecontainer.append(renderer.domElement);// render, or 'create a still image', of the scenerenderer.render(scene, camera);</script></body></html>