EasonWang01/thr.html

## thr.html
<html>
    <head>
        <title>My first Three.js app</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src="./three.min.js"></script>
        <script>


            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000 );
            camera.lookAt(new THREE.Vector3(0, 0, 0));
            var renderer = new THREE.WebGLRenderer({ alpha: false });
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );


            var geometry1 = new THREE.BoxGeometry( 12, 1, 1 );
            var material1 = new THREE.MeshBasicMaterial( { color: 0x00FFCC } );
            var cube1 = new THREE.Mesh( geometry1, material1 );

            scene.add( cube1 );

            var geometry2 = new THREE.BoxGeometry( 10, 1, 1 );
            var material2 = new THREE.MeshBasicMaterial( { color: 0xCCFF33 } );
            var cube2 = new THREE.Mesh( geometry2, material2 );

            scene.add( cube2 );


            var geometry3 = new THREE.CircleBufferGeometry( 3, 32 );
            var material3 = new THREE.MeshBasicMaterial( { color: 0xCCFFCC	 } );
            var circle3 = new THREE.Mesh( geometry3, material3 );
            scene.add( circle3 );


            var geometry4 = new THREE.BoxBufferGeometry( 10, 1, 1 );
            material4 = new THREE.MeshLambertMaterial({ map: new THREE.TextureLoader().load("g.png") });
            var cube4 = new THREE.Mesh( geometry4, material4 );
            scene.add( cube4 );


            var geometry = new THREE.CubeGeometry(150, 200, 150, 2, 2, 2);
            var materials = [];

            cube = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
            cube.position.y = 150;
            scene.add(cube);


            var light = new THREE.AmbientLight( 0x404040 ); // soft white light
            scene.add( light );

            camera.position.z = 5;


            var geometry = new THREE.BoxGeometry( 2, 1, 1 );

            material = new THREE.MeshLambertMaterial({ map: new THREE.TextureLoader().load("g.png") });
            var cube = new THREE.Mesh( geometry, material );
            scene.add( cube );


            var render = function () {
                requestAnimationFrame( render );

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

                cube1.rotation.x += 0.02;
                cube1.rotation.y += 0.02;

                cube2.rotation.x += 0.03;
                cube2.rotation.y += 0.03;

                renderer.render(scene, camera);
            };

setTimeout(() => {render();},500)

        </script>
    </body>
</html>
	<html>
	<head>
	<title>My first Three.js app</title>
	<style>
	body { margin: 0; }
	canvas { width: 100%; height: 100% }
	</style>
	</head>
	<body>
	<script src="./three.min.js"></script>
	<script>




	var scene = new THREE.Scene();
	var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000 );
	camera.lookAt(new THREE.Vector3(0, 0, 0));
	var renderer = new THREE.WebGLRenderer({ alpha: false });
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );



	var geometry1 = new THREE.BoxGeometry( 12, 1, 1 );
	var material1 = new THREE.MeshBasicMaterial( { color: 0x00FFCC } );
	var cube1 = new THREE.Mesh( geometry1, material1 );

	scene.add( cube1 );

	var geometry2 = new THREE.BoxGeometry( 10, 1, 1 );
	var material2 = new THREE.MeshBasicMaterial( { color: 0xCCFF33 } );
	var cube2 = new THREE.Mesh( geometry2, material2 );

	scene.add( cube2 );


	var geometry3 = new THREE.CircleBufferGeometry( 3, 32 );
	var material3 = new THREE.MeshBasicMaterial( { color: 0xCCFFCC } );
	var circle3 = new THREE.Mesh( geometry3, material3 );
	scene.add( circle3 );


	var geometry4 = new THREE.BoxBufferGeometry( 10, 1, 1 );
	material4 = new THREE.MeshLambertMaterial({ map: new THREE.TextureLoader().load("g.png") });
	var cube4 = new THREE.Mesh( geometry4, material4 );
	scene.add( cube4 );



	var geometry = new THREE.CubeGeometry(150, 200, 150, 2, 2, 2);
	var materials = [];

	cube = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
	cube.position.y = 150;
	scene.add(cube);


	var light = new THREE.AmbientLight( 0x404040 ); // soft white light
	scene.add( light );

	camera.position.z = 5;



	var geometry = new THREE.BoxGeometry( 2, 1, 1 );

	material = new THREE.MeshLambertMaterial({ map: new THREE.TextureLoader().load("g.png") });
	var cube = new THREE.Mesh( geometry, material );
	scene.add( cube );




	var render = function () {
	requestAnimationFrame( render );

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

	cube1.rotation.x += 0.02;
	cube1.rotation.y += 0.02;

	cube2.rotation.x += 0.03;
	cube2.rotation.y += 0.03;

	renderer.render(scene, camera);
	};

	setTimeout(() => {render();},500)

	</script>
	</body>
	</html>