Threejs - Template2 ES6

by black strings

HTML

<!--
Dot vs cross product
Cross product always returns you an arrow/vector. The return vector will always be perpendicular to the two arrows. it mattesr which of the two arrows goes first.

Dot product always returns a number. If you have two normalized vector, it'll return you a normalized value between 0-1. It can also be negative if one of the vector is negative. It doesn't matter which arrows goes first or second, you'll get the same value.

If the two vectors are not normalized, you may get odd results.
-->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>

CSS

/* fix mouse click offset errors when doing drags */
body {
  margin: 0;
}

JavaScript

// smooth cam dolly https://github.com/yomotsu/camera-controls

var mesh, renderer, scene, camera, controls;

init();
animate();

function init() {

    // renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setPixelRatio( window.devicePixelRatio );
    document.body.appendChild( renderer.domElement );

    // scene
    scene = new THREE.Scene();
    
    // camera
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set( 20, 20, 20 );

    // controls
    controls = new THREE.OrbitControls( camera, renderer.domElement );
    
    // ambient
    //scene.add( new THREE.AmbientLight( 0x222222 ) );
    
    // light
    var light = new THREE.DirectionalLight( 0xffffff, 1 );
    light.position.set( 20,20, 0 );
    scene.add( light );
    
    var gridXZ = new THREE.GridHelper(1000, 100);
    scene.add(gridXZ);
    //gridXZ.rotation.x = Math.PI / 2;
    
    // axes
    //scene.add( new THREE.AxesHelper( 20 ) );

    // geometry
    var geometry = new THREE.SphereGeometry( 5, 12, 8 );
    
    // material
    var material = new THREE.MeshLambertMaterial( {
        color: 0x00ffff, 
       /*  flatShading: true,
        transparent: true,
        opacity: 0.7, */
    } );
    
    // mesh
    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );
    
    const point2d = [
    	new THREE.Vector2(0,0), new THREE.Vector2(10, 0), new THREE.Vector2(10, 10), new THREE.Vector2(10,0)
    ];
    
   /* 	for(const p of point2d) {
   	      p.multiplyScalar(20.0);
   	    } */
    
    const shape = new THREE.Shape(point2d);
    const geo = new THREE.ShapeGeometry(shape, 5);
    const mat = new THREE.MeshBasicMaterial({color: 0xff0000});
    const m = new THREE.Mesh(geo, mat);
    m.add(new THREE.AxesHelper(1));
    scene.add(m);
    
    const p1 = new THREE.Vector3();
    const p2 = new THREE.Vector3(0,1);
    const l1Points =...