standarddeviant · March 26, 2020 15:01
diff --git a/three_js_test.html b/three_js_test.html
 <!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8">
 		<title>My first three.js app</title>
 		<style>
 			body { margin: 0; }
 			canvas { display: block; }
 		</style>
 	</head>
 	<body>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
        <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
        <!-- <script type="module" src="/jsm/controls/OrbitControls.js"></script> -->
        <!-- import { OrbitControls } from './jsm/controls/OrbitControls.js'; -->
        <script type="module">
            // import { OrbitControls } from "https://threejs.org/examples/js/controls/OrbitControls.js";
            // import { OrbitControls } from 'https://raw.githubusercontent.com/mrdoob/three.js/master/examples/jsm/controls/OrbitControls.js';
            // import { OrbitControls } from "./jsm/controls/OrbitControls.js"

            /* make a scene */
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera( 
                75, window.innerWidth / window.innerHeight, 0.1, 1000 );
            var renderer = new THREE.WebGLRenderer();
            var controls = new THREE.OrbitControls( camera, renderer.domElement );

            /* config camera */
            camera.position.z = 3;

            /* config / init renderer */
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );

            /* make some walls */
            // var plane = new THREE.Plane( new THREE.Vector3( 1, 1, 0.2 ), 3 );
            // var helper = new THREE.PlaneHelper( plane, 1, 0xffff00 );
            // scene.add( helper );

            var geometry = new THREE.PlaneGeometry( 5, 2, 32 );
            var material = new THREE.MeshBasicMaterial( 
                {color: 0x880000, side: THREE.DoubleSide} );
            var plane = new THREE.Mesh( geometry, material );
            plane.position.set(1, 1, 1)
            scene.add( plane );


            // var plane = new THREE.Plane(new THREE.Vector3(0, 1, 0, 0), 3);
            // var helper = new THREE.PlaneHelper( plane, 1, 0xffff00 );
            // scene.add( helper );

            /* make a cube */
            var geometry = new THREE.BoxGeometry();
            var material = new THREE.MeshBasicMaterial( { color: 0x008f8f } );
            var cube = new THREE.Mesh( geometry, material );
            scene.add( cube );

            /* make an arrow */
            var dir = new THREE.Vector3( 1, 2, 0 );
            dir.normalize(); //normalize the direction vector (convert to vector of length 1)
            var origin = new THREE.Vector3( 0, 0, 0 );
            var length = 1;
            var hex = 0xffffff;
            var arrowHelper = new THREE.ArrowHelper( dir, origin, length, hex );
            scene.add( arrowHelper );

            function animate() {
                requestAnimationFrame( animate );
                cube.rotation.x += 0.01;
                cube.rotation.y += 0.01;
                renderer.render( scene, camera );
                arrowHelper.rotation.x += 0.01
                arrowHelper.rotation.y += 0.01
            }
            animate();
 		</script>
 	</body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>My first three.js app</title>
	<style>
	body { margin: 0; }
	canvas { display: block; }
	</style>
	</head>
	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
	<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
	<!-- <script type="module" src="/jsm/controls/OrbitControls.js"></script> -->
	<!-- import { OrbitControls } from './jsm/controls/OrbitControls.js'; -->
	<script type="module">
	// import { OrbitControls } from "https://threejs.org/examples/js/controls/OrbitControls.js";
	// import { OrbitControls } from 'https://raw.githubusercontent.com/mrdoob/three.js/master/examples/jsm/controls/OrbitControls.js';
	// import { OrbitControls } from "./jsm/controls/OrbitControls.js"

	/* make a scene */
	var scene = new THREE.Scene();
	var camera = new THREE.PerspectiveCamera(
	75, window.innerWidth / window.innerHeight, 0.1, 1000 );
	var renderer = new THREE.WebGLRenderer();
	var controls = new THREE.OrbitControls( camera, renderer.domElement );

	/* config camera */
	camera.position.z = 3;

	/* config / init renderer */
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );

	/* make some walls */
	// var plane = new THREE.Plane( new THREE.Vector3( 1, 1, 0.2 ), 3 );
	// var helper = new THREE.PlaneHelper( plane, 1, 0xffff00 );
	// scene.add( helper );

	var geometry = new THREE.PlaneGeometry( 5, 2, 32 );
	var material = new THREE.MeshBasicMaterial(
	{color: 0x880000, side: THREE.DoubleSide} );
	var plane = new THREE.Mesh( geometry, material );
	plane.position.set(1, 1, 1)
	scene.add( plane );


	// var plane = new THREE.Plane(new THREE.Vector3(0, 1, 0, 0), 3);
	// var helper = new THREE.PlaneHelper( plane, 1, 0xffff00 );
	// scene.add( helper );

	/* make a cube */
	var geometry = new THREE.BoxGeometry();
	var material = new THREE.MeshBasicMaterial( { color: 0x008f8f } );
	var cube = new THREE.Mesh( geometry, material );
	scene.add( cube );

	/* make an arrow */
	var dir = new THREE.Vector3( 1, 2, 0 );
	dir.normalize(); //normalize the direction vector (convert to vector of length 1)
	var origin = new THREE.Vector3( 0, 0, 0 );
	var length = 1;
	var hex = 0xffffff;
	var arrowHelper = new THREE.ArrowHelper( dir, origin, length, hex );
	scene.add( arrowHelper );

	function animate() {
	requestAnimationFrame( animate );
	cube.rotation.x += 0.01;
	cube.rotation.y += 0.01;
	renderer.render( scene, camera );
	arrowHelper.rotation.x += 0.01
	arrowHelper.rotation.y += 0.01
	}
	animate();
	</script>
	</body>
	</html>