jecppec

by Jelena Lukic

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title></title>

    <link rel="stylesheet" href="style.css">
</head>
    <body>
        <p id="scaleX">CLICK TO SCALE +X</p>
        <p id="scaleY">CLICK TO SCALE +Y</p>
        <p id="scaleZ">CLICK TO SCALE +Z</p>
        <p id="size"></p>

        <script type="module" src="client.js"></script>

    </body>

</html>

CSS

html, body{
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: aquamarine;
}

canvas{
    height: 100vh;
    width: 100vw;
}

#scaleX{
    position: fixed;
    top:0;
}

#scaleY{
    position: fixed;
    top:50px;
}
#scaleZ{
    position: fixed;
    top:100px;
}

#size{
    position: fixed;
    width: 500px;
    margin: 0% auto; /* Will not center vertically and won't work in IE6/7. */
    left: 0;
    right: 0;
}

JavaScript

import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.124.0/build/three.module.js';
import { OBJLoader } from 'https://cdn.jsdelivr.net/npm/three@0.124.0/examples/jsm/loaders/OBJLoader.js'
import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.124.0/examples/jsm/controls/OrbitControls.js';


let modelReady;
let model;
let [x, y, z] = [1, 1, 1];
let boundingBox, size;

let scaleFirst=40;
let scaleSec= 40;
let [_scaleFirst, _scaleSec] = [40,40]; 

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.y = 100;
camera.position.z = 200;

const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);

const ambientLight = new THREE.AmbientLight(0x404040, 2); // soft white light
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.x = 0;
directionalLight.position.y = 15;
directionalLight.position.z = 25;
scene.add(directionalLight);

const directionalLight2 = new THREE.DirectionalLight(0xffffff, 1);
directionalLight2.position.x = 0;
directionalLight2.position.y = 10;
directionalLight2.position.z = -20;
scene.add(directionalLight2);

var texture2 = new THREE.TextureLoader().load( "https://postimg.cc/fVDZL5yS" );
texture2.wrapS = texture2.wrapT = THREE.RepeatWrapping;
let textureWidth = texture2.width;
let textureHeight = texture2.height;
//texture2.offset.set( 0, 0 );
texture2.anisotropy = renderer.capabilities.getMaxAnisotropy();
texture2.repeat.set( scaleFirst, scaleSec );

//obj
const loader = new OBJLoader();

loader.load(

	'zitkussen_strak_zijnaad.obj',
	
	function ( object ) {
        model = object;
        
        object.scale.set(1,1,1);
        object.traverse( function ( child ) {
            if (...