jecppec

by tfoller

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: 100px;
    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 [_ratio, _scaleFirst, _scaleSec] = [0, 5, 5];

let boundingBox, size;

const scene = new THREE.Scene();

scene.add(new THREE.AxesHelper(100))

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

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.set(0, 15, 25);
scene.add(directionalLight);

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

var texture2 = new THREE.TextureLoader().load("https://i.postimg.cc/nhQL3Pt2/1.jpg");
//var texture2 = new THREE.TextureLoader().load("https://alikim.com/_v1_jsm/textures/uv.png");
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(

  'https://raw.githubusercontent.com/alikim-com/jsfiddle/main/zitkussen_strak_zijnaad.obj',

  function(object) {
    model = object;

    object.scale.set(1, 1, 1);
    object.traverse(function(child) {
  ...