1.3.1. fejezet, Alapok

Beküldte pzoli - 2022, augusztus 5 - 12:41du 
<!DOCTYPE html>
<html>
	<head>
          <meta charset="utf-8">
          <title>My first three.js app</title>
          <style>
             body { margin: 0; }
             canvas { width: 100%; height: 100% }
          </style>
	</head>
	<body>
          <script src="https://threejs.org/build/three.js"></script>
          <script>
            const scene = new THREE.Scene();
            const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
 
            const renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );
 
            const loader = new THREE.TextureLoader();
            const bgTexture = loader.load('skybox.jpg');
            scene.background = bgTexture;
 
 
            const color = 0x00FF00;
            const geometry = new THREE.BoxGeometry( 1, 1, 1 );
            const material = new THREE.MeshPhongMaterial({color});
            const cube = new THREE.Mesh( geometry, material );
            scene.add( cube );
 
            const lightColor = 0xFFFFFF;
            const intensity = 1;
            const light = new THREE.DirectionalLight(lightColor, intensity);
            light.position.set(-1, 2, 4);
            scene.add(light);
 
            camera.position.z = 5;
 
            function animate() {
                requestAnimationFrame( animate );
 
                cube.rotation.x += 0.01;
                cube.rotation.y += 0.01;
 
                renderer.render( scene, camera );
            }
            animate();
          </script>
	</body>
</html>