plane that will face camera

by Vornzy

HTML

<!DOCTYPE html>
<html>
	<head>
		<title>My money don't jiggle jiggle</title>

		<style>
			body { margin: 0; }
            canvas { width: 100%; height: 100%; }
		</style>
	</head>
	<body>
<!-- This is a comment -->
     <!--   <script src="js/three.js"></script>-->
        <script src="three.js"></script> 
        <script src="OrbitControls.js"></script>
        <script type="module" src="node_modules/@types/three/src/loaders/GLTFLoader.js"></script>

    <!--    <script src="https://unpkg.com/three@0.144.0/build/three.module.js"></script> -->
        <script src="YourMum.js"></script> 
        <script>
        </script>
	</body>
</html>

JavaScript

import {OrbitControls} from 'https://unpkg.com/three@0.144.0/build/three.module.js'
newFunction();
function newFunction() {
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
//resize window as it adjusts
    window.addEventListener( 'resize', function()
    {
        var width = window.innerWidth;
        var height = window.innerHeight;
        renderer.setSize( width, height);
        camera.aspect = width / height;
        camera.updateProjectionMatrix();
    });

    //orbit controls
    const controls = new THREE.OrbitControls( camera, renderer.domElement);
    controls.target.set( -0.35, 1.6, 1.5 );
 

    //rotate geometry to camera
    const geometry2 = new THREE.PlaneGeometry( 2, 1, 16, 16 );
    const material2 = new THREE.MeshBasicMaterial( { color: 0xffff00, side: THREE.DoubleSide, wireframe: true} );
    const plane2 = new THREE.Mesh( geometry2, material2 );
    plane2.position.set(2.5, 1.6, 2.5);
    plane2.rotateY(1.571)
    scene.add( plane2 );

    

    const geometry1 = new THREE.SphereGeometry( 0.001, 32, 16 );
    const material1 = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
    const sphere1 = new THREE.Mesh( geometry1, material1 );
    sphere1.position.set(-0.35, 1.6, 1.5);
    //scene.add( sphere1 );
    

    camera.position.z = 3 

    //ambient light 
    var ambientLight = new THREE.AmbientLight(0xFFFFFF, 2.0);
    scene.add( ambientLight ); 

    

    






    //game logic
    var update = function () {
 
    };

    var render = function () {
        renderer.render(scene, camera);
    };

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

        update();
        render();

    };

    GameLoop();
}